小程序实现多选删除列表数据

最新推荐文章于 2024-01-04 09:17:33 发布

唐宋元明清.

最新推荐文章于 2024-01-04 09:17:33 发布

阅读量7.6k

点赞数 1

分类专栏：微信小程序

本文链接：https://blog.csdn.net/qq_22844483/article/details/79101747

版权

本文介绍了如何在小程序中实现多选列表，并提供了一种实现多选删除功能的方法，包括JS和CSS的相关代码实现。

摘要由CSDN通过智能技术生成

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

<!-- 错题本 -->
<!-- 错题本 -->
<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>
        &