这里有新鲜出炉的微信小程序入门,程序狗速度看过来!
微信小程序(weixinxiaochengxu),简称小程序,缩写 XCX,英文名 mini program,是一种不需要下载安装即可使用的应用,它实现了应用 "触手可及" 的梦想,用户扫一扫或搜一下即可打开应用。
这篇文章主要介绍了微信小程序 向左滑动删除功能的实现的相关资料, 需要的朋友可以参考下
微信小程序 向左滑动删除功能的实现
实现效果图:
实现代码:
1、wxml touch-item 元素绑定了 bindtouchstart、bindtouchmove 事件
- <view class="container">
- <view class="touch-item {{item.isTouchMove ? 'touch-move-active' : ''}}"
- data-index="{{index}}" bindtouchstart="touchstart" bindtouchmove="touchmove"
- wx:for="{{items}}" wx:key="">
- <view class="content">
- {{item.content}}
- </view>
- <view class="del" catchtap="del" data-index="{{index}}">
- 删除
- </view>
- </view>
- </view>
2、wxss flex 布局、CSS3 动画
- .touch - item {
- font - size: 14px;
- display: flex;
- justify - content: space - between;
- border - bottom: 1px solid#ccc;
- width: 100 % ;
- overflow: hidden
- }.content {
- width: 100 % ;
- padding: 10px;
- line - height: 22px;
- margin - right: 0; - webkit - transition: all 0.4s;
- transition: all 0.4s; - webkit - transform: translateX(90px);
- transform: translateX(90px);
- margin - left: -90px
- }.del {
- background - color: orangered;
- width: 90px;
- display: flex;
- flex - direction: column;
- align - items: center;
- justify - content: center;
- color: #fff; - webkit - transform: translateX(90px);
- transform: translateX(90px); - webkit - transition: all 0.4s;
- transition: all 0.4s;
- }.touch - move - active.content,
- .touch - move - active.del { - webkit - transform: translateX(0);
- transform: translateX(0);
- }
3、js 注释很详细
- var app = getApp() Page({
- data: {
- items: [],
- startX: 0,
- //开始坐标
- startY: 0
- },
- onLoad: function() {
- for (var i = 0; i < 10; i++) {
- this.data.items.push({
- content: i + " 向左滑动删除哦,向左滑动删除哦,向左滑动删除哦,向左滑动删除哦,向左滑动删除哦",
- isTouchMove: false //默认全隐藏删除
- })
- }
- this.setData({
- items: this.data.items
- })
- },
- //手指触摸动作开始 记录起点X坐标
- 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);
- },
- //删除事件
- del: function(e) {
- this.data.items.splice(e.currentTarget.dataset.index, 1) this.setData({
- items: this.data.items
- })
- }
- })
来源: http://www.phperz.com/article/17/0717/326791.html