微信小程序> 微信小程序投票多选案例

微信小程序投票多选案例

浏览量:671 时间: 来源:苏雨丶

小程序

  • 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

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎