微信小程序 单选框

标签：lock   ons   关闭   order   单选框   ide   ext   idt   web   

//index.wxml

<view class="item">
   <p>单选</p>
   <block wx:for="{{box}}" wx:for-item="box" wx:for-index="index">
     <view wx:if="{{choose==index}}">
       <view bindtap="choose" data-index="{{index}}" class="box_choose box">{{box.name}}</view>
     </view>
     <view wx:else="{{choose==index}}">
       <view bindtap="choose" data-index="{{index}}" class="box">{{box.name}}</view>
</view>
    </block>
    </view>

index.wxss

.item {
  padding-top: 15%;
  margin-top: 5%;
  position: relative;
  display: -webkit-flex;
}
.item p {
  position: absolute;
  color: #adadad;
  top: 10%;
  left: 10%;
}
.item view {
  margin: 5%;
  flex: 1;
}
.box {
  width: 150rpx;
  height: 150rpx;
  text-align: center;
  padding-top: 35%;
  border: 1px solid black;
  border-radius: 4px;
  box-sizing: border-box;
}
.box_choose {
  background-color: #4889fe;
  color: white;
  border-color: white;
}

//index.js

Page({
  data: {
    box: [
      {
        name: ‘box1-1‘,
        id: 0,
        class: ‘‘
      },
      {
        name: ‘box1-2‘,
        id: 1,
        class: ‘‘
      },
      {
        name: ‘box1-3‘,
        id: 2,
        class: ‘‘
      }
    ],
    box2: [
      {
        name: ‘box2-1‘,
        id: 0,
        class: ‘‘
      },
      {
        name: ‘box2-2‘,
        id: 1,
        class: ‘‘
      },
      {
        name: ‘box2-3‘,
        id: 2,
        class: ‘‘
      }
    ],
    choose: -1,
    choose2: -1
  },
  onLoad: function (options) {
    // 页面初始化 options为页面跳转所带来的参数
    var that = this;
    box2 = that.data.box2;
    // console.log(box);
  },
  onReady: function () {
    // 页面渲染完成
    wx.setNavigationBarTitle({
      title: ‘选择‘,
      success: function (res) {
        // success
      }
    })
  },
  onShow: function () {
    // 页面显示
  },
  onHide: function () {
    // 页面隐藏
  },
  onUnload: function () {
    // 页面关闭
  },
  choose: function (evnet) {
    console.log(event.data.msg.data.data.data.currentTarget.dataset.index);
    // var index = event.data.msg.data.data.data.currentTarget.dataset.index;
    var that = this;
    if (event.data.msg.data.data.data.currentTarget.dataset.index == that.data.choose) {
      that.setData({
        choose: -1
      });
    } else {
      that.setData({
        choose: event.data.msg.data.data.data.currentTarget.dataset.index
      });
    }
  }
})

微信小程序 单选框

标签：lock   ons   关闭   order   单选框   ide   ext   idt   web   

原文地址：http://www.cnblogs.com/panlaixing/p/6552910.html