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

微信小程序实现左滑动删除效果

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

最近做微信小程序项目遇到左滑动效果,比如在我的收藏页面,我的历史浏览记录页面,我的购物车页面,大多数都会用到这种效果,我把代码复制出来,供大家参考,用的时候直接用模板,再此基础上修改就行。

wxml中的代码:

               {{item.goods_name}}              ¥{{item.goods_price}}    ¥{{item.mktprice}}                                             删除

我这是对完接口之后的代码,循环items,然后用{{item.}}取到下面的值,并且用了一个判断,如果后台返回来的字段值marketable==‘true',让其显示商品的销售价和原价,否则显示该商品已下架。

js中的代码:

 data: {  startX: 0, //开始坐标  startY: 0 }, touchstart: function(e) { //开始触摸时 重置所有删除 this.data.items.forEach(function(v, i) {  if (v.isTouchMove) //只操作为true的  v.isTouchMove = false; }) this.setData({  startX: e.changedTouches[0].clientX,  startY: e.changedTouches[0].clientY,  items: this.data.items }) }, //滑动事件处理 touchmove: function(e) { var that = this,  index = e.currentTarget.dataset.index, //当前索引  startX = that.data.startX, //开始X坐标  startY = that.data.startY, //开始Y坐标  touchMoveX = e.changedTouches[0].clientX, //滑动变化坐标  touchMoveY = e.changedTouches[0].clientY, //滑动变化坐标  //获取滑动角度  angle = that.angle({  X: startX,  Y: startY  }, {  X: touchMoveX,  Y: touchMoveY  }); that.data.items.forEach(function(v, i) {  v.isTouchMove = false  //滑动超过30度角 return  if (Math.abs(angle) > 30) return;  if (i == index) {  if (touchMoveX > startX) //右滑   v.isTouchMove = false  else //左滑   v.isTouchMove = true  } }) //更新数据 that.setData({  items: that.data.items }) }, /** * 计算滑动角度 * @param {Object} start 起点坐标 * @param {Object} end 终点坐标 */ angle: function(start, end) { var _X = end.X - start.X,  _Y = end.Y - start.Y //返回角度 /Math.atan()返回数字的反正切值 return 360 * Math.atan(_Y / _X) / (2 * Math.PI); },

wxml中的代码:

.touch-item { background-color: #fff; margin-top: 20rpx; display: flex; justify-content: space-between; width: 100%; overflow: hidden; box-sizing: border-box;}.content { width: 100%; -webkit-transition: all 0.4s; transition: all 0.4s; -webkit-transform: translateX(180rpx); transform: translateX(180rpx); margin-left: -180rpx;}.touch-move-active .content, .touch-move-active .del { -webkit-transform: translateX(0); transform: translateX(0);}.com { padding: 25rpx; height: 210rpx;}.tp { background-color: white; float: left;}.img { width: 210rpx; height: 210rpx; display: inline-block; vertical-align: middle; border-radius: 15rpx;}.txt { width: 420rpx; margin-left: 270rpx; position: relative;}.txt .tit { font-size: 28rpx; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;}.txt .bot { width: 100%; font-size: 24rpx; margin-top: 20rpx;}.ti1 { margin-top: 15rpx; font-size: 23rpx; background-color: #fce64c; padding: 10rpx; display: inline-block;}.ti { margin-top: 35rpx; font-size: 28rpx; display: inline-block; color: #a2a2a2;}.del { background-color: red; width: 180rpx; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; -webkit-transform: translateX(180rpx); transform: translateX(180rpx); -webkit-transition: all 0.4s; transition: all 0.4s;}.new-price { font-weight: 600; color: #ff503c; font-size: 35rpx;}.old-price { margin-left: 30rpx; text-decoration: line-through; font-size: 28rpx; color: #b1b1b1;}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

您可能感兴趣的文章:

  • 微信小程序实现收货地址左滑删除
  • 微信小程序左滑删除功能开发案例详解
  • 微信小程序列表中item左滑删除功能
  • 微信小程序实现左滑修改、删除功能
  • 微信小程序 侧滑删除(左滑删除)
  • 微信小程序 向左滑动删除功能的实现
  • 微信小程序左滑删除效果的实现代码
  • 微信小程序左滑删除实现代码实例


  • 上一条:
    微信小程序文字显示换行问题
    下一条:
    微信小程序实现收货地址左滑删除
  • 昵称:

    邮箱:

    0条评论 (评论内容有缓存机制,请悉知!)
    最新最热
    • 分类目录
    • 人生(杂谈)
    • 技术
    • linux
    • Java
    • php
    • 框架(架构)
    • 前端
    • ThinkPHP
    • 数据库
    • 微信(小程序)
    • Laravel
    • Redis
    • Docker
    • Go
    • swoole
    • Windows
    • Python
    • 苹果(mac/ios)
    • 相关文章
    • 小程序开发之跳转微信直播示例api(0个评论)
    • 在uni_app中开发小程序之常用功能示例代码汇总(0个评论)
    • 小程序开发之多端框架:taro(0个评论)
    • 微信小程序前端使用七牛云官方SDK上传七牛云代码示例(0个评论)
    • 百度小程序审核未通过,真机审核存在点击返回键退出小程序...解决方式之一tabBar(0个评论)
    • 近期文章
    • 在laravel框架中的5个HTTP客户端技巧分享(0个评论)
    • 在go语言中使用FFmpeg库实现PCM音频文件编码为mp3格式文件流程步骤(0个评论)
    • gopacket免安装Pcap实现驱动层流量抓包流程步骤(0个评论)
    • 在laravel项目中实现密码强度验证功能推荐扩展包:password-strength(0个评论)
    • 在go语言中用filepath.Match()函数以通配符模式匹配字符串示例(0个评论)
    • Laravel Response Classes 响应类使用优化浅析(0个评论)
    • mysql中sql_mode的各模式浅析(0个评论)
    • 百度文心一言今天发布,个人第一批内测体验记录,不好别打我(0个评论)
    • 嘿加密世界让我们谈谈在共识中将中本聪主流化(0个评论)
    • 在go语言中寻找两个切片或数组中的相同元素/共同点/交集并集示例代码(0个评论)
    • 近期评论
    • 博主 在

      2023年国务院办公厅春节放假通知:1月21日起休7天中评论 @ xiaoB 你只管努力,剩下的叫给天意;天若有情天亦老,..
    • xiaoB 在

      2023年国务院办公厅春节放假通知:1月21日起休7天中评论 会不会春节放假后又阳一次?..
    • BUG4 在

      你翻墙过吗?国内使用vpn翻墙可能会被网警抓,你需了解的事中评论 不是吧?..
    • 博主 在

      go语言+beego框架中获取get,post请求的所有参数中评论 @ t1  直接在router.go文件中配就ok..
    • Jade 在

      如何在MySQL查询中获得当月记录中评论 Dear zongscan.com team, We can skyroc..
    • 2017-10
    • 2018-01
    • 2020-03
    • 2021-06
    • 2021-10
    • 2022-03
    • 2023-02
    Top

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

    侯体宗的博客