uniapp微信小程序系列问题


前言

微信小程序解决页面禁止下拉刷新的问题,Android和IOS端分别对待


提示:以下是本篇文章正文内容,下面案例可供参考

一、Android端禁止页面下拉刷新

.json文件中----固定整个页面,禁止下拉

{
    "navigationBarTitleText": "首页",
    "usingComponents": {},
    "enablePullDownRefresh": false,
    "disableScroll": true
}

二、ios段禁止页面下拉刷新

1.根据uniapp官方文档配置

代码如下(示例):

{
    "navigationBarTitleText": "首页",
    "usingComponents": {},
    "enablePullDownRefresh": false,
    "disableScroll": true
}

如此配置后页面依旧可以下拉刷新,此配置只对Android端生效

禁止IOS端方案,在需要禁止的页面加固定定位,然后页面里面的内容在允许滚动, 可配合 scroll-view 为完成页面内容滚动

.myBtaPadding {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

三、 此处再提供两个可能用到的方法

1、获取页面可视区高度

 getClineHeight(){
     const res = uni.getSystemInfo({
           success:(res=>{
                  this.clientHeight = res.windowHeight-uni.upx2px(80)
            })
        });
     },

2、获取盒子高度

 const query = uni.createSelectorQuery().in(this)
    query
      .select('.box') // 要计算高度的盒子的类名 box
      .boundingClientRect(data => {
        this.scrollHeight = data.height - 20 + 'px'
      })
      .exec()
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐