019页面事件--下拉刷新事件、上拉触底

最新推荐文章于 2024-05-31 10:39:35 发布

李白的故乡

最新推荐文章于 2024-05-31 10:39:35 发布

阅读量684

点赞数 1

分类专栏：原生小程序文章标签： javascript 前端 ui

本文链接：https://blog.csdn.net/qq_45448242/article/details/126847107

版权

原生小程序专栏收录该内容

26 篇文章 0 订阅

订阅专栏

下拉刷新

什么是下拉刷新

下拉刷新是移动端的专有名词，
指的是通过手指在屏幕上的下拉滑动操作，
从而重新加载页面数据的行为。

启用下拉刷新

启用下拉刷新有两种方式：
（1）全局开启下拉刷新
在app,json的window节点中，将enablePullDownRefresh设置为true

（2）局部开启下拉刷新
在页面的.json配置文件中，将enablePullDownRefresh设置为true

{
  "usingComponents": {},
  "enablePullDownRefresh": true
}

配置下拉刷新窗口的样式

在全局或页面的.json配置文件中，
通过backgroundColor和backgroundTextStyle来配置下拉刷新窗口的样式，
其中：
	bacgroundColor用来配置下拉刷新窗口的背景颜色，仅支持16进制的颜色值
	backgroundTextStyle用来配置下拉刷新loading的样式，仅支持dark和light。

{
  "usingComponents": {},
  "enablePullDownRefresh": true,
  "backgroundColor": "#efefef",
  "backgroundTextStyle": "dark"
}

监听页面的下拉刷新事件

在页面的.js文件中，
通过onPullDownRefresh()函数即可监听当前页面的下拉刷新事件。

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {
    console.log('触发了message页面的下拉刷新')
  },

例如，
在页面的wxml中有如下的UI结构，
点击按钮可以让count值自增+1：


在触发页面的下拉刷新事件的时候，
如果要把count的值重置为0，
示例代码如下：

停止下拉刷新的效果

当处理完下拉刷新后，
下拉刷新的loading效果会一直显示，
不会主动消失，所以需要手动隐loading效果。
此时，调用wx.stopPullDownRefresh()可以停止当前页面的下拉刷新。
示例

  onPullDownRefresh() {
    console.log('触发了message页面的下拉刷新')
    this.setData({
      count: 0
    })
    wx.stopPullDownRefresh()
  },

上拉触底

什么是上拉触底

上拉触底是移动端的专有名词，
通过手指在屏幕上的上拉滑动效果，
从而加载更多数据的行为。

监听页面的上拉触底事件

在页面的.js文件中，
通过onReachBottom()函数即可监听当前页面的上拉触底事件。
示例代码如下：

节流：同一时间只允许发生一次请求，

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {
    console.log("触发了上拉触底事件")
  },

配置上拉触底距离

上拉触底距离指的是触发上拉触底事件时，
滚动条距离页面底部的距离。

可以在全局或页面的.json配置文件中，
通过onReachBottomDistance属性来配置上拉触底的距离。

小程序默认的触底距离是50px,在实际开发中，
可以根据自己的需求修改这个默认值。

{
  "usingComponents": {},
  "onReachBottomDistance": 150
}

上拉触底案例

在这里插入图片描述

案例的实现步骤

（1）定义获取随机颜色的方法
（2）在页面加载时获取初始数据
（3）渲染UI结构并美化页面效果
（4）在上拉触底时调用获取随机颜色的方法
（5）添加loading提示效果
（6）对上拉触底进行节流处理

步骤1-定义获取随机颜色的方法

  data: {
    colorList:[] //随机眼色的列表
  },

  getColors(){ //获取随机颜色的方法
    wx.request({
      url:'https://www.escook.cn/api/color',
      method:'GET',
      success:({ data: res }) => {
        console.log(res)
        this.setData({
          colorList: [...this.data.colorList, ...res.data]
        })
      }
    })
  },

步骤3-渲染UI结构并美化页面效果

<view wx:for="{{colorList}}" wx:key="index" class="num-item" 
style="background-color: rgba({{item}});">{{item}}</view>

/* pages/contact/contact.wxss */
.num-item{
  border: 1rpx solid #efefef;
  border-radius: 8rpx;
  line-height: 200rpx;
  margin: 15rpx;
  text-align: center;
  /* 阴影 */
  text-shadow: 0rpx 0rpx 5rpx #fff;
  box-shadow: 1rpx 1rpx 6rpx #aaa;
}

步骤4-上拉触底时获取随机颜色

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {
    // 调用随机获取颜色方法
    this.getColors()
  },

发起网络数据请求，请求下一页数据，跟上一页数据进行拼接

步骤5-添加loading提示效果

  getColors(){ //获取随机颜色的方法
    // 展示loading效果
    wx:wx.showLoading({
      title: '数据加载中...',
    })
    wx.request({
      url:'https://www.escook.cn/api/color',
      method:'GET',
      success:({ data: res }) => {
        console.log(res)
        this.setData({
          // 新旧数据拼接，展开运算符，把旧数据展开到数组里面，
          colorList: [...this.data.colorList, ...res.data]
        })
       wx.hideLoading()
      }
    })
  },

步骤6-对上拉触底进行节流处理

（1）在data中定义isloading节流阀
		false表示当前没有进行任何数据请求
		true表示当前正在进行数据请求
	
（2）在getColors（）方法中修改isloading节流阀的值
		在刚调用getColor时将节流阀设置true
		在网络请求的complete回调函数中，将节流阀重置为false
（3）在onReachBottom中判断节流阀的值，从而对数据进行节流控制
		如果节流阀为true，则阻止当前请求
		如果节流阀为false，则发起数据请求