"onReachBottomDistance": 150, "enablePullDownRefresh": true, "backgroundColor": "#F8F8F8"
时间: 2023-09-12 14:11:57 浏览: 66
这段代码看起来像是在配置小程序页面的一些属性。其中:
- "onReachBottomDistance": 150,是指页面滚动到距离底部 150px 的时候触发 onReachBottom 事件。
- "enablePullDownRefresh": true,表示页面可以下拉刷新。
- "backgroundColor": "#F8F8F8",设置页面的背景颜色为 #F8F8F8。
这些属性可以根据实际需求进行配置和调整。
相关问题
uni-app中下拉刷新
在uni-app中,可以通过监听`enablePullDownRefresh`事件来实现下拉刷新功能。具体步骤如下:
1. 在对应页面的`methods`中监听`onPullDownRefresh`事件:
```javascript
onPullDownRefresh() {
// 重置关键数据
this.queryObj.pagenum = 1; // 重置页码值
this.total = 0; // 重置总数
this.isloading = false; // 重置节流阀
this.goodsList = []; // 重置商品列表信息
// 重新发起请求:请求发送成功以后传入一个回调函数,回调函数停止下拉刷新
this.getGoodsList(() => uni.stopPullDownRefresh());
}
```
2. 在项目的根目录打开`page.json`,找到对应的页面,在下面添加`enablePullDownRefresh`配置项:
```json
{
"path": "goods_list/goods_list",
"style": {
"navigationBarTitleText": "商品列表",
"enablePullDownRefresh": true, // 开启下拉刷新
"backgroundColor": "#F8F8F8",
"onReachBottomDistance": 150
}
}
```
这样就可以在uni-app中实现下拉刷新功能了。
怎么通过页面某个值来控制是否允许滚动呢
要通过页面某个值来控制是否允许滚动,可以通过监听该值的变化来动态修改 `window` 对象的 `disableScroll` 属性。具体操作步骤如下:
1. 在页面的 `data` 属性中定义一个变量,例如:
```javascript
data: {
isScrollable: false
}
```
2. 在页面的 `onLoad` 函数中获取该变量的初始值,例如:
```javascript
onLoad: function () {
// 获取初始值
this.setData({
isScrollable: false
})
}
```
3. 在页面的 `onShow` 函数中监听该变量的变化,并根据变化的值来修改 `window` 对象的 `disableScroll` 属性,例如:
```javascript
onShow: function () {
// 监听变化
this.watchIsScrollable()
},
methods: {
watchIsScrollable: function () {
const that = this
this.data.isScrollable && uni.pageScrollTo({
scrollTop: 0,
duration: 0
})
uni.nextTick(function () {
that.setData({
isScrollable: that.data.isScrollable
})
uni.setNavigationBarTitle({
title: that.data.isScrollable ? '可滚动页面' : '不可滚动页面'
})
// 根据变化的值来修改 disableScroll 属性
uni.setNavigationBarColor({
frontColor: '#ffffff',
backgroundColor: '#007AFF',
animation: {
duration: 0,
timingFunc: 'linear'
}
})
uni.setBackgroundColor({
backgroundColor: '#f8f8f8',
backgroundColorTop: '#f8f8f8',
backgroundColorBottom: '#f8f8f8',
success: function () {
uni.setCanPullDown({
canPullDown: that.data.isScrollable ? true : false
})
}
})
uni.setBackgroundTextStyle({
textStyle: that.data.isScrollable ? 'dark' : 'light'
})
uni.setTabBarStyle({
color: '#666666',
selectedColor: '#007AFF',
backgroundColor: '#ffffff',
borderStyle: 'white'
})
})
}
}
```
4. 在页面的某个事件中改变该变量的值,例如:
```javascript
toggleScrollable: function () {
// 改变变量的值
this.setData({
isScrollable: !this.data.isScrollable
})
}
```
5. 重新编译运行小程序,即可实现通过页面某个值来控制是否允许滚动的效果。
需要注意的是,该方法可以通过监听任意一个变量的变化来控制是否允许滚动,只需要将监听函数中的代码修改为根据该变量的值来修改 `disableScroll` 属性即可。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)