应公司需求, 做一个小程序左滑删除, 效果图:
闲话不说, 直接上代码
- 1,wxml
- <repeat for="{{dataList}}" key="index" index="index" item="item">
- <view class="items_wrap {{item.isTouchMove ?'touch-move-active':''}}" bindtouchstart="touchstart"bindtouchmove="touchmove"data-index="{{index}}"
- >
- <view class="moveItem view_flex">
- <text>15:00</text>
- <view class="data">
- <text>115/72mmHg</text>
- <image class="heart_img" src="/images/icon_redHeart.png"></image>
- </view>
- <text>70bpm</text>
- <text class="result"> 偏高 </text>
- </view>
- <view class="del-btn view_flex" catchtap="deleteFn"> 删除 </view>
- </view>
- </repeat>
- 2,wxss
- .items_wrap{
- display: flex;
- overflow: hidden;
- .moveItem{
- width: 100%;
- justify-content: space-between;
- align-items: center;
- padding: 24rpx 30rpx;
- -webkit-transition: all 0.3s;
- transition: all 0.3s;
- -webkit-transform: translateX(130rpx);
- transform: translateX(130rpx);
- margin-left: -130rpx;
- .data{
- color: #ff5252;
- .heart_img{
- width: 50rpx;
- height: 50rpx;
- margin-left: 4rpx;
- }
- }
- .result{
- color: #ff5252;
- }
- }
- .del-btn{
- background-color: orangered;
- color: #fff;
- width: 130rpx;
- padding:24rpx 0;
- justify-content: center;
- align-items: center;
- -webkit-transform: translateX(130rpx);
- transform: translateX(130rpx);
- -webkit-transition: all 0.3s;
- transition: all 0.3s;
- }
- }
- .touch-move-active .moveItem,.touch-move-active .del-btn {
- -webkit-transform: translateX(0);
- transform: translateX(0);
- }
- 3,js
- data = {
- dataList: [],
- startX: 0,
- startY: 0
- }
- methods = {
- touchstart(e) {
- this.dataList.forEach(function (v, i) {
- if (v.isTouchMove) v.isTouchMove = false;
- });
- this.startX = e.changedTouches[0].clientX;
- this.startY = e.changedTouches[0].clientY;
- this.dataList = this.dataList;
- },
- touchmove(e) {
- let that = this,
- index = e.currentTarget.dataset.index,// 当前索引
- startX = that.startX,// 开始 X 坐标
- startY = that.startY,// 开始 Y 坐标
- touchMoveX = e.changedTouches[0].clientX,// 滑动变化坐标
- touchMoveY = e.changedTouches[0].clientY,// 滑动变化坐标
- // 获取滑动角度
- angle = that.angle({ X: startX, Y: startY }, { X: touchMoveX, Y: touchMoveY });
- that.dataList.forEach(function (v, i) {
- v.isTouchMove = false
- if (Math.abs(angle)> 30) return;
- if (i == index) {
- if (touchMoveX> startX) // 右滑
- v.isTouchMove = false
- else // 左滑
- v.isTouchMove = true
- }
- })
- this.dataList = that.dataList;
- },
- deleteFn(e) {
- console.log(e);
- },
- }
- angle(start, end) {
- let _X = end.X - start.X,_Y = end.Y - start.Y
- // 返回角度 /Math.atan() 返回数字的反正切值
- return 360 * Math.atan(_Y / _X) / (2 * Math.PI);
- }
- onLoad() {
- for (let i = 0; i < 6; i++) {
- this.dataList.push({
- isTouchMove: false // 默认隐藏删除
- })
- }
- this.dataList = this.dataList;
- }
来源: http://www.qdfuns.com/article/34308/b439b6f8c33c0ccc79eb0cb7b58be59b.html