小程序多个选项选择

效果：

选择

主要使用数组操作：

---

    var redArr = this.data.redData.concat(chooseTitle); //添加操作

    var del_greenData = this.data.greenData;

    del_greenData.splice(classify, 1); //删除操作

---

创建两个数组，一个红色，一个绿色。

---

    redData: ['选项1', '选项2', '选项3', '选项4', '选项5'],

    greenData: ['选项6', '选项7', '选项8', '选项9', '选项10', '选项11'],

---

js代码

/**

    * 点击选项 - 绿

    */

    greenBtnClicked: function (e) {

      var classify = e.currentTarget.dataset.idx; //点击按钮的下标

      var chooseTitle = this.data.greenData[classify]; //点击按钮的title

      var redArr = this.data.redData.concat(chooseTitle); //添加操作

      var del_greenData = this.data.greenData;

      del_greenData.splice(classify, 1); //删除操作

      this.setData({

        redData: redArr,

        greenData: del_greenData

      });

    },

    /**

    * 点击选项 - 红

    */

    redBtnClicked: function (e) {

      var classify = e.currentTarget.dataset.idx; //点击按钮的下标

      var chooseTitle = this.data.redData[classify]; //点击按钮的title

      var greenArr = this.data.greenData.concat(chooseTitle); //添加操作

      var del_redData = this.data.redData;

      del_redData.splice(classify, 1); //删除操作

      this.setData({

        greenData: greenArr,

        redData: del_redData

      });

    },

  },

wxml代码

<view class='mainView'>

  <view class='leftView'>

    <view class='timeView'>

      <text class='time'> 2018-09-12 14:15 </text>

    </view>

  </view>

  <view class='rightView'>

    <view class='redView'>

      <button class='redBtn' wx:for="{{redData}}" wx:key="redData" data-idx="{{index}}" bindtap='redBtnClicked'> {{item}} </button>

    </view>

    <view class='greenView'>

      <button class='greenBtn' wx:for="{{greenData}}" wx:key="greenData" data-idx="{{index}}" bindtap='greenBtnClicked'> {{item}} </button>

    </view>

  </view>

</view>

wxss代码

.mainView{

  display: flex;

  flex-direction: row;

  border-bottom: 1px solid gray;

}

.leftView,.timeView{

  width: 40px;

  display: flex;

  align-items: center;

  justify-content: center; 

}

.time{

  font-size: 10px;

}

.rightView{

  display: flex;

  flex-direction: row;

  border-left:1px solid gray;

}

.rightView{

  display: flex;

  flex-direction: column;

}

.redView,.greenView{

  display: flex;

  flex-direction: row;

  flex-wrap: wrap;

}

.redBtn{

  width: 50px;

  height: 25px;

  line-height: 25px;

  text-align: center;

  background-color: #FF6347;

  color: white;

  border-radius: 5px;

  font-size: 10px;

  margin: 5px;

  padding: 0px 5px 0px 5px;

}

.greenBtn{

  width: 50px;

  height: 25px;

  line-height: 25px;

  text-align: center;

  background-color: #3CB371;

  color: white;

  border-radius: 5px;

  font-size: 10px;

  margin: 5px;

  padding: 0px 5px 0px 5px;

}