微信小程序弹窗显隐动态控制页面滚动 - 新闻资讯 - 云南小程序开发|云南软件开发|云南网站建设-昆明葵宇信息科技有限公司

159-8711-8523

云南网建设/小程序开发/软件开发

知识

不管是网站,软件还是小程序,都要直接或间接能为您产生价值,我们在追求其视觉表现的同时,更侧重于功能的便捷,营销的便利,运营的高效,让网站成为营销工具,让软件能切实提升企业内部管理水平和效率。优秀的程序为后期升级提供便捷的支持!

您当前位置>首页 » 新闻资讯 » 小程序相关 >

微信小程序弹窗显隐动态控制页面滚动

发表时间:2021-1-5

发布人:葵宇科技

浏览次数:97

需求描述:点击van-dropdown-menu菜单,弹出弹窗之后页面不可滚动,点击关闭弹窗时,页面恢复可滚动。

方案一: 打开弹窗时,给页面page的style样式加上overflow: 'hidden',关闭弹窗时,去掉该样式。(存在问题: 部分IOS机型无效)

具体操作:

<!-- wxml代码 -->
<van-dropdown-menu>
	<van-dropdown-item id="orderType" bind:open="popupShow" bind:close="popupClose" value="{{ filter.orderType }}" options="{{ option1 }}" bind:change="changeFilter" data-type="orderType" />
</van-dropdown-menu>
// js代码
// 打开弹窗
  popupShow(e) {
    wx.setPageStyle({
      style: {
        overflow: 'hidden'
      }
    })
  },
 // 关闭弹窗
  popupClose(e) {
    wx.setPageStyle({
      style: {
        overflow: ''
      }
    })
  }

方案二: 打开弹窗时,给最外层view的style样式加上position: fixedheight: 100vh;overflow: hidden;,关闭弹窗时,去掉该样式。(存在问题: position: fixed执行之后,页面会滚动到顶部且依然可以页面下拉刷新)

<!-- wxml代码 -->
<view style="{{ toFixed ? 'position: fixed' : ''}}" >
</view>
// js代码
// 打开弹窗
  popupShow(e) {
    this.setData({
      toFixed: true
    })
  },
   // 关闭弹窗
  popupClose(e) {
    this.setData({
      toFixed: false
    })
  }

方案三: 最外层包裹一层scroll-view,打开或关闭弹窗时控制scroll-y。(存在问题: 未测IOS,诸君慎用)

<!-- wxml代码 -->
<scroll-view scroll-y="{{toFixed}}">
</scroll-view>
// js代码
data: {
    toFixed: true, // 默认可滚动
}
// 打开弹窗
  popupShow(e) {
    this.setData({
      toFixed: false
    })
  },
   // 关闭弹窗
  popupClose(e) {
    this.setData({
      toFixed: true
    })
  }

方案四: 将不需要滚动的元素外包裹一层view,添加catchtouchmove="return"事件,固定区域禁止滚动。(存在问题: 暂未发现)

<view catchtouchmove="return">
</view>
// 不可下拉滚动
  return (e) {
    console.log("该区域不可滚动")
  },

补充:该方法比较就简单粗暴,直接禁止滚动,不管有无弹窗,需考虑适用场景。

相关案例查看更多