小程序之左滑删除

古城微笑少年丶 2023-08-17 17:27 106阅读 0赞

一、效果图

![1509251-20190809155943319-1953380807.png][]

二、wxml代码

<view class="page">
      <scroll-view scroll-y="{
        {isScroll}}" style='height:{
        {windowHeight}}px'>
        <block wx:key="item" wx:for="{
        {data}}">
          <view data-index='{
        {index}}' class="order-item" bindtouchstart="drawStart" bindtouchmove="drawMove" bindtouchend="drawEnd" style="right:{
        {item.right}}rpx">
            <view class="content">{
        {item.content}}</view>
            <view class="remove" bindtap="delItem">删除 </view>
          </view>
          <my-line height="4"></my-line>
        </block>
      </scroll-view>
    </view>

三、js代码

const app = getApp();
    Page({
      data: {
        delBtnWidth: 160,
        data: [{ content: "公开", right: 0 }, { content: "同事", right: 0 }, { content: "客户", right: 0 }],
        isScroll: true,
        windowHeight: 0,
      },
      onLoad: function (options) {
        var that = this;
        wx.getSystemInfo({
          success: function (res) {
            that.setData({
              windowHeight: res.windowHeight
            });
          }
        });
      },
      drawStart: function (e) {
        var touch = e.touches[0]
        for (var index in this.data.data) {
          var item = this.data.data[index]
          item.right = 0
        }
        this.setData({
          data: this.data.data,
          startX: touch.clientX,
        })
    
      },
      drawMove: function (e) {
        var touch = e.touches[0]
        var item = this.data.data[e.currentTarget.dataset.index]
        var disX = this.data.startX - touch.clientX
    
        if (disX >= 20) {
          if (disX > this.data.delBtnWidth) {
            disX = this.data.delBtnWidth
          }
          item.right = disX
          this.setData({
            isScroll: false,
            data: this.data.data
          })
        } else {
          item.right = 0
          this.setData({
            isScroll: true,
            data: this.data.data
          })
        }
      },
      drawEnd: function (e) {
        var item = this.data.data[e.currentTarget.dataset.index]
        if (item.right >= this.data.delBtnWidth / 2) {
          item.right = this.data.delBtnWidth
          this.setData({
            isScroll: true,
            data: this.data.data,
          })
        } else {
          item.right = 0
          this.setData({
            isScroll: true,
            data: this.data.data,
          })
        }
      },
      delItem: function (e) {
    
      }
    })

四、css代码

.order-item {
        
      height: 100rpx;
      width: 100%;
      display: flex;
      position: relative;
      line-height: 100rpx;
      padding: 0 30rpx;
      background: #fff;
      box-sizing: border-box;
    }
    
    .remove {
        
      width: 160rpx;
      height: 100%;
      background-color: red;
      color: white;
      position: absolute;
      top: 0;
      right: -160rpx;
      display: flex;
      justify-content: center;
      align-items: center;
    }

转载于:https://www.cnblogs.com/yang-2018/p/11327848.html

[1509251-20190809155943319-1953380807.png]: /images/20230808/35c4c2133cd444d4a57a5d8998d88695.png

发表评论取消回复

表情：

评论列表（有 0 条评论，106人围观）

还没有评论，来说两句吧...

相关阅读

相关小程序之左滑删除

一、效果图 ![1509251-20190809155943319-1953380807.png][] 二、wxml代码 <view class="page">

古城微笑少年丶/ 2023年08月17日 17:27/ 0 赞/ 107 阅读

相关小程序左滑删除

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyaWdo

野性酷女/ 2023年01月17日 07:41/ 0 赞/ 132 阅读

相关微信小程序左滑删除效果的实现

<view class="box"> <view class="item { {status ? '' :'active'}}"> <view c

心已赠人/ 2022年11月14日 14:52/ 0 赞/ 217 阅读

相关微信小程序左滑删除效果的实现

转载自：http://www.jianshu.com/p/07c4ddf8a3d3 今天我们说下微信小程序左滑删除效果的实现，现在市场上很多APP都在使用这个效果，

清疚/ 2022年07月10日 04:29/ 0 赞/ 232 阅读

相关小程序左滑删除功能

在使用wepy框架中，对左滑删除功能做解释，通过touch事件的起止，完成事件的绑定和数据刷新，来达到效果，大致代码如下： wxml `<view class="touc

灰太狼/ 2022年05月16日 12:58/ 0 赞/ 260 阅读

相关微信小程序独家秘笈之左滑删除

> 代码地址如下： > [http://www.demodashi.com/demo/14056.html][http_www.demodashi.com_demo_140

水深无声/ 2022年05月10日 00:48/ 0 赞/ 218 阅读

相关微信小程序左滑删除效果的实现

> 小编推荐：[Fundebug][]提供JS错误监控、微信小程序错误监控、微信小游戏错误监控，Node.j错误监控和Java错误监控。真的是一个很好用的错误监控费服务，众多大

柔光的暖阳◎/ 2022年04月24日 06:36/ 0 赞/ 321 阅读

相关小程序实现左滑删除功能

小程序中实现左滑删除效果预览： ![左滑删除图][20181120171151110.gif] // wxml <view class="dele

柔光的暖阳◎/ 2022年04月15日 02:48/ 0 赞/ 290 阅读

相关微信小程序左滑删除效果的实现

> 小编推荐：[Fundebug][]专注于JavaScript、微信小程序、微信小游戏，Node.js和Java实时BUG监控。真的是一个很好用的bug监控费服务，众多大佬公

你的名字/ 2022年04月02日 04:24/ 0 赞/ 358 阅读

相关小程序左滑删除的实现方法

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hh

迷南。/ 2021年12月02日 00:44/ 0 赞/ 378 阅读