微信小程序投票多选案例

红太狼 2021-03-26 13:46 661阅读 0赞

![在这里插入图片描述][20190715094155738.gif]

*  index.wxml
````
    <view>
        <view class="page__hd">
    
            <view class="weui-cells weui-cells_after-title">
                <view class="weui-cell weui-cell_input">
                    <view class="weui-cell__hd">
                        <view class="weui-label">多选项</view>
                    </view>
                    <view class="weui-cell__bd">
                        <input class="weui-input" placeholder="多选项" bindinput="countInput" value='{ { count }}'/>
                    </view>
                </view>
            </view>
            <view class='member' wx:for = "{
       { members}}" wx:for-item = "member" wx:key="*this" data-id="{
       { member.id }}" bindtap='click'>
                  <view>
                    <text>{
       { member.name  }}</text>
                  <wxs module="tools" src="../../utils/arrayFilter.wxs"></wxs>
                  <image wx-if="{ {tools.isInArray(member.id,selecteds) == true}}" class='selected' src="../../imgs/selected.png" mode="cover"></image>
                </view>
            </view>
        </view>
    </view>
````
 *  index.js
````
    const app = getApp()
    
    Page({ 
      data: { 
        members: [
          { 
            id : 1,
            name: '雨雨'
          },
          { 
            id: 2,
            name: '苏苏'
          },
          { 
            id: 3,
            name: '哈哈'
          },
          { 
            id: 4,
            name: '嘻嘻'
          },
          { 
            id: 5,
            name: '呵呵'
          },
          { 
            id: 6,
            name: '兔兔'
          }
    
        ],
        //多选数量
        count: 2,
        //选中项的数组
        selecteds: []
      },
      click: function (e) { 
        let id = e.currentTarget.dataset.id;
        let array = this.data.selecteds;
        if (this.isInArray(id, array) == true) { 
          console.log('id:' + id +'已经被选中')
        } else { 
          //如果数组的长度大于或等于count，则删除数组第一个 并把后面的id添加到数组中
          if (array.length >= this.data.count) { 
            //移除数组左边第一位
            array.shift();
          } 
          array.push(id)
        }
    
        this.setData({ 
          selecteds: array
        })
      },
      //判断元素是否在数组中
      isInArray: function (value, array) { 
        for (var i = 0; i < array.length; i++) { 
          if (value == array[i]) { 
            return true;
          }
        }
        return false;
      },
      //动态设置选中项的值
      countInput: function (e) { 
        this.setData({ 
          count: e.detail.value
        })
      }
    })
````
 *  index.wxss
````
    /**index.wxss**/
    .member{ 
      background-color: white;
      margin-top: 5px;
      padding: 10px;
      font-size: 14px;
      
    }
    
    .selected { 
      width: 48rpx;
      height: 48rpx;
      float: right;
    }
````
 *  arrayFilter
````
    var isInArray = function (value, array) { 
      for (var i = 0; i < array.length; i++) { 
        if (value == array[i]) { 
          return true;
        }
      }
      return false;
    }
    
    module.exports = { 
      isInArray: isInArray
    }
````
Demo地址：[https://github.com/niezhiliang/selected-many-demo][https_github.com_niezhiliang_selected-many-demo]

[20190715094155738.gif]: /images/20210326/1616766345696.gif
[https_github.com_niezhiliang_selected-many-demo]: https://github.com/niezhiliang/selected-many-demo