微信小程序实现多选删除列表数据功能示例

2023-08-31 20:05:05 57

本文实例讲述了微信小程序实现多选删除列表数据功能。分享给大家供大家参考，具体如下：

实现小程序一个类似多选列表删除的功能





错题本({{list.length}})题
{{iconStatu?'取消':'编辑'}}






{{item.letter}}-
正确：{{item.nickname}}



23
错误次数





已掌握,移除错题本({{selList.length}})

//pages/wrongPage/index.js
Page({
/**
*页面的初始数据
*/
data:{
list:[
{"id":0,"letter":"Michael","statu":true,"nickname":"适北","nickname2":"路高用"},
{"id":1,"letter":"Michael","statu":false,"nickname":"统常方你","nickname2":"况土达主"},
{"id":2,"letter":"Michael","statu":true,"nickname":"国照而本","nickname2":"温量"},
{"id":3,"letter":"Michael","statu":true,"nickname":"省全广","nickname2":"正关水"},
{"id":4,"letter":"Michael","statu":false,"nickname":"十性位化","nickname2":"选低离"},
{"id":5,"letter":"Michael","statu":true,"nickname":"织起","nickname2":"叫意"},
{"id":6,"letter":"Michael","statu":true,"nickname":"已太边","nickname2":"与今压"},
{"id":7,"letter":"Michael","statu":true,"nickname":"石情声","nickname2":"马法该无"},
{"id":8,"letter":"Michael","statu":true,"nickname":"青例气","nickname2":"先素有"},
{"id":9,"letter":"Michael","statu":true,"nickname":"或少","nickname2":"无格历何"},
{"id":10,"letter":"Michael","statu":true,"nickname":"命构近九","nickname2":"几被非外"},
{"id":11,"letter":"Michael","statu":true,"nickname":"拉物采","nickname2":"价分斗"},
{"id":12,"letter":"Michael","statu":true,"nickname":"教斗适立","nickname2":"算非音"},
{"id":13,"letter":"Michael","statu":true,"nickname":"历治","nickname2":"相五"},
{"id":14,"letter":"Michael","statu":true,"nickname":"是治际","nickname2":"你表手"},
],
selColor:'#999',
selList:[],
iconStatu:false,
},
/**
*生命周期函数--监听页面加载
*/
onLoad:function(options){
letdataList=this.data.list;
dataList.map(function(value){
value.selStatu=false;
})
},
//选中
toggleSel(e){
if(this.data.iconStatu){
letselArr=this.data.selList;
letselId=e.target.dataset.id||e.currentTarget.dataset.id;
letdataList=this.data.list;
letindex=this.data.selList.indexOf(selId);
if(index<0){
selArr.push(e.target.dataset.id);
dataList.map((value)=>{
if(value.id==selId){
value.selStatu=true
}
})
}else{
dataList.map((value)=>{
if(value.id==selId){
value.selStatu=false
}
})
selArr.splice(index,1)
}
this.setData({
selList:selArr,
list:dataList
})
}
},
showSelIcon(){
this.setData({
iconStatu:!this.data.iconStatu
})
},
//删除错题
delItem(){
letarr=this.data.list;
letselArr=this.data.selList;
for(leti=0;i{
returnvalue.id!=selArr[i]
})
}
for(leti=0;i
css
@import"../../css/common.wxss";
.content{
padding:20rpx30rpx;
}
.title{
font-size:40rpx;
color:#fff;
padding-bottom:37rpx;
}
.title.editBtn{
font-size:30rpx;
}
.item{
box-sizing:border-box;
width:100%;
background-color:#464688;
border-radius:10rpx;
padding:40rpx30rpx;
margin-top:20rpx;
}
.itemicon{
margin-right:20rpx
}
.itemtext{
display:block;
font-size:28rpx;
color:#fff;
}
.item.wrongCount{
font-size:36rpx;
font-family:"PingFangSC";
color:rgb(255,216,80);
text-align:center;
}
.item.wrongText{
font-size:22rpx;
font-family:"PingFangSC";
color:rgb(100,98,173);
text-align:center;
}
.footer{
position:fixed;
bottom:0;
background-color:#fff;
width:100%;
height:100rpx;
line-height:100rpx;
text-align:center;
}
.margin-b{
margin-bottom:100rpx;
}
page{
height:100%;
display:block;
background-attachment:fixed;
background:#000;
/*min-height:100%;*/
}
/*头像*/
.head{
width:136rpx;
height:136rpx;
border-radius:50%;
border:2rpxsolid#ffbf50;
}
.hide{
display:none!important;
}
/*清除浮动*/
.clearfix:after{
content:'';
display:block;
clear:both;
visibility:hidden;
line-height:0;
height:0;
}
/*flex类名*/
/*定义*/
.flex-def{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;}
/*主轴居中*/
.flex-zCenter{-webkit-box-pack:center;-moz-justify-content:center;-webkit-justify-content:center;justify-content:center;}
/*主轴两端对齐*/
.flex-zBetween{-webkit-box-pack:justify;-moz-justify-content:space-between;-webkit-justify-content:space-between;justify-content:space-between;}
/*主轴end对齐*/
.flex-zEnd{-webkit-box-pack:end;-moz-justify-content:flex-end;-webkit-justify-content:flex-end;justify-content:flex-end;}
/*主轴start对齐*/
.flex-zStart{-webkit-box-pack:start;-moz-justify-content:start;-webkit-justify-content:start;justify-content:start;}
.flex-zSpace{justify-content:space-around}
/*侧轴居中*/
.flex-cCenter{-webkit-box-align:center;-moz-align-items:center;-webkit-align-items:center;align-items:center;}
/*侧轴start对齐*/
.flex-cStart{-webkit-box-align:start;-moz-align-items:start;-webkit-align-items:start;align-items:start;}
/*侧轴底部对齐*/
.flex-cEnd{-webkit-box-align:end;-moz-align-items:flex-end;-webkit-align-items:flex-end;align-items:flex-end;}
/*侧轴文本基线对齐*/
.flex-cBaseline{-webkit-box-align:baseline;-moz-align-items:baseline;-webkit-align-items:baseline;align-items:baseline;}
/*侧轴上下对齐并铺满*/
.flex-cStretch{-webkit-box-align:stretch;-moz-align-items:stretch;-webkit-align-items:stretch;align-items:stretch;}
/*主轴从上到下*/
.flex-zTopBottom{-webkit-box-direction:normal;-webkit-box-orient:vertical;-moz-flex-direction:column;-webkit-flex-direction:column;flex-direction:column;}
/*主轴从下到上*/
.flex-zBottomTop{-webkit-box-pack:end;-webkit-box-direction:reverse;-webkit-box-orient:vertical;-moz-flex-direction:column-reverse;-webkit-flex-direction:column-reverse;flex-direction:column-reverse;}
/*主轴从左到右*/
.flex-zLeftRight{-webkit-box-direction:normal;-webkit-box-orient:horizontal;-moz-flex-direction:row;-webkit-flex-direction:row;flex-direction:row;}
/*主轴从右到左*/
.flex-zRightLeft{-webkit-box-pack:end;-webkit-box-direction:reverse;-webkit-box-orient:horizontal;-moz-flex-direction:row-reverse;-webkit-flex-direction:row-reverse;flex-direction:row-reverse;}
/*是否允许子元素伸缩*/
.flex-item{-webkit-box-flex:1.0;-moz-flex-grow:1;-webkit-flex-grow:1;flex-grow:1;}
.flex-wrap{flex-wrap:wrap;}
/*加号*/


希望本文所述对大家微信小程序开发有所帮助。

微信小程序实现多选删除列表数据功能示例

热门推荐

随机推荐