最近本地宝的《出行防疫政策查询》小程序比较火,接下来新浪,腾讯,阿里相继也推出了类似的小程序,可以说很方便。

300 阅读1分钟

最近本地宝的《出行防疫政策查询》小程序比较火,接下来新浪,腾讯,阿里相继也推出了类似的小程序,可以说很方便。

我也在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
    })
},

下面是实现的一些效果演示