推荐下载
-
2020-05-12 浏览：789
-
2020-04-04 浏览：654
-
2020-05-06 浏览：560
-
2020-05-08 浏览：545
-
2020-05-12 浏览：543
微信小程序仿阿姨帮
发布时间:2020-11-23我做的小程序是模仿手机app版的阿姨帮软件，主要实现的功能有：
地理定位
地图选址
预约服务
下单
查看订单
页面跳转
底栏切换良好交互
图片轮播
首先先要解释我的数据来源，我使用的是用mock来模拟数据，详情看 Easy Mock是一个可视化工具，能快速生成模拟数据的服务，它能为我们提供一个数据接口url，这要我们就能够使用request发送数据请求了。其次要解释的是用户登录问题，我选择的使用微信账号登录，使用小程序自带的wx.getUseInfo()应用接口来获取用户的信息，当然它首先会调用wx.login接口，询问用户是否给予权限。先就交代这两点，让我们正式进入主题：
功能实现
轮播图 & 底栏交互 & 页面跳转
先来看看主界面：
Image text
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=http://www.yiyongtong.com/archives/"{{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组件
看看底栏切换交互的效果吧！
Image text
先暂且不管我制作的gif图有多渣，主要想体现的就是个各底部栏之间能进行切换，这个功能实现较简单，主要在tabBar里设置样式、页面路径、图片路径，用列表list来渲染,详细请参考以下代码
"tabBar":{
"color":"#888",
"selectedColor":"#00beaf",
"borderStyle":"white",
"backgroundColor":"#fff",
"list":[{
<li o="" cl="" ptm="" pbm"="">