.transition-left{ transform: translateX(-750rpx); }
.transition-right{ transform: translateX(750rpx); }
.page-left{ position:absolute; z-index: 0; transition: All 0.4s ease; }
.page-right{ position:absolute; z-index: 0; transition: All 0.4s ease; }
transition-left是将一个view置于现在所显示的界面左边的css3特效,right是右边。
page-left是左边页面css,right是右边,通过 transition: All 0.4s ease; 来实现页面滑出去以及划进来的特效
我发现当将一个页面置于现在所显示的页面左边,也就是将它隐藏到左边的时候,一切正常,小程序不允许我左右滑动来滑到那个页面(当我没做js滑动切换的时候)
然而,当一个页面通过这个css置于现在显示的页面的右边的时候,此时居然能直接划过去了,相当于原本750rpx宽的页面变成了1500rpx,就算我给最外层的view添加
style="overflow-x:hidden; width:750rpx;" (超出750rpx的部分隐藏,也就是阻止页面左右滑动至空白区域);
也没有效果。
但是,PC上模拟的时候无法滑动,一切正常。只有手机上预览才会出现这个bug
这个bug挺影响实现页面左右切换特效实现的(自带swiper满足不了要求),希望微信官方能够早日解决,谢谢!
图片做了保密处理。
第一张图一开始显示的是左边页面,右边页面通过上面说的css隐藏在右边。此时可以直接左右滑动滑倒右边去。但PC上模拟无法滑动
第二张图一开始显示的是右边页面,左边页面通过css隐藏在左边,此时手机和PC上均无法滑动,是期望的正常表现
谢谢楼主,我用movableview做一个滑动效果时也遇到同样的问题
问题解决了,可以给隐藏到右边的添加position:fixed属性,这样就划不过去了