E企盈营销工具技术服务商 热线:4006-838-530

微信小程序投票多选案例

E企盈直播平台营销卖货系统

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.jsconst 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;}arrayFiltervar 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

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信小程序投票多选案例
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏