uniapp 微信小程序禁止页面滚动
时间: 2023-08-26 18:05:05 浏览: 706
要禁止页面滚动,可以在页面的 `onLoad` 生命周期中调用 `wx.createSelectorQuery()` 方法获取页面中的元素节点,然后设置节点的样式 `overflow: hidden` 来禁止页面滚动。具体实现可以参考以下代码:
```javascript
onLoad: function () {
// 获取页面节点
wx.createSelectorQuery().select('#page').boundingClientRect((rect) => {
// 设置节点样式
wx.createSelectorQuery().select('#page').setStyle({
overflow: 'hidden'
}).exec()
}).exec()
}
```
在代码中,`#page` 表示页面的节点 ID,需要根据实际情况进行调整。另外,如果需要允许页面滚动,只需要将节点的样式设置为 `overflow: auto` 即可。
相关问题
uniapp微信小程序无限滚动
实现无限滚动可以通过监听scroll-view组件的scrolltolower事件,在滚动到底部时加载更多数据。以下是一个简单的示例代码:
```
<template>
<scroll-view scroll-y="true" style="height: 100vh;" @scrolltolower="loadMore">
<view v-for="(item, index) in list" :key="index">{{ item }}</view>
</scroll-view>
</template>
<script>
export default {
data() {
return {
list: [], // 列表数据
pageNo: 1, // 当前页码
pageSize: 10, // 每页数据量
isEnd: false // 数据是否已经加载完毕
};
},
mounted() {
this.loadData();
},
methods: {
// 加载数据
loadData() {
if (this.isEnd) return;
// 模拟异步加载数据
setTimeout(() => {
const data = Array.from({ length: this.pageSize }, (_, i) => `item ${i}`);
this.list = this.list.concat(data);
this.pageNo++;
if (this.pageNo > 5) {
this.isEnd = true;
}
}, 1000);
},
// 加载更多
loadMore() {
this.loadData();
}
}
};
</script>
```
在示例代码中,我们使用了一个名为list的数组来存储列表数据,然后通过loadData方法模拟异步加载数据的过程,每次加载完数据后会将数据追加到list数组中。在scroll-view组件上监听scrolltolower事件,当滚动到底部时触发loadMore方法来加载更多数据。同时,我们使用了一个isEnd标志位来表示数据是否已经加载完毕,当所有数据都已经加载完毕时,可以停止监听scrolltolower事件,避免不必要的网络请求。
uniapp微信小程序下拉刷新页面
在uniapp微信小程序中,可以使用下拉刷新组件来实现页面的下拉刷新。该组件可以通过使用小程序/uniapp原生page滑动来提高流畅度,并且可以直接使用组件方式来触发下拉刷新的方法。同时,该组件还包含了无数据时的空布局展示,并且可以根据需要自定义下拉刷新的样式。另外,使用组件的双向绑定v-model可以实现更加方便的数据处理。
然而,在使用mescroll-body并且使用v-show进行切换tabs时可能会出现一个问题,即滚动条位置一致的情况。这意味着上一页的滚动条位置会保持在下一页中。如果遇到这个问题,可以尝试使用mescroll-uni组件以及v-if的方法来解决。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [开源版发卡小程序源码 云盘发卡微信小程序源码带PC端 云盘发卡系统源码.rar](https://download.csdn.net/download/winkexin/88236712)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"]
- *2* [uni-app/小程序自定义导航栏+下拉刷新完美解决方案(封装原生page滑动组件)](https://blog.csdn.net/weixin_43931876/article/details/116293055)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"]
- *3* [【uniapp】页面下拉刷新](https://blog.csdn.net/Qxn530/article/details/127450118)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"]
[ .reference_list ]