微信小程序侧边栏滑动特效(左右滑动)(2)

this.setData({ translate: 'transform: translateX('+(this.data.newmark - this.data.startmark)+'px)' }) [javascript] view plain copy 在CODE上查看代码片派生到我的代码片 this.setData({ translate: 'transform: translateX('+(this.data.newmark - this.data.startmark)+'px)' })

这句是关键，很好理解，就是用js控制浅蓝色屏幕translateX的值，这样手势不断左右滑动，屏幕也就跟着手势慢慢滑动了。

2）弹动效果

先看效果：

拖动屏幕不足屏宽20%，还原默认状态；超过20%，滑动到最右侧~~

JS代码：

if(x < 20%){ this.setData({ translate: 'transform: translateX(0px)' }) }else{ this.setData({ translate: 'transform: translateX('+this.data.windowWidth*0.75+'px)' }) } [javascript] view plain copy 在CODE上查看代码片派生到我的代码片 if(x < 20%){ this.setData({ translate: 'transform: translateX(0px)' }) }else{ this.setData({ translate: 'transform: translateX('+this.data.windowWidth*0.75+'px)' }) }

小于20%，让translateX(0px)则屏幕还原；大于20%，tanslateX(75%)则屏幕右移到屏幕的75%处。

您可能感兴趣的文章: