微信小程序實現多選刪除列表數據功能示例
本文實例講述了微信小程序實現多選刪除列表數據功能。分享給大家供大家參考，具體如下：
讓客戶滿意是我們工作的目標，不斷超越客戶的期望值來自于我們對這個行業的熱愛。我們立志把好的技術通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領域值得信任、有價值的長期合作伙伴，公司提供的服務項目有：域名申請、雅安服務器托管、營銷軟件、網站建設、武威網站維護、網站推廣。
實現小程序一個類似多選列表刪除的功能
<!-- 錯題本 -->
<view class="contarner">
<view class="content">
<view class="title flex-def flex-cCenter flex-zBetween">
<view>錯題本(<text>{{list.length}}</text>)題</view>
<view class="editBtn" bindtap="showSelIcon">{{iconStatu?'取消':'編輯'}}</view>
</view>
<view class="{{iconStatu?'margin-b':''}}">
<view bindtap="toggleSel" class="item flex-def flex-cCenter flex-zBetween" wx:for="{{list}}" wx:key="{{index}}" data-id='{{item.id}}'>
<view class="flex-def flex-cCenter flex-zBetween" data-id='{{item.id}}'>
<icon wx:if="{{iconStatu}}" type="success" size="20" color="{{item.selStatu?'#0f0':'#999'}}" data-id='{{item.id}}' />
<view data-id='{{item.id}}'>
<text data-id='{{item.id}}'>{{item.letter}}-</text>
<text data-id='{{item.id}}'>正確：{{item.nickname}}</text>
</view>
</view>
<view data-id='{{item.id}}'>
<text class="wrongCount" data-id='{{item.id}}'>23</text>
<text class="wrongText" data-id='{{item.id}}'>錯誤次數</text>
</view>
</view>
</view>
</view>
<view class="footer" wx:if="{{iconStatu}}" bindtap="delItem">
已掌握,移除錯題本({{selList.length}})
</view>
</view>
js
// 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) {
let dataList = this.data.list;
dataList.map(function (value) {
value.selStatu = false;
})
},
// 選中
toggleSel(e) {
if (this.data.iconStatu) {
let selArr = this.data.selList;
let selId = e.target.dataset.id || e.currentTarget.dataset.id;
let dataList = this.data.list;
let index = 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() {
let arr = this.data.list;
let selArr = this.data.selList;
for (let i = 0; i < selArr.length; i++) {
arr = arr.filter((value,index) => {
return value.id != selArr[i]
})
}
for (let i = 0; i < arr.length; i++) {
arr[i].selStatu = false
}
this.setData({
list: arr,
selList: [],
})
}
})
css
@import "../../css/common.wxss";
.content {
padding: 20rpx 30rpx;
}
.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: 40rpx 30rpx;
margin-top: 20rpx;
}
.item icon {
margin-right: 20rpx
}
.item text {
display: block;
font-size: 28rpx;
color: #fff;
}
.item .wrongCount {
font-size: 36rpx;
font-family: "PingFang SC";
color: rgb(255, 216, 80);
text-align: center;
}
.item .wrongText {
font-size: 22rpx;
font-family: "PingFang SC";
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: 2rpx solid #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; }
/* 加號 */
希望本文所述對大家微信小程序開發有所幫助。
分享題目：微信小程序實現多選刪除列表數據功能示例
文章位置：http://vcdvsql.cn/article16/jheggg.html
成都網站建設公司_創新互聯，為您提供網站設計公司、App設計、營銷型網站建設、ChatGPT、品牌網站建設、網站維護
聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯
- 怎么判定關鍵詞優化的時間？ 2023-04-12
- 成都網站優化長尾關鍵詞優化技巧 2022-11-01
- seo關鍵詞優化 網站關鍵詞挖掘途徑有哪些 2023-04-13
- 關鍵詞優化多長時間可以做到首頁？ 2021-08-09
- 網站關鍵詞優化需要具備哪些條件？ 2021-09-10
- seo關鍵詞優化技巧 什么是長尾關鍵詞優化 2023-04-11
- 專業的網站優化人員，應該會使用的基本關鍵詞優化工具有哪些 2021-10-14
- 關鍵詞優化怎么做排名才會更好 2013-08-16
- 網站SEO優化面試題看看你會怎么做？ 2023-01-12
- 網頁關鍵詞優化小竅門 2021-09-25
- 嘉定馬陸網站推廣在關鍵詞優化上尤其重要 2020-12-05
- SEO整站優化與關鍵詞優化之間到底有什么區別 2023-04-29