• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

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

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

情景描述:

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

解决

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后页面的上拉触底就失效了,这个方法可以重新获取到触底情况
 
 

鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
微信小程序常用的3种提示弹窗发布时间:2022-07-18
下一篇:
小程序3种弹框方式+小程序跳转挖坑发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap