Last active
June 28, 2017 06:38
-
-
Save SuperAL/4ffdd03f42f52cf90216bfea90171786 to your computer and use it in GitHub Desktop.
小程序：模仿微信左滑动，出现标为未读和删除按钮
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // wxml | |
| <view class="" style="position:relative;"> | |
| <scroll-view scroll-x="true" scroll-with-animation="true" style=" white-space: nowrap;" scroll-left="{{scrollLeft}}"> | |
| <view style="background: red; width: 750rpx; height: 100px; display: inline-block;" bindtouchstart="scrollStart" bindtouchend="scrollToView"></view> | |
| <view class="" catchtap="mark" style="display: inline-block;width:50px;height: 100px; opacity: 0"></view> | |
| <view class="" catchtap="delete" style="display: inline-block;width:50px;height: 100px; opacity: 0"></view> | |
| </scroll-view> | |
| <view style="background: green; width:50px; height: 100px; position: absolute; right:50px;top:0;z-index:-1;">标为未读</view> | |
| <view style="background: blue; width:50px; height: 100px; position: absolute;right:0;top:0; z-index:-1">删除</view> | |
| </view> | |
| // js | |
| Page({ | |
| data: { | |
| scrollLeft: 0, | |
| clientX: null | |
| }, | |
| mark(){ | |
| console.log('mark'); | |
| }, | |
| delete(){ | |
| console.log('delete'); | |
| }, | |
| scrollStart(e){ | |
| console.log(e); | |
| this.setData({ | |
| clientX: e.changedTouches[0].clientX | |
| }) | |
| }, | |
| scrollToView(e){ | |
| console.log('scrollToView'); | |
| console.log(e); | |
| console.log(this.data.clientX, e.changedTouches[0].clientX); | |
| if ((this.data.clientX - e.changedTouches[0].clientX) == 0) { return; } | |
| if ((this.data.clientX - e.changedTouches[0].clientX) > 0) { | |
| // 左滑 | |
| if ((this.data.clientX - e.changedTouches[0].clientX) > 50) { | |
| console.log('向左滑动'); | |
| // 向左滑动超过一半距离 | |
| this.setData({ | |
| scrollLeft: 100 | |
| }) | |
| } else { | |
| console.log('向右滑动'); | |
| this.setData({ | |
| scrollLeft: 0 | |
| }) | |
| } | |
| } else{ | |
| // 右滑 | |
| if (Math.abs((this.data.clientX - e.changedTouches[0].clientX)) > 50) { | |
| console.log('向右滑动'); | |
| // 向右滑动超过一半距离 | |
| this.setData({ | |
| scrollLeft: 0 | |
| }) | |
| } else { | |
| console.log('向左滑动'); | |
| this.setData({ | |
| scrollLeft: 100 | |
| }) | |
| } | |
| } | |
| } | |
| }) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment