记录一下写项目时常用的小东西
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'> 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) {
},
})