チェックボックスすべて選択解除すべて選択解除
無線のデフォルトサイズを変更する
/* 单选钮样式 */
radio {
transform:scale(0.5);
}
これは死んだデータです
エフェクト画像
コード
wxml
<view class="memberList">
<view class="allSelect_box" bindtap='selectAll'>
<checkbox class="checkbox" checked="{
{selectilall}}" />
<text class="allSelect">全选</text>
</view>
<view wx:for="{
{list}}" wx:key="index">
<view class="member_box" data-index="{
{index}}" data-name="{
{item.id}}" bindtap='select'>
<checkbox class="checkbox" checked="{
{item.checked}}" />
<image src="../../img/0.1.jpg" mode="widthFix" class="avatar"></image>
<view>
<view class="applicant_name">汪小涵 <text>
管理员</text> </view>
<view class="approval_state">总监</view>
</view>
</view>
</view>
</view>
wxss
.memberList{
background:#fff;
padding:0 35rpx 0 28rpx;
}
.allSelect_box{
line-height:90rpx;
border-bottom:1rpx solid #F5F5F5;
}
.checkbox{
transform: scale(0.7,0.7);
}
.member_box .checkbox{
margin-top: 15rpx;
}
checkbox .wx-checkbox-input.wx-checkbox-input-checked {
color:#fff;
background: #6669e3;
border-color:#6669e3;
}
.allSelect{
margin-left:15rpx;
vertical-align:middle;
}
.member_box{
padding-bottom:30rpx;
display: flex;
border-bottom:2rpx solid #EBEBEB;
padding:20rpx 0 20rpx 0;
}
.avatar{
width:100rpx;
margin-left:15rpx;
}
.applicant_name{
font-size:34rpx;
padding:0 0 15rpx 30rpx;
}
.applicant_name text{
color:#fff;
background:#6669e3;
border-radius:10rpx;
margin-left:15rpx;
}
.approval_state{
color:#8D8D8D;
font-size:28rpx;
padding-left: 30rpx;
}
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
},
],
selectilall: false
},
//单选
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 num = 0;
for (var i = 0; i < this.data.list.length; i++) {
if (this.data.list[i].checked) {
num++;
}
}
if (num == this.data.list.length) {
this.setData({
selectilall: true
})
} else {
this.setData({
selectilall: false
})
}
},
//全选，取消全选
selectAll: function (e) {
let list = this.data.list;
let selectilall = this.data.selectilall;
if (selectilall == false) {
for (let i = 0; i < list.length; i++) {
let newli = 'list[' + i + '].checked';
this.setData({
[newli]: true,
selectilall: true
})
}
} else {
for (let i = 0; i < list.length; i++) {
let newli = 'list[' + i + '].checked';
this.setData({
[newli]: false,
selectilall: false
})
}
}
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
元のリンクhttps://www.jb51.net/article/178991.htm
ループデータ表示です
wxml
<view class="scroll">
<scroll-view scroll-x="true">
<checkbox-group class="table" >
<view class="tr">
<view class="th">
<checkbox value="all" bindtap="selectall" />全选
</view>
<view class="th">运号</view>
<view class="th">V号</view>
<view class="th">运商</view>
<view class="th">返单</view>
<view class="th">日期</view>
</view>
<view class="tr" wx:for="{
{listData}}" wx:key="">
<view class="td">
<checkbox value="{
{item.code}}" checked="{
{item.checked}}" />
</view>
<view class="td" value="{
{item.text}}">{
{
item.code}}</view>
<view class="td" value="{
{item.text}}">{
{
item.text}}</view>
<view class="td" value="{
{item.typ}}">{
{
item.typ}}</view>
<view class="td" value="{
{item.typ}}">{
{
item.typ}}</view>
<view class="td" value="{
{item.typ}}">{
{
item.typ}}</view>
</view>
</checkbox-group>
</scroll-view>
</view>
wxss
.table{
background-color: #fff;
border:1px solid #dadada;
width:1200rpx;
margin-left:0rpx;
}
.tr{
background-color: #dadada;
white-space: nowrap;
width:100%;
display: flex;
text-align: center;
justify-content: center;
}
.th{
background-color: #fff999;
text-align: center;
justify-content: center;
width: 100%;
border-bottom: 1px solid #dadada;
border-right: 1px solid #dadada;
}
.td{
background-color: #fff;
text-align: center;
justify-content: center;
width: 100%;
border-bottom: 1px solid #dadada;
border-right: 1px solid #dadada;
}
js
Page({
/**
* 页面的初始数据
*/
data: {
select_all: false,
listData: [{
code: "111",
text: "text1",
typ: "type1",
},
{
code: "021",
text: "text2",
typ: "type2",
},
{
code: "111",
text: "text1",
typ: "type3",
}
]
},
selectall: function () {
//全选与反全选
var that = this;
for (let i = 0; i < that.data.listData.length; i++) {
that.data.listData[i].checked = (!that.data.select_all)
}
that.setData({
listData: that.data.listData,
select_all: (!that.data.select_all)
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})