顺畅操作:教你微信小程序左滑实现更多功能
前言
当你在使用微信小程序时,是否曾经遇到过左滑操作是如此的顺畅,让你想起了 iPhone 上的滑动操作?左滑操作在微信小程序中已经成为了一个常见的交互方式,它能够帮助用户快速地执行某些操作,提高了用户的使用体验。那么,你是否好奇这个左滑操作是如何实现的呢?本文将会为你揭秘微信小程序左滑操作背后的技术原理。
实现效果:
实现思路
- 首先我们需要为容器添加
bindtouchstart
(手指触摸屏幕触发)、bindtouchmove
(手指在屏幕上滑动的时候连续触发); bindtouchstart
事件第一次触发时就是手指点击屏幕的开始,也就是起点x坐标;其中,我们需要清除左滑的所有内容,只操作isTouchMove
值为true
的;bindtouchmove
事件中开始滑动,记录开始滑动的x
、y
坐标、滑动时变化的x
、y
坐标以及滑动的角度,通过Math.abs
函数返回指定数字x
的绝对值;- 计算滑动的角度,
start
为起点坐标,end
为终点坐标,通过Math.atan()
函数返回一个数值的反正切(以弧度为单位); - 为左滑出来的内容添加点击事件操作,在js中触发点击事件
passEvent
(审核通过)、notGoEvent
(审核不通过)执行操作。
源码如下:
wxml文件
<view><!-- 判断item.isTouchMove是否为true,为true则添加leftLaterBox类名,否则就不用管。--><!-- data-index="{{index}}" 获取节点绑定数据 --><view class="leftSideBox {{item.isTouchMove ? 'leftLaterBox' : ''}}" data-index="{{index}}" bindtouchstart="touchstart" bindtouchmove="touchEvent" wx:for="{{listData}}" wx:key="index"><!-- 展示循环的listData数组的每一条数据 --><view class="txtBox"><text>{{index+1}}</text><text>{{item.itemTxt}}</text></view><!-- 操作按钮 默认不显示 --><view style="background-color: #6495ED;" class="auditBox" catchtap="passEvent" data-index="{{index}}">审核通过</view><view class="auditBox" catchtap="notGoEvent" data-index="{{index}}">审核不通过</view></view>
</view>
js文件
var app = getApp(); //获取应用实例
Page({data: {startX: 0, //开始x坐标startY: 0, //开始y坐标listData: [{itemTxt: "第一条消息",},{itemTxt: "第二条消息",},{itemTxt: "第三条消息",},{itemTxt: "第四条消息",},{itemTxt: "第五条消息",},{itemTxt: "第六条消息",},{itemTxt: "第七条消息",},{itemTxt: "第八条消息",},{itemTxt: "第九条消息",}], //模拟数据},onLoad: function () {},//手指触摸动作开始 记录起点X坐标touchstart: function (e) {//开始触摸,重置所有左滑内容this.data.listData.forEach(function (item, idx) {if (item.isTouchMove) //只操作为true的item.isTouchMove = false;})this.setData({startX: e.changedTouches[0].clientX,startY: e.changedTouches[0].clientY,listData: this.data.listData})},//滑动事件touchEvent(e) {var that = this, //防止this指向问题index = e.currentTarget.dataset.index, //当前下标startX = that.data.startX, //开始X坐标startY = that.data.startY, //开始Y坐标touchMoveX = e.changedTouches[0].clientX, //滑动变化x坐标touchMoveY = e.changedTouches[0].clientY, //滑动变化y坐标//获取滑动角度angle = that.angle({X: startX,Y: startY}, {X: touchMoveX,Y: touchMoveY});that.data.listData.forEach(function (item, idx) {item.isTouchMove = false//滑动超过30度,函数返回指定数字 x 的绝对值if (Math.abs(angle) > 30) return;if (idx == index) {if (touchMoveX > startX) //右滑item.isTouchMove = falseelse //左滑item.isTouchMove = true}})//更新数据that.setData({listData: that.data.listData})},// 计算滑动角度,start 起点坐标,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);},//审核通过事件passEvent(e) {console.log(e, "审核通过下标");// 请求接口执行操作wx.showToast({title: '审核通过',icon: 'none',duration: 800})this.setData({listData: this.data.listData})},// 审核不通过事件notGoEvent(e) {console.log(e, "审核不通过下标");// 请求接口执行操作wx.showToast({title: '审核不通过',icon: 'none',duration: 800})this.setData({listData: this.data.listData})},
})
wxss文件
.leftSideBox {/* 最外层盒子的样式 */width: 100%;overflow: hidden;display: flex;justify-content: space-between;font-size: 28rpx;border-bottom: 2rpx solid gainsboro;
}.leftLaterBox .txtBox,
.leftLaterBox .auditBox {/* 设置每一个块左滑 */-webkit-transform: translateX(0);transform: translateX(0);
}.txtBox {/* 循环的每一个块的样式 */width: 100%;padding: 30rpx 12rpx;-webkit-transition: all 0.4s;transition: all 0.4s;-webkit-transform: translateX(360rpx);transform: translateX(360rpx);margin-left: -360rpx
}.txtBox text {/* 文字样式 */padding: 0rpx 4rpx;
}.auditBox {/* 左滑出来的按钮样式 */width: 180rpx;background: rgb(243, 98, 98);color: white;display: flex;flex-direction: column;align-items: center;justify-content: center;-webkit-transform: translateX(360rpx);transform: translateX(360rpx);-webkit-transition: all 0.4s;transition: all 0.4s;
}
顺畅操作:教你微信小程序左滑实现更多功能相关推荐
- 微信小程序 界面从右边滑出_微信小程序--左滑右滑的乐趣
左滑 右滑 你不再是一个人 无论你是一个程序猿还是一个程序媛,每天干的事除了coding还是coding,代码不能解决的问题(什么问题自己心里还没点abcd数嘛),探探能帮你解决.最近网上特流行一款交 ...
- 微信小程序左滑删除效果的实现完整源码附效果图
效果图: 功能描述,小程序列表左滑删除功能的实现完整源代码实现: <view wx:for='{{friends}}' wx:key="" wx:if='{{groupTyp ...
- 微信小程序左滑删除(Slideview)
WEUI: https://wechat-miniprogram.github.io/weui/docs/slideview.html 小程序tree左滑编辑: json {"compone ...
- 微信小程序左滑删除功能(多按钮)
一.效果图 二.备注 1.图标为封装阿里云图标组件 二.代码 1.wxml <view><block wx:if="{{list.length > 0}}" ...
- 微信小程序---左滑显示删除 movable-area
movable-area 首先页面排版: <view class="act_box"><view class="product_item" w ...
- 微信小程序——收起和查看更多功能
大概的需求就是默认只显示2条,点击[查看更多]显示全部,点击[收起]还原. 实现的方法千万种.我来讲一下我的实现思路: 1.先判断列表的长度,如果小于3就不要[查看更多]这个按钮了. 2.根据索引的大 ...
- 手把手教搭建微信小程序教程
小白式手把手教搭建微信小程序教程 宝塔软件商店下载如下:php7.3 Nginx 1.20.2 MySQL 8.0.24 phpMyAdmin 5.0 搭建准备1:一台服务器(压缩包里附购买教程) ...
- 微信小程序开发难?资深大V教您微信小程序制作步骤和方法
微信小程序开发难?资深大V教您微信小程序制作步骤和方法 一.登录微信公众平台 就能在菜单"开发"---"基本配置"中看到小程序的AppID了,小程序的 Ap ...
- 【愚公系列】2022年09月 微信小程序-微信小程序实现网页一键登录功能
文章目录 前言 一.微信小程序实现网页一键登录功能 1.旧版登录方法 2.新版登录方法 二.相关第三方包源码 前言 如果微信小程序要获取微信登录的用户信息,需要拿到code去后台换取用户信息,具体步骤 ...
最新文章
- AD5933使用外部时钟获得更低的分析频率
- 导致溢出_由整数类型溢出导致的英雄联盟峡谷惨案
- 5个数组Array方法: indexOf、filter、forEach、map、reduce使用实例
- 微信公众号php从0开发,包括功能(自定义菜单,分享)
- Python 的字符编码
- arcgis导出地图分辨率多少合适_地图册制作:ArcGIS分幅制图——以深圳地铁线路图为例...
- [MicroPython]F407控制DS3231读取时间、温度
- 手机如何注册163邮箱?注册邮箱的方法步骤
- Git - IDEA中分支右侧上下箭头的含义
- 原生对象、内置对象、宿主对象的区别
- 慕课编译原理(第十章.构造优先关系表)
- win10安装wsl步骤
- 习惯于CRUD,不求上进呢?-为什么有很多程序员沉醉于舒适区
- python控制步进电机_MicroPython TPYBoard v102 驱动28BYJ-48步进电机
- Unity程序框架总结归置系列(3)——事件中心
- Matlab axis用法
- android 判断是否为系统应用
- 原生态(PHP和JAVA)研发的文锋网约车APP文锋代驾APP700个功能模块免费开源源码
- 数学分析 曲面积分与场论初步(第22章)
- 魔兽世界台服被大陆玩家挤爆