博客：crazymirror.cn

首先 微信小程序刚刚出现
但很多客户都想要做小程序。 最近做了一个小程序的项目 踩了不少的坑 >但网上相关的资料很少，这些坑都是自己一个一个的踩过来的。 现在分享一些填坑的经验 希望大家工作顺利。有写的不恰当不对的地方 欢迎留言或给我发邮件。

单选

应用场景 ：选择导航、标签、 播放音频等。

踩坑原因 ： 小程序不支持dom操作。

废话不多说 直接贴代码

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>

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

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

多选

应用场景 ：点赞等。

wxml

<view class="item">
  <p>多选</p>
    <view wx:for="{{box2}}" wx:for-item="box" wx:for-index="index" >
      <view bindtap="chooseD" data-index="{{index}}" class="{{box.class}} box">{{box.name}}</view>
    </view>
</view>

wxss 同上

js

/*data 部分在单选js中有*/
var box2;
chooseD: function (event) {
    var that = this;
    console.log(box2[event.currentTarget.dataset.index].class);
    if (box2[event.currentTarget.dataset.index].class == 'box_choose') {
      box2[event.currentTarget.dataset.index].class = '';
      that.setData({
        box2: box2
      })
    } else {
      box2[event.currentTarget.dataset.index].class = 'box_choose';
      that.setData({
        box2: box2
      })
    }
  }