微信小程序> 微信小程序系列八:使用view实现全选,单选

微信小程序系列八:使用view实现全选,单选

浏览量:2696 时间: 来源:小丫么小菜菜

原理:

    根据数据的checked属性值判断是否处于选中状态

注意:

   样式可以自己调整,这里不再添加

wxml:

block wx:for="{{list}}" wx:key="*this.index"  view data-index="{{index}}" data-name="{{item.id}}" class="{{item.checked==true?'red bc':'bc'}}"bindtap='select'    {{item.name}}  /view/blockbutton bindtap='selectAll'全选/button

js:

Page({  /**   * 页面的初始数据   */  data: {    list:[      { id: 1, name: 1, checked:false},      { id: 2, name: 2, checked: false },      { id: 3, name: 3, checked: false },      { id: 4, name: 4, checked: false },    ],    select:[]  },  //单选  select:function(e){    let selectValue = e.currentTarget.dataset.name    let index = e.currentTarget.dataset.index;    let list = this.data.list    let newli = 'list[' + index +'].checked';    this.setData({      [newli]: !this.data.list[index].checked    })    let li2 = this.data.list[index].checked    if (li2==false){      for (let i in this.data.select) {        if (this.data.select[i] == selectValue) {          this.data.select.splice(i,1);        }      }    } else{      this.data.select.push(selectValue);    }    console.log(this.data.select)  },  //全选,取消全选  selectAll:function(e){    let list=this.data.list;    for(let i=0;ilist.length;i++){      let newli = 'list[' + i + '].checked';      this.data.select.push(this.data.list[i].id);      this.setData({        [newli]: !this.data.list[i].checked      })    }    console.log(this.data.select)  },  /**   * 生命周期函数--监听页面加载   */  onLoad: function (options) {    }})

 

版权声明

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

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

最新资讯

热门模板

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