微信小程序实现多选删除列表数据功能示例-创新互联

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

创新互联建站是专业的雨山网站建设公司，雨山接单;提供成都网站设计、网站建设,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行雨山网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!

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

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

文章标题：微信小程序实现多选删除列表数据功能示例-创新互联
URL链接：https://www.cdcxhl.com/article48/hhghp.html

成都网站建设公司_创新互联，为您提供网站设计公司、自适应网站、小程序开发、ChatGPT、用户体验、手机网站建设

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联