最近本地宝的《出行防疫政策查询》小程序比较火,接下来新浪,腾讯,阿里相继也推出了类似的小程序,可以说很方便。
我也在1月16号开始写这套程序,采用的是TP5+MYSQL+微信原生小程序的形式进行。 接口也是拷贝别人的数据进行罗列的,应该也是比较精确实时的数据。
下面我来说说小程序怎么自定义轮播吧
实现的效果如下:
上方是微信小程序是swiper组件
<swiper class="swipers" autoplay="{{autoplay}}" current="{{currentSwiper}}" bindchange="swiperChange">
<block wx:for="{{banner.lists}}">
<swiper-item bindtap="showAd" data-appid="{{item.appid}}" data-path="{{item.path}}">
<image src="{{item.image}}"></image>
</swiper-item>
</block>
</swiper>
由于我采取的是动态罗列输出,需要在API进行返回json数组
$bannerLists = Db::name('banner')->order('id asc')->select();
foreach ($bannerLists as $key => $value) {
$returnData['banner'][$key]['path'] = $value['path'];
$returnData['banner'][$key]['appid'] = $value['appid'];
$returnData['banner'][$key]['image'] = url_domain($value['image']);
}
if (!empty($returnData['banner'])) {
$returnData['banner'] = [ 'lists' => $returnData['banner'],
'count' => Db::name('banner')->count()
];
}
小程序没法打开其他的非业务域名超链接,我这里返回了小程序跳转需要用到的APPID和PATH
输出
$this->buildSuccess($returnData, '成功');
在js里面引入方法
swiperChange: function (e) {
this.setData({
currentSwiper: e.detail.current
})
},