.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上均无法滑动,是期望的正常表现

展开全部
收起
2回答
提交回答
  • 至过去的我

    2044人对此回答表示赞同

    我是未来的你,你现在是不是在年找寻小程序答案。你不要感觉诧异,给你来信原因,就是让你不在后悔。今天去学习如何推广小程序,相信......点击查看更多>
    发布于
  • Maja

    17人对此回答表示赞同

    问题解决了,可以给隐藏到右边的添加position:fixed属性,这样就划不过去了

    展开
    17
    0回复
    发布于 5年前

    评论(0)

    收起评论

  • 胖宅

    8人对此回答表示赞同

    谢谢主,我用movableview做一个滑动效果时也遇到同样的问题

    展开
    8
    0回复
    发布于 5年前

    评论(0)

    收起评论

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
咨询热线

13312967497

扫码添加业务即可随时咨询 还可领取小程序推广攻略

业务咨询: 13312967497
扫码咨询

扫码咨询套餐

回到顶部