情景描述：
自定义弹出层内容过多，需要滚动的情况下整体页面都滑动
解决
1.整个布局用作为根节点包裹所有view，并动态绑定scroll-view的scroll-y属性
<scroll-view style="scroll-y:{{isScroll}}" scroll-y="{{isScroll}}" bindscrolltolower='lower'>
</scroll-view>
2.样式文件中设置Page的overflow-y属性值为hidden
page{
background: #fff;
position: absolute;
font-size: 36rpx;
width: 100%;
height: 100%;
display: block;
overflow-y: hidden;
}
scroll-view {
height: 100%;
}
3.样式文件中设置scroll-view的height属性值为100%
4.打开自定义弹窗的点击事件中，更改isScroll的值为false，关闭弹窗的点击事件中，更改isScroll的值为true
<view class="sorting-list{{!isstart1?' chioce-list-hide':' chioce-list-show'}}">
<view style="overflow: scroll;height:80%;-webkit-overflow-scrolling:auto;">
<view wx:for="{{slist1}}" catchtap="onclicks1" data-id="{{item.id}}" data-index="{{index}}" class="sorting-item" hover-class="click-once" wx:key="userInfoListId" >{{item.name}}</view>
</view>
</view>
点击事件
opens1: function (e) {
console.log(e)
this.setData({
isstart: false,
isScroll:false
});
switch (e.currentTarget.dataset.item) {
case "2":
if (this.data.isstart1) {
this.setData({
isstart1: false,
isScroll:true
});
}
else {
this.setData({
isstart1: true,
isScroll:false
});
}
break;
}
},
注意事项
<view style="overflow: scroll;height:80%;-webkit-overflow-scrolling:auto;">
这段话要包裹在渲染内容区域的外层
overflow: scroll;height:80%;这是允许内容区域滚动
;-webkit-overflow-scrolling:auto; 这是在ios上内容区域会出现弹动，auto是手指离开屏幕滑动就停止，touch是允许弹动
bindscrolltolower='lower'
使用scroll-view后页面的上拉触底就失效了，这个方法可以重新获取到触底情况