小程序商品规格属性界面布局,以及存在的坑

最近做一款商城小程序,其中有个弹层展示商品属性,商品界面存在滚动条,弹层显示后,划动屏幕,会使后面的滚动条滚动,在网上查找了一些方法,基本都是一些重复的解决方案,自己试了根本没用,总结一下有以下几种:

1.给弹层加 catchtouchmove 事件的空方法,会导致弹层里面的滚动条也不会滚动,其给出的解决办法含糊不清,而且网上很多这种回答,不管用啊😢:解决小程序弹出层滚动穿透的问题 - 明明一颗大白菜 - 博客园

2.添加class控制,声称史上最简单,试了没效果😒小程序弹出层---史上最简单写法,已解决滚动穿透问题_qq_33802316的博客-CSDN博客

3.小程序社区的解决方案,不是没用,就是有缺点👋🏻:

微信小程序中遮罩层的滚动穿透问题 | 微信开放社区

还有一些其它的,比如用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,群文件源代码自取

评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

kiki·

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值