Recently, local treasure “travel epidemic prevention policy inquiry” small program is quite popular, followed by Sina, Tencent, Ali have also launched similar small program, can be said to be very convenient.

I also started to write this program on January 16, using the form of TP5+MYSQL+ wechat native small program. The interface is also a copy of other people’s data for listing, should be more accurate real-time data.

Below I say small program how to define the wheel broadcast

The results are as follows:

The top is wechat mini program is swiper component

<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>
Copy the code

Since I’m taking the dynamic listing output, I need to return a JSON array in the API

$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() ]; }Copy the code

The applet cannot open other non-business domain hyperlinks. I have returned the APPID and PATH that the applet needs to jump to

The output

$this->buildSuccess($returnData, 'success ');Copy the code

Introduce methods in JS

swiperChange: function (e) {
    this.setData({
      currentSwiper: e.detail.current
    })
},
Copy the code

Here are some examples of the implementation