情景描述：
自定義彈出層內容過多，需要滾動的情況下整體頁面都滑動
解決
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后頁面的上拉觸底就失效了，這個方法可以重新獲取到觸底情況