小程序前端反选全选

记录一下写项目时常用的小东西

wxml

<view class='convenci-bot'>
  <view class='convenci-bot-right' bindtap='selecAll'>
    <text>{{isSelecAll?'反选':'全选'}}</text>
  </view>
</view>
<!--列表-->
<view class='convencibox-item' wx:for='{{convArr}}' wx:for-index='zindex' data-idx='{{zindex}}' bindtap='chooseIt'>
  <view class='convencibox-item-bot'>
    <view wx:if='{{!item.isclick}}' class='convencibox-item-bot-icon'></view>
    <view wx:if='{{item.isclick}}' class='convencibox-item-bot-icon1'>
      <image src='../../static/public1/click.png'></image>
    </view>
    <view class='convencibox-item-bot-info'>
      <view class='convencibox-item-bot-name'>
        <text>{{item.name}}</text>
        <text decode='true'>&nbsp;&nbsp;&nbsp;&nbsp;13000000000</text>
      </view>
    </view>
  </view>
</view>

wxss

/* page/convenience/convenience.wxss */
page{
  background: #f2f2f2;
  padding-bottom: 180rpx;
}
.convenci-bot{
  height: 70rpx;
  border-bottom: 1rpx solid #e8e8e8;
  display: flex;
  box-sizing: border-box;
  padding-left: 30rpx;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 5;
  background: white;
  font-size: 28rpx;
}
/*列表*/
.convencibox-item{
  width: 100%;
  box-sizing: border-box;
  background: white;
}
.convencibox-item-bot{
  box-sizing: border-box;
 position: relative;
 padding-left: 80rpx;
 padding-bottom: 20rpx;
 
}
.convencibox-item-bot-icon{
  position: absolute;
  left: 30rpx;
  top: 20rpx;
  border-radius: 50%;
  border: 1rpx solid #999999;
  width: 34rpx;
  height: 34rpx;
}
.convencibox-item-bot-icon1{
  position: absolute;
  left: 30rpx;
  top: 20rpx;
  border-radius: 50%;
  background: #0d6508;
  width: 34rpx;
  height: 34rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
.convencibox-item-bot-icon1 image{
  width: 30rpx;
  height: 30rpx;
}
.convencibox-item-bot-info{
  display: flex;
  flex-direction: column;
  border-bottom: 1rpx solid #e8e8e8;
  padding-bottom: 20rpx;
}
.convencibox-item-bot-name{
  margin-top: 20rpx;
  font-size: 28rpx;
  color: #333333;
}

js

// page/convenience/convenience.js
var app = getApp();

Page({
  //全选
  selecAll: function() {
    var convArr = this.data.convArr
    if (this.data.isSelecAll == false) {
      for (var i = 0; i < convArr.length; i++) {
        convArr[i].isclick = true
      }
      this.setData({
        convArr: convArr,
        isSelecAll: true,
        openAll: false,
      })
    } else {
      for (var i = 0; i < convArr.length; i++) {
        convArr[i].isclick = false
      }
      this.setData({
        convArr: convArr,
        isSelecAll: false,
        openAll: false
      })
    }
  },
  //点击
  chooseIt: function(res) {
    var idx = res.currentTarget.dataset.idx
    var convArr = this.data.convArr
    var times = 0
    for (var i = 0; i < convArr.length; i++) {
      if (i == idx) {
        if (convArr[i].isclick != true) {
          convArr[i].isclick = true
        } else {
          convArr[i].isclick = false
        }
      }
    }
    this.setData({
      convArr: convArr,
      openAll: false
    })
    for (var j = 0; j < convArr.length; j++) {
      if (convArr[j].isclick == true) {
        times++
      }
    }
    if (times == 0) {
      this.setData({
        isSelecAll: false
      })
    }
  },
  /**
   * 页面的初始数据
   */
  data: {
    isSelecAll: false,
    convArr: [{
        name: "张三",
      },
      {
        name: "张三",
      },
      {
        name: "张三",
      },
    ]
  },

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

})