微信小程序多选，全选

最新推荐文章于 2024-04-06 02:25:58 发布

_Lan

最新推荐文章于 2024-04-06 02:25:58 发布

阅读量313

点赞数 1

文章标签：微信小程序小程序

本文链接：https://blog.csdn.net/LiXiao_Lan/article/details/133675271

版权

1，页面样式

微信小程序中不能直接在wxml使用includes，否则不起作用，可通过 wxs 实现

<wxs module="module">
  module.exports.includes = function (array, searchElement) {
    return array.indexOf(searchElement) !== -1
  } 
</wxs>

<view>

<!-- 多选 -->
<view class="pd-tb30" style="border-bottom: 1rpx solid #EEE;" wx:for="{{list}}">
    <view class="p-flex-sb" bindtap="checkboxChange" data-id="{{item.id}}">
        <view class="p-flex">
            <view class="common_icon {{ module.includes(checkedIds,item.id) ? 'icon-a-100 theme' : 'icon-a-99 col-d9'}} icon-font-20 m-r30"></view>
            <view>
                <view>{{item.remark}} 
                      <text class="font-16-28 white black-bg pd-lr10 radius10">电子</text>
                </view>
                <view class="col-a6 font-16-28">{{item.tradeTime}}</view>
             </view>
        </view>
        <view class="p-flex-center">￥{{item.tradeAmt}}元</view>
    </view>
</view>

<!-- 全选 -->
<view class="white-bg col-a6 font-17-24 scanCodeCharging">
    <view class="p-flex">
        <view class="p-flex-center">
            <view class="p-flex-center m-r20" bindtap="selectAll" data-checkedAll="{{checkedAll}}">
                <view class="common_icon {{ checkedAll === true ? 'icon-a-100 theme' : 'icon-a-99 col-d9' }} icon-font-20 m-r20"></view>
                 <view>全选</view>
            </view>
            <view>30张</view>
        </view>
        <view class="p-flex-center">
            <view>共计：<text class="theme imb m-r20">￥98.00</text></view>
            <view class="pd-lr50 pd-tb20 radius50 theme-bg white" bindtap="toChargeByScan">开票</view>
        </view>
    </view>
</view>

</view>

2，事件

Page({
  /**
   * 页面的初始数据
   */
  data: {
    list:[
      {id:"1111",remark:'停车位',tradeTime:'2021-6-2 16:08',tradeAmt:'24.00'},
      {id:"2222",remark:'停车位',tradeTime:'2021-6-2 16:08',tradeAmt:'24.00'},
      {id:"3333",remark:'停车位',tradeTime:'2021-6-2 16:08',tradeAmt:'24.00'},
      {id:"4444",remark:'停车位',tradeTime:'2021-6-2 16:08',tradeAmt:'24.00'},
      {id:"5555",remark:'停车位',tradeTime:'2021-6-2 16:08',tradeAmt:'24.00'},
      {id:"6666",remark:'停车位',tradeTime:'2021-6-2 16:08',tradeAmt:'24.00'},
      {id:"7777",remark:'停车位',tradeTime:'2021-6-2 16:08',tradeAmt:'24.00'},
      {id:"8888",remark:'停车位',tradeTime:'2021-6-2 16:08',tradeAmt:'24.00'},
      {id:"9999",remark:'ccccc',tradeTime:'2021-6-2 16:08',tradeAmt:'66.00'},
    ], 
    checkedIds:[],  // 数据列表
    checkedAll:false  // 选中的id列表,
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }, 

  /**
   * 多选
   */
  checkboxChange(e) { 
    let id = this.data.checkedIds.indexOf(e.currentTarget.dataset.id);
    //已经选中就删除，没有就添加
    if(id > -1){  
      this.data.checkedIds.splice(id,1);
    }else{
      this.data.checkedIds.push(e.currentTarget.dataset.id);
    }
    // 全部选中就显示全选，没有就不显示
    if(this.data.checkedIds.length === this.data.list.length){
      this.setData({checkedAll:true});
    }else{
      this.setData({checkedAll:false});
    }
    this.setData({checkedIds : this.data.checkedIds});
  },

  /**
   * 全选
   */
  selectAll(e){ 
    if (e.currentTarget.dataset.checkedall === false) {
        this.setData({checkedIds:this.data.list.map(item=>item.id),checkedAll:true})
    } else { 
      // 直接清空列表
      this.setData({checkedIds:[],checkedAll:false});
    }
  }
})