微信小程序内的在线选座功能是如何实现的？

Question

之前研究小程序，有在线选座的功能，没找到实现办法；现在看到猫眼的实现了在线选座功能（如图），麻烦谁能给指点一下呢？这种类似原生的效果，是不是用的什么插件？？？

Answer 1

今天写了个简单的选座位，大概是实现了这个选座位的功能。
页面这样

<view class="seat-detail">
      <view wx:for="{{seatarr}}" wx:key="id" wx:for-item="v" class="seat-item {{v.usable==1?'':'disable'}} {{selectedSeatId == v.seat_id ? 'active' : ''}}" data-id="{{v.seat_id}}" data-status="{{v.usable}}" bindtap="checkseat">{{v.number}}</view>
</view>

js

checkseat: function (e) {
    // 选择座位
    var status = e.currentTarget.dataset.status;
    var id = e.currentTarget.dataset.id;
    if (status == 1) {
      this.setData({
        selectedSeatId: id
      })
    }else{
       wx.showToast({

        title: '这个座位不能选!',

        icon: 'loading',

        duration: 1500

      })
      setTimeout(function () {

        wx.hideToast()

      }, 2000)
    }


  }

status是后台给的数据。1能选2不能选、

Answer 2

微信小程序全方位深度解析视频教程之豆瓣电影