微信小程序自定义弹窗内容，弹窗内容需要滚动的情况下整个页面滑动的问题解决

情景描述：

自定义弹出层内容过多，需要滚动的情况下整体页面都滑动

解决

1.整个布局用作为根节点包裹所有view，并动态绑定scroll-view的scroll-y属性

<scroll-view 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 >

<view wx:for="{{slist1}}" catchtap="onclicks1" data- 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 >

这段话要包裹在渲染内容区域的外层

overflow: scroll;height:80%;这是允许内容区域滚动

;-webkit-overflow-scrolling:auto; 这是在ios上内容区域会出现弹动，auto是手指离开屏幕滑动就停止，touch是允许弹动

bindscrolltolower=\'lower\'

使用scroll-view后页面的上拉触底就失效了，这个方法可以重新获取到触底情况