微信小程序简易版选座位效果

页面结构

<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)
    }


  }