欢迎光临,了解微信小程序开发,就上易用通!

微信小程序仿阿姨帮

发布:2018-04-18 11:42浏览: 来源:网络 作者:cola

我做的小程序是模仿手机app版的阿姨帮软件,主要实现的功能有:

地理定位 
地图选址 
预约服务 
下单 
查看订单 
页面跳转 
底栏切换良好交互 
图片轮播

首先先要解释我的数据来源,我使用的是用mock来模拟数据,详情看https://www.easy-mock.com Easy Mock是一个可视化工具,能快速生成模拟数据的服务,它能为我们提供一个数据接口url,这要我们就能够使用request发送数据请求了。其次要解释的是用户登录问题,我选择的使用微信账号登录,使用小程序自带的wx.getUseInfo()应用接口来获取用户的信息,当然它首先会调用wx.login接口,询问用户是否给予权限。先就交代这两点,让我们正式进入主题:

功能实现

轮播图 & 底栏交互 & 页面跳转 
先来看看主界面:

微信小程序仿阿姨帮(图1)

Image text

这个界面用到了微信小程序自带的轮播图(swiper)组件以及底栏(tabbar)组件,能够快速的实现我们想要的图片轮播和底栏切换的效果,而这些用原生js或者jquery来coding都是很麻烦的. 让我们来看看微信小程序是如何实现的吧:

HTML结构

 

				
  1. <swiper
  2. class="binner"
  3. vertical="{{vertical}}"
  4. autoplay="{{autoplay}}"
  5. interval="{{interval}}"
  6. duration="{{duration}}"
  7. indicator-dots="{{indicatorDots}}">
  8. <block wx:for="{{topimg}}" wx:key="item">
  9. <swiper-item>
  10. <image src="{{item.image}}" class="slide-image"></image>
  11. </swiper-item>
  12. </block>
  13. <view class="city" bindtap="bindViewTap" >
  14. <text class="current">{{city}}</text>
  15. </view>
  16. </swiper>
  17. JS配置
  18.  
  19. Page({
  20. data: {
  21. indicatorDots:true,
  22. vertical:false,
  23. autoplay:true,
  24. interval:3000,
  25. duration:1200,
  26. ......
  27. }
  28. })

以上就是实现图片轮播效果的代码,使用滑块视图容器swiper组件,它拥有vertical(是否垂直放置图片)、autoplay(是否自动切换)、interval(自动切换时间间隔)、duration(滑动动画时长)、durationindicator-dot(是否显示面板指示点)等属性,再在js里对这些属性做相关的设置。此外,在组件上还用到了列表渲染wx:for,将图片的src属性绑定在一个数组上,使用数组中各项的数据重复渲染swiper组件

看看底栏切换交互的效果吧!

微信小程序仿阿姨帮(图2)

Image text

先暂且不管我制作的gif图有多渣,主要想体现的就是个各底部栏之间能进行切换,这个功能实现较简单,主要在tabBar里设置样式、页面路径、图片路径,用列表list来渲染,详细请参考以下代码

 

				
  1. "tabBar":{
  2. "color":"#888",
  3. "selectedColor":"#00beaf",
  4. "borderStyle":"white",
  5. "backgroundColor":"#fff",
  6. "list":[{
  7. <li o="" cl="" ptm="" pbm"="">





免责声明:本站所有文章和图片均来自用户分享和网络收集,文章和图片版权归原作者及原出处所有,仅供学习与参考,请勿用于商业用途,如果损害了您的权利,请联系网站客服处理。