uni-app uniapp禁止页面下拉刷新(Android、IOS)

uniapp微信小程序系列问题

文章目录

uniapp微信小程序系列问题前言一、Android端禁止页面下拉刷新二、ios段禁止页面下拉刷新1.根据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()

推荐链接