這裡我們應用之前一篇寫過的彈框效果 ， 哈哈哈 ，是不是很萬精油；單選框我們運用偽元素自定義，不使用圖片 ， 這個例子可以運用到很多情況；
知識點：
1、理解wx:if作用
2、理解三元運算子的使用
3、利用偽元素after/before自定義內容
4、定時器setTimeout的使用
照例先上程式碼
wxml部分：

<view class='input-list'>
  <view class='list-l'>預計到店</view>
  <view class='list-r' bindtap='powerDrawer' data-statu="open">
    <view class='arriveTime'>{{item}}</view>
  </view>
</view>

<view class="drawer_screen" wx:if="{{showModalStatus}}" bindtap="powerDrawer" data-statu="close" catchtouchmove="preventTouchMove"></view> 
<!--content-->
<!--使用animation屬性指定需要執行的動畫-->
<view animation="{{animationData}}" class="drawer_box" wx:if="{{showModalStatus}}" catchtouchmove="preventTouchMove"> 
  <view class='modalBox'>
    <view class='choosePush grey9'>房間整晚保留，14:00之前到店可能需要等房</view>
    <view class="{{_num == 0 ? 'choosePush t' : 'choosePush'}}" bindtap='chooseChecked' data-num='0' data-txt='18:00以前'>
      18:00以前
      <view class='checkbox' wx:if="{{_num==0}}"></view>
    </view>
    <view class="{{_num == 1 ? 'choosePush t' : 'choosePush'}}" bindtap='chooseChecked' data-num='1' data-txt='20:00以前'>
      20:00以前
      <view class='checkbox' wx:if="{{_num==1}}"></view>
    </view>
    <view class="{{_num == 2 ? 'choosePush t' : 'choosePush'}}" bindtap='chooseChecked' data-num='2' data-txt='23:59以前'>
      23:59以前
      <view class='checkbox' wx:if="{{_num==2}}"></view>
    </view>
    <view class="{{_num == 3 ? 'choosePush t' : 'choosePush'}}" bindtap='chooseChecked' data-num='3' data-txt='次日凌晨6:00之前'>
      次日凌晨6:00之前
      <view class='checkbox' wx:if="{{_num==3}}"></view>
    </view>
  </view>
</view>
 

wxss部分：

.input-list {
  padding: 40rpx;
  border-bottom: 1px solid #eee;
  display: flex;
  position: relative;
}

.list-l {
  flex: 2;
  line-height: 50rpx;
}

.list-r {
  flex: 5;
}

.arriveTime {
  line-height: 50rpx;
}

.drawer_screen { 
 width: 100%; 
 height: 100%; 
 position: fixed; 
 top: 0; 
 left: 0; 
 z-index: 1000; 
 background: #000; 
 opacity: 0.5; 
 overflow: hidden; 
} 
  
/*content*/
.drawer_box { 
 width: 100vw; 
 height: auto;
 padding: 0;
 overflow: hidden; 
 position: fixed; 
 bottom: 0; 
 left: 0; 
 z-index: 1001; 
 background: #fff; 
} 

.modalBox {
  padding: 0 40rpx;
  font-size: 30rpx;
}

.choosePush {
  text-align: center;
  padding: 40rpx 0 ;
  border-bottom: 1px solid #eee;
  position: relative
}

.choosePush.t {
  color: #1da0ee;
}

.checkbox {
  position: absolute;
  right: 0;
  top: 38rpx;
  height: 40rpx;
  width: 40rpx;
  border: 1px solid #1da0ee;
}

.checkbox::after {
  content: '';
  position: absolute;
  height: 15rpx;
  width: 25rpx;
  border-left: 1px solid #1da0ee;
  border-bottom: 1px solid #1da0ee;
  transform: rotate(-45deg);
  top: 6rpx;
  right: 6rpx;
}
 

js部分：

Page({

  data: {
    showModalStatus: false,
    _num: null,
    haveChoosed: false,
    sta: null,
    item: '18:00',
  },

  preventTouchMove() { },

  powerDrawer: function (e) {
    console.log(e)
    var currentStatu = e.currentTarget.dataset.statu;
    this.util(currentStatu)
  },
  util: function (currentStatu) {
    /* 動畫部分 */
    // 第1步：建立動畫例項 
    var animation = wx.createAnimation({
      duration: 200, //動畫時長 
      timingFunction: "linear", //線性 
      delay: 0 //0則不延遲 
    });

    // 第2步：這個動畫例項賦給當前的動畫例項 
    this.animation = animation;

    // 第3步：執行第一組動畫 
    animation.opacity(0).translateY(500).step();

    // 第4步：匯出動畫物件賦給資料物件儲存 
    this.setData({
      animationData: animation.export()
    })

    // 第5步：設定定時器到指定時候後，執行第二組動畫 
    setTimeout(function () {
      // 執行第二組動畫 
      animation.opacity(1).translateY(0).step();
      // 給資料物件儲存的第一組動畫，更替為執行完第二組動畫的動畫物件 
      this.setData({
        animationData: animation
      })

      //關閉 
      if (currentStatu == "close") {
        this.setData(
          {
            showModalStatus: false
          }
        );
      }
    }.bind(this), 200)

    // 顯示 
    if (currentStatu == "open") {
      this.setData(
        {
          showModalStatus: true
        }
      );
    }
  },

  chooseChecked: function (e) {
    console.log(e) //打印出來你會了解所設定引數的意義
    this.setData({
      _num: e.currentTarget.dataset.num,
      item: e.currentTarget.dataset.txt,
    })

    setTimeout(function () {
      this.setData(
        {
          showModalStatus: false
        }
      );
    }.bind(this), 2000)
  },


  /**
   * 生命週期函式--監聽頁面載入
   */
  onLoad: function (options) {

  },

  /**
   * 生命週期函式--監聽頁面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命週期函式--監聽頁面顯示
   */
  onShow: function () {

  },

  /**
   * 生命週期函式--監聽頁面隱藏
   */
  onHide: function () {

  },

  /**
   * 生命週期函式--監聽頁面解除安裝
   */
  onUnload: function () {

  },

  /**
   * 頁面相關事件處理函式--監聽使用者下拉動作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 頁面上拉觸底事件的處理函式
   */
  onReachBottom: function () {

  },

  /**
   * 使用者點選右上角分享
   */
  onShareAppMessage: function () {

  }
})
 

這是單選效果，複選效果 獲取其index（如wxml中屬性設定為 data-selectIndex=’’{{index}}’’ , 在js方法中打印出來物件的json陣列 ， 利用三元運算新增class屬性完成），點選它自身時，改變其狀態，最後setData已改變屬性的json陣列