侯体宗的博客
  • 首页
  • Hyperf版
  • beego仿版
  • 人生(杂谈)
  • 技术
  • 关于我
  • 更多分类
    • 文件下载
    • 文字修仙
    • 中国象棋ai
    • 群聊
    • 九宫格抽奖
    • 拼图
    • 消消乐
    • 相册

微信小程序基于movable-view实现滑动删除效果

微信(小程序)  /  管理员 发布于 5年前   597

基于movable-view实现的一种较为完美的滑动删除效果

前言:用了很多去实现滑动删除的效果,都不太尽如人意,最后用小程序官方专用滑动组件来实现,但是这个组件有一点坑,咱们慢慢道来

1、wxml布局

                         {{'滑动删除' + item.id}}                    删除            

2、wxss(这里我用的less布局,布局很重要)

page {  background-color: #efefef;} .list {  padding: 30rpx 30rpx 0;  .row {    width: 100%;    overflow: hidden;    margin-bottom: 30rpx;    .list_item {      border-radius: 12rpx;      position: relative;      left: -120rpx;      width: calc(100% + 120rpx);      height: 160rpx;      .itmem_wrap {        width: calc(100% - 120rpx);        height: 100%;        display: flex;        align-items: center;        justify-content: center;        position: relative;        left: 120rpx;        z-index: 2;        background-color: #fff;      }      .delete_wrap {        position: absolute;        right: 0;        top: 0;        width: 50%;        height: 100%;        background-color: rgb(219, 54, 54);        display: flex;        justify-content: flex-end;        z-index: 1;        .delete_btn {          width: 120rpx;          height: 100%;          display: flex;          justify-content: center;          align-items: center;          color: #fff;        }      }    }  }}

3、JavaScript

const app = getApp()Page({  data: {    list: [{        id: 1      },      {        id: 2      },      {        id: 3      },      {        id: 4      },      {        id: 5      },      {        id: 6      },      {        id: 7      },      {        id: 8      },      {        id: 9      },      {        id: 10      }    ],    startX: '',    startY: ''  },  onLoad: function () {    this.setListX();  },  // 给每一项设置x值  setListX() {    this.data.list.map(item => {      item.x = 0;    })    this.setData({      list: this.data.list    })  },  // 开始滑动  touchMoveStartHandle(e) {   // 我们要记录滑动开始的坐标点,后面计算要用到    if (e.touches.length == 1) {      this.setData({        startX: e.touches[0].clientX,        startY: e.touches[0].clientY      });    }  },  // 滑动事件处理,一次只能滑出一个删除按钮 为了防止滑动出现抖动,我们用滑动结束事件  touchMoveEndHandle: function (e) {    var currentIndex = e.currentTarget.dataset.index, //当前索引      startX = this.data.startX, //开始X坐标      startY = this.data.startY, //开始Y坐标      touchMoveEndX = e.changedTouches[0].clientX, //滑动变化X坐标      touchMoveEndY = e.changedTouches[0].clientY, //滑动变化Y坐标      //获取滑动角度      angle = this.angle({        X: startX,        Y: startY      }, {        X: touchMoveEndX,        Y: touchMoveEndY      });    //滑动超过50度角 return,防止上下滑动触发    if (Math.abs(angle) > 50) return;    this.data.list.map((item, index) => {      if (touchMoveEndX > startX) {        // 右滑        if (index == currentIndex) item.x = 0;      } else {        // 左滑        item.x = -120        if (index != currentIndex) item.x = 0;      }    })    this.setData({      list: this.data.list    })  },  /**   * 计算滑动角度   * start 起点坐标   * end 终点坐标   * Math.PI 表示一个圆的周长与直径的比例,约为 3.14159;PI就是圆周率π,PI是弧度制的π,也就是180°   */  angle: function (start, end) {    var _X = end.X - start.X,      _Y = end.Y - start.Y    return 360 * Math.atan(_Y / _X) / (2 * Math.PI);  }})

4、最终效果预览

总结

以上所述是小编给大家介绍的微信小程序基于movable-view实现滑动删除效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

您可能感兴趣的文章:

  • 微信小程序实现左滑动删除效果
  • 微信小程序实现滑动删除效果
  • 微信小程序 实现列表项滑动显示删除按钮的功能
  • 微信小程序 向左滑动删除功能的实现


  • 上一条:
    微信小程序实现页面浮动导航
    下一条:
    vue实现图片上传预览功能
  • 昵称:

    邮箱:

    0条评论 (评论内容有缓存机制,请悉知!)
    最新最热
    • 分类目录
    • 人生(杂谈)
    • 技术
    • linux
    • Java
    • php
    • 框架(架构)
    • 前端
    • ThinkPHP
    • 数据库
    • 微信(小程序)
    • Laravel
    • Redis
    • Docker
    • Go
    • swoole
    • Windows
    • Python
    • 苹果(mac/ios)
    • 相关文章
    • 微信模板消息改版后发送规则记录(微信订阅消息参数值内容限制说明)(1个评论)
    • 微信支付v3对接所需工具及命令(0个评论)
    • 2023年9月1日起:微信小程序必须备案才能上线运营(0个评论)
    • 腾讯官方客服回应了:微信好友上限约10000个!(1个评论)
    • 2023年做微信小程序的老铁注意:新增收费项、微信小程序获取手机号也收费了(2个评论)
    • 近期文章
    • 智能合约Solidity学习CryptoZombie二课:让你的僵尸猎食(0个评论)
    • 智能合约Solidity学习CryptoZombie第一课:生成一只你的僵尸(0个评论)
    • 在go中实现一个常用的先进先出的缓存淘汰算法示例代码(0个评论)
    • 在go+gin中使用"github.com/skip2/go-qrcode"实现url转二维码功能(0个评论)
    • 在go语言中使用api.geonames.org接口实现根据国际邮政编码获取地址信息功能(1个评论)
    • 在go语言中使用github.com/signintech/gopdf实现生成pdf分页文件功能(0个评论)
    • gmail发邮件报错:534 5.7.9 Application-specific password required...解决方案(0个评论)
    • 欧盟关于强迫劳动的规定的官方举报渠道及官方举报网站(0个评论)
    • 在go语言中使用github.com/signintech/gopdf实现生成pdf文件功能(0个评论)
    • Laravel从Accel获得5700万美元A轮融资(0个评论)
    • 近期评论
    • 122 在

      学历:一种延缓就业设计,生活需求下的权衡之选中评论 工作几年后,报名考研了,到现在还没认真学习备考,迷茫中。作为一名北漂互联网打工人..
    • 123 在

      Clash for Windows作者删库跑路了,github已404中评论 按理说只要你在国内,所有的流量进出都在监控范围内,不管你怎么隐藏也没用,想搞你分..
    • 原梓番博客 在

      在Laravel框架中使用模型Model分表最简单的方法中评论 好久好久都没看友情链接申请了,今天刚看,已经添加。..
    • 博主 在

      佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 @1111老铁这个不行了,可以看看近期评论的其他文章..
    • 1111 在

      佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 网站不能打开,博主百忙中能否发个APP下载链接,佛跳墙或极光..
    • 2016-10
    • 2017-10
    • 2018-01
    • 2020-03
    • 2021-06
    • 2021-10
    • 2022-03
    • 2023-02
    • 2023-06
    • 2023-07
    • 2023-08
    • 2023-10
    • 2023-11
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客