最近做一款商城小程序,其中有个弹层展示商品属性,商品界面存在滚动条,弹层显示后,划动屏幕,会使后面的滚动条滚动,在网上查找了一些方法,基本都是一些重复的解决方案,自己试了根本没用,总结一下有以下几种:
1.给弹层加 catchtouchmove 事件的空方法,会导致弹层里面的滚动条也不会滚动,其给出的解决办法含糊不清,而且网上很多这种回答,不管用啊:https://www.cnblogs.com/mmykdbc/p/9035418.html
2.添加class控制,声称史上最简单,试了没效果:https://blog.csdn.net/qq_33802316/article/details/77506171
3.小程序社区的解决方案,不是没用,就是有缺点:https://developers.weixin.qq.com/blogdetail?action=get_post_info&lang=zh_CN&token=&docid=d615c9a8957a00225ae66b65a8c2bd01
还有一些其它的,比如用scroll-y控制滚动条,单独使用这个是没用的,下面的方法会使用到这个属性。
感觉小程序的有些功能还是不够成熟,解决方案不完善。
下面是我的解决方案:
1.设置wxml最外层scroll-view或view的style:
<scroll-view style='height:{{scrollHeight}};overflow:hidden;margin-bottom:100rpx;'>
overflow:hidden这个必须加,不然没效果
2.点击购物车弹出属性界面,通过wx.getSystemInfo获取设备信息,最后用this.setData进行修改scrollHeight
//打开底部弹层
openPop: function () { let _this = this; wx.getSystemInfo({ success: function (res) { let data = res.screenHeight 'rpx'; _this.setData({ scrollHeight: data
});},})
//其它逻辑代码
},
3.打开弹层修改了外部容器的高度,关闭弹层就应该还原,重新设置scrollHeight即可:
//关闭底部弹层
closePop: function () {
this.setData({ openAttr: false, noScrollHeight:'100%', });
},
4.另外,弹出层的滚动区域scroll-view ,需要设置scroll-y,小程序默认其为false,滚动条不显示(之前没设置,花了不少时间找原因),但是只要设置就为true:
<scroll-view class="spec-con" scroll-y='true'>
我的样式这样的:
.spec-con { width: 100%; height: 65%;
}
点击加入群聊【小程序/前端交流】,一起学习交流:663077768
贴一点布局代码和效果图,