小程序OFO编写计费页

发布时间：2020-12-14 19:46:19 所属栏目：资源来源：网络整理

导读：编写计费页 1.页面结构 ????view?class="endride" ????????button?type="warn"?disabled="{{disabled}}"?bindtap="endRide"结束骑行/button ????????button?type="primary"?bindtap="moveToIndex"回到地图/button ????/view /view 2.页面样式 pre class="hlj

编写计费页

1.页面结构
????<view?class="endride">

????????<button?type="warn"?disabled="{{disabled}}"?bindtap="endRide">结束骑行</button>

????????<button?type="primary"?bindtap="moveToIndex">回到地图</button>

????</view>

</view>
2.页面样式
<pre class="hljs undefined">.container{

????width:?100%;

????display:?flex;

????flex-direction:?column;

????align-items:?center;

????justify-content:?space-between;

????background-color:?#fff;

}

.number,.endride{

????padding:?60rpx?0;

????flex:?2;

????width:?100%;

????text-align:?center;

}

.time{

????text-align:?center;

????width:?100%;

????flex:?6;

}

.time?.time-content{

????font-size:?100rpx;

}

.endride?button{

????width:?90%;

????margin-top:?40rpx;

}

3.页面数据逻辑

<pre class="hljs undefined">//?pages/billing/index.js
Page({
??data:{
????hours:?0,????minuters:?0,????seconds:?0,????billing:?"正在计费"
??},//?页面加载
??onLoad:function(options){
????//?获取车牌号，设置定时器
????this.setData({
??????number:?options.number,??????timer:?this.timer
????})
????//?初始化计时器
????let?s?=?0;
????let?m?=?0;
????let?h?=?0;
????//?计时开始
????this.timer?=?setInterval(()?=>?{
??????this.setData({
????????seconds:?s++
??????})
??????if(s?==?60){
????????s?=?0;
????????m++;
????????setTimeout(()?=>?{?????????
??????????this.setData({
????????????minuters:?m
??????????});
????????},1000)??????
????????if(m?==?60){
??????????m?=?0;
??????????h++
??????????setTimeout(()?=>?{?????????
????????????this.setData({
??????????????hours:?h
????????????});
??????????},1000)
????????}
??????};
????},1000)??
??},//?结束骑行，清除定时器
??endRide:?function(){
????clearInterval(this.timer);
????this.timer?=?"";
????this.setData({
??????billing:?"本次骑行耗时",??????disabled:?true
????})
??},//?携带定时器状态回到地图
??moveToIndex:?function(){
????//?如果定时器为空
????if(this.timer?==?""){
??????//?关闭计费页跳到地图
??????wx.redirectTo({
????????url:?'../index/index'
??????})
????//?保留计费页跳到地图
????}else{
??????wx.navigateTo({
????????url:?'../index/index?timer='?+?this.timer
??????})
????}
??}
})

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!