类似滴滴打车小程序系统开发的方法
导读:本文共4141.5字符,通常情况下阅读需要14分钟。同时您也可以点击右侧朗读,来听本文内容。按键盘←(左) →(右) 方向键可以翻页。
摘要: 功能一:滴滴首页 功能描述:顶部导航的制作,点击相应的nav页面呈现不同的内容,并且点击时能判断是向前还是向后自动滑出下一个nav,实现动画过度效果。输入起始位置模拟等待的时间。 实现原理: 模拟等待时间加载效果,使用组件化的概念,创建一个template文件夹<templatename="sprinne... ...
目录
(为您整理了一些要点),点击可以直达。功能一:滴滴首页
功能描述:顶部导航的制作,点击相应的nav页面呈现不同的内容,并且点击时能判断是向前还是向后自动滑出下一个nav,实现动画过度效果。输入起始位置模拟等待的时间。
实现原理:
模拟等待时间加载效果,使用组件化的概念,创建一个template文件夹
<templatename="sprinner"><blockwx:if="{{isLoading}}"><viewclass="spinner"><viewclass="bounce1"></view><viewclass="bounce2"></view><viewclass="bounce3"></view></view></block></template>
在需要用到加载效果的地方就可以直接使用,
<importsrc="/templates/sprinner.wxml"/><templateis="sprinner"data='{{isLoading}}'></template>//通过去设置isLoading的布尔值来判断是否需要显示
头部导航并且点击时能判断滑出方向以及自动滑出,我们可以通过一个scroll-left="{{navScrollLeft}}"这个属性去设置,点击nav我们可以动态的去改变这个值,从而达到这种效果。
<scroll-viewscroll-x="true"class="nav"scroll-left="{{navScrollLeft}}"scroll-with-animation="{{true}}"><blockwx:for="{{navData}}"wx:for-index="id"wx:for-item="navItem"wx:key="index"><viewclass="nav-item{{currentTab==id?'active':''}}"data-name="{{navItem.name}}"data-current="{{id}}"bindtap="switchNav">{{navItem.name}}</view></block></scroll-view>
怎样去改变这个navScrollLeft的值呢?一开始想的是去设置一下nav的导航的left,然后超出则隐藏。坑啊,根本就实现不了。无法判断左滑出还是又滑出,后来又想到设置一个阈值。累真的难写。好像放弃啊,还是坚持下吧,于是想到分开来取写他们的js
switchNav(e){varcur=e.currentTarget.dataset.current;varsingleNavWidth=this.data.windowWindth/4;//获取屏幕宽度存放放四个nav,this.setData({navScrollLeft:(cur-1)*singleNavWidth,//点击去减少每一个nav的值currentTab:cur,})switchTab(e){varcur=event.detail.current;varsingleNavWidth=55;//设置每一个nav的宽度this.setData({currentTab:cur,navScrollLeft:(cur-1)*singleNavWidth//同样动态的去改变这个值});},
第一次打理这种顶部导航效果的小程序,而却还带一点特效的。以后的你如果碰到了就可以回来借鉴借鉴,避免跟我一样,在这里浪费大量的时间和精力了。我们可是要完成有效时间创建更大价值的程序猿呀...
功能二: 起始位置的选择
为了做这个效果,反反复复的看了n遍文档,真的是比较坑爹。微信小程序api对于地图这方面讲的确实不怎么详细,可能是我这种对地图处理天生迷茫的人。这里将详细的把我遇到的问题一一列举出来,希望也能够帮助到今后的你去处理地图这种东西少踩点坑吧。
这里使用到了关键词搜索,逆地址解析,地址解析,切换城市列表,建议以后做这个可以了解下腾讯地图api,还是比较方便的
varQQMapWX=require('../../libs/qqmap-wx-jssdk.js');//导入需要使用的包,创建一个libs文件夹varqqmapsdk;qqmapsdk=newQQMapWX({key:'DHNBZ-2ZLKK-T7IJJ-AXSQW-WX5L6-A6xxxx'//申请自己的开发者密钥});qqmapsdk.reverseGeocoder({//逆地址解析api,可以根据你的经纬度去解析位置地址location:{latitude:latitude,longitude:longitude,},success:function(res){conslog.log(res)}
第一个坑:如何去获取经纬度呢,移动markes?,天呐这要写多少,对于大牛们来说可能分分分钟,对于刚入门的小生来说难度还是挺大大。沉思良久,突然发现 this.mapCtx.getCenterLocation,移动地图事件获取地图中心的经纬度。那么我们可以去固定一个 controls在地图中心,去移动地图来解析他的坐标位置,将数据绑定在下面显示出来,于是就实现了。emmm代码如下
bindregionchange:function(e){//移动地图事件varthat=thisthis.mapCtx.getCenterLocation({//getCenterLocation可以获取地图中点的经纬度success:function(res){app.globalData.strLatitude=res.latitude//存放到全局去,供后面计算价格使用app.globalData.strLongitude=res.longitudeqqmapsdk.reverseGeocoder({location:{latitude:res.latitude,//通过移动地图可以得到相应中心点的经纬度longitude:res.longitude,},success:function(res){that.setData({address:res.result.address,//得到的经纬度逆地址解析得到我们的位置信息bluraddress:res.result.formatted_addresses.recommend})},});
第二个坑: 目的地调用api一样可以实现搜索提示功能,但我需要历史记录也存在,并且点击某一项我需要跳转到首页显示出来,没有历史的页面体验感极差。是否?这里我是这样实现的
qqmapsdk.getSuggestion({//调用api实现关键词搜索提示keyword:value,//传递input的值,这里要传value不是'value',刚开始犯困。提示一下region:'南昌',success:function(res){letdata=res.datathat.setData({address:data,value})
<viewwx:if="{{!value==''}}"class="destination"wx:for="{{address}}"data-destination="{{item.title}}"data-end="{{item.address}}"bindtap="toIndex"wx:key="{{item.id}}"><viewwx:if="{{value==''}}"class="destination"wx:for="{{entity}}"data-destination="{{item.title}}"data-end="{{item.address}}"bindtap="toIndex"wx:key="{{item.id}}">
通过wx:if去判断输入框。下面for不同的数组,填了第一小坑坑。接下来就会去思考,当我们点击搜索的怎么把它加入到我们的历史中呢?点击获取那个值的id然后push到历史数组中去,是不是很nice,实现了滴滴起始位置的选择,当然我们这这是冰山一角,强大的背后还需要去探索。
功能三: 滴滴费用计算
古人云:细节决定成败,一个良好的微信小程序往往就是一些细节打动人心,居然是模仿,虽做不到百分百,至少还是很希望一模一样。
分析分析,首页点击呼叫快车页面不跳转,但要显示不同的内容。是不是也可以跟上面一样用wx:if来处理呢?没错用一个repeat去承载要显示的内容,这样就可以不在刷星这个小技巧get到了吗。
<repeatwx:if="{{callCart}}"><repeatwx:else>
计算价钱一样用到了腾讯地图api获取两点之间的距离,刚才把起始点都存放在globalData里,这样的好处是,可以随时得到里面的数据
let{endLatitude,endLongitude}=app.globalData//使用ES6的语法去结构数据qqmapsdk.calculateDistance({mode:'driving',to:[{latitude:endLatitude,longitude:endLongitude}],success:(res)=>{varnum1=8+1.9*(res.result.elements[0].distance/1000)varplay1=num1.toFixed(1)//取一位小数点app.globalData.play=play1//同样存放在全局里,后面订单结束支付要用上this.setData({play1:play1,})},
</div> <div class="zixun-tj-product adv-bottom"></div> </div> </div> <div class="prve-next-news">
类似滴滴打车小程序系统开发的方法的详细内容,希望对您有所帮助,信息来源于网络。