微信小程序仿阿姨帮

作者：模板之家 2018-4-18 11:42 9298人关注

我做的小程序是模仿手机app版的阿姨帮软件，主要实现的功能有：地理定位地图选址预约服务下单查看订单页面跳转底栏切换良好交互图片轮播首先先要解释我的数据来源，我使

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

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

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

功能实现

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

Image text

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

HTML结构

<swiper
class="binner"
vertical="{{vertical}}"
autoplay="{{autoplay}}"
interval="{{interval}}"
duration="{{duration}}"
indicator-dots="{{indicatorDots}}">
<block wx:for="{{topimg}}" wx:key="item">
<swiper-item>
<image src="{{item.image}}" class="slide-image"></image>
</swiper-item>
</block>
<view class="city" bindtap="bindViewTap" >
<text class="current">{{city}}</text>
</view>
</swiper>
JS配置
Page({
data: {
indicatorDots:true,
vertical:false,
autoplay:true,
interval:3000,
duration:1200,
......
}
})

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

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