滴滴一下，小程序专车来了（下）

258资源分享 > 建站学院 > 微信开发 > 滴滴一下，小程序专车来了（下）

购买VIP 金币充值

分类

织梦教程帝国教程 discuz教程微信开发 MYSQL教程 MSSQL教程网站运营 ecshop教程前端教程 Phpweb教程 php编程服务器架设 ASP编程脚本编程

滴滴一下，小程序专车来了（下）

发布时间:2020-10-20

功能四: 滴滴等待进度

滴滴一下，小程序专车来了（下）

怎样去做这个页面呢，或于你以后也需要计时器(不是倒计时)或者进度条，可以参考这里。
圆形进度条有很多实现的方法，但我觉得canvas还是挺方便的。两个canvas搞定

<canvas class="progress_bg" canvas-id="canvasProgressbg"> </canvas> //画底色 <canvas class="progress_canvas" canvas-id="canvasProgress"> </canvas> //画进度条，传递一个step参数，用定时器去绘制

第三坑：绘制canvas没有问题，文档也给的十分的详细，但是里面那个计时器怎么制作呢？我只需要分秒，而却又不是倒计时，并且还要跟外面保持一致。前端这么心酸的吗？啊，硬着头皮去写吧。搜索了下资源发现网上这方面的资料真的少。没有办法，bug还是要解决的。你是否也遇到过这样的问题，或于以后呢！记得回来找我...

parseTime: function(time){ // 这里参考了每个小程序项目中自带的utils下的util.js，大牛写的就是简洁明了 var time = time.toString(); return time[1]?time:'0'+time; //自动归零补零 }, countInterval: function () { var curr = 0; this.setData({ time: this.parseTime(timer.getMinutes())+":"+this.parseTime(timer.getSeconds()), //格式化下时间，取分秒 }); timer.setMinutes(curr/60); //秒针60了自动加1 timer.setSeconds(curr%60); //60后归零 curr++; }

对于同步，那肯定很简单呀，放在一个定时器里就够了。点这里查看源码

功能五: 滴滴取消行程

有打车就应该有取消对吧，一看取消行程页面就有点端倪。这些样式需要自己去写吗？要学会说no，这里就以这个为例子，讲下我在小程序开始中如何使用weui快速去搭建一个页面效果。

滴滴一下，小程序专车来了（下）

这里给一些我觉得还行的资料：在小程序中可以直接使用的例子 weui小程序官方文档，
要注明的一点，引用weui要在相应的文件夹里或全局的wxss引用它的css,可能多个页面都需要用到，这里在全局引用

@import 'styles/weui.wxss';

在app.wxss中引用这段代码就可以开始你的weui之旅了，比较啰嗦的贴了这么长的一段代码。暗示你要用weui去快速开发你的小程序了!

<view class="weui-cells weui-cells_after-title"> //使用weui可以直接复制套上去用就好了 <checkbox-group bindchange="bindReasonChange"> <label class="weui-cell weui-check__label" wx:for="{{reasons}}" wx:key="value"> <checkbox class="weui-check" value="{{item.value}}"checked="{{item.checked}}"/> <view class="weui-cell__bd name" >{{item.name}}</view> <view wx:if="{{item.checked}}" class="checked "> //点击是显示红色的√ <image src=http://www.yiyongtong.com/archives/"../../assets/images/checked.png"></image> </view> <view wx:if="{{!item.checked}}" class="checked "> //不点击是显示空圆 <image src=http://www.yiyongtong.com/archives/"../../assets/images/nochecked.png"></image> </view> </label> </checkbox-group> <view class="weui-cell weui-cell_link {{show==true?hidden:''}}"> <view class="weui-cell__bd moreReasons" style="display: {{show==true?'none':''}};"bindtap='moreReasons'> <text>点击查看更多原因</text> </view> </view> </view>

采坑经历：点击转态如何解决呢？一开始我是这样想的，用一个icon通过改变它的checked事件去呈现不同的转态。这样是可以实现的，但是只能点击一个，不能多选。痛苦啊！！
一上午辗转反侧，较劲脑汁。反复的去看文档，终于豁然开朗起来，可以用多重循环去判断checked。哎，js还是超级重要啊。话不多说

bindReasonChange(e){ let reasons = this.data.reasons; let strVal = e.detail.value; for(var i = 0, lenI = reasons.length; i < lenI; ++i){ reasons[i].checked = false; for(var j = 0, lenJ = strVal.length; j < lenJ; ++j){ if(reasons[i].value==strVal[j]){ reasons[i].checked =true; break; } } }

以后我们的页面或多或少可能需要点击选择功能，其实原理都差不多，这点你得到了吗，以后再做这方面的功能时就能用上了。总感觉还有什么没写完一样：好吧！！

在做点击加载更多的，我是这样打理的。wx:for一个数组然后去截取他的下边显示。点击加载更多时全部for这个数组。然后在用定时器设置wx.showLoading()显示加载更多效果，就有了那种既视感功能五: 滴滴司机评分

本文标签

程序一下滴滴专车

258资源分享网

分类

推荐文章

推荐下载

滴滴一下，小程序专车来了（下）

本文标签