微信小程序开发实战（下拉刷新事件应用）

@作者 : SYFStrive

 

@博客首页 : HomePage

： 微信小程序

：个人社区（欢迎大佬们加入） ：社区链接

：觉得文章不错可以点点关注 ：专栏连接

：感谢支持,学累了可以先看小段由小胖给大家带来的街舞

微信小程序（）

页面事件

下拉刷新事件

  1、什么是下拉刷新

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

  2、启用下拉刷新

启用下拉刷新有两种方式：

① 全局开启下拉刷新

• 在 app.json 的 window 节点中，将 enablePullDownRefresh 设置为 true

② 局部开启下拉刷新

• 在页面的 .json 配置文件中，将 enablePullDownRefresh 设置为 true 。

  3、配置下拉刷新窗口的样式

在全局或页面的 .json 配置文件中，通过 backgroundColor 和 backgroundTextStyle
来配置下拉刷新窗口的样式，其中注意两点 如

1. backgroundColor 用来配置下拉刷新窗口的背景颜色，仅支持16 进制的颜色值
2. backgroundTextStyle 用来配置下拉刷新 loading 的样式，仅支持 dark 和 light

  4、监听页面的下拉刷新事件

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

  5、停止下拉刷新的效果

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

上拉触底事件

  1、什么是上拉触底

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

  2、监听页面的上拉触底事件

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

  3、 配置上拉触底距离

上拉触底距离指的是触发上拉触底事件时，滚动条距离页面底部的距离。 可以在全局或页面的 .json 配置文件中，通过onReachBottomDistance 属性来配置上拉触底的距离。 小程序默认的触底距离是50px，在实际开发中，可以根据自己的需求修改这个默认值。

如

onReachBottomDistance ：150

上拉触底小练习

  1、案例效果展示

  2、案例的实现步骤

〇 模拟数据data结构

data: {
  colorList:[],
  colorArr:[
    `${parseInt(Math.random()*100)},${parseInt(Math.random()*100)},${parseInt
(Math.random()*100)}`,
    `${parseInt(Math.random()*100)},${parseInt(Math.random()*100)},${parseInt
(Math.random()*100)}`,
    `${parseInt(Math.random()*100)},${parseInt(Math.random()*100)},${parseInt
(Math.random()*100)}`,
    `${parseInt(Math.random()*100)},${parseInt(Math.random()*100)},${parseInt
(Math.random()*100)}`,
    `${parseInt(Math.random()*100)},${parseInt(Math.random()*100)},${parseInt
(Math.random()*100)}`,
    `${parseInt(Math.random()*100)},${parseInt(Math.random()*100)},${parseInt
(Math.random()*100)}`,
    `${parseInt(Math.random()*100)},${parseInt(Math.random()*100)},${parseInt
(Math.random()*100)}`,
    `${parseInt(Math.random()*100)},${parseInt(Math.random()*100)},${parseInt
(Math.random()*100)}`,
    `${parseInt(Math.random()*100)},${parseInt(Math.random()*100)},${parseInt
(Math.random()*100)}`,
    `${parseInt(Math.random()*100)},${parseInt(Math.random()*100)},${parseInt
(Math.random()*100)}`,
  ]

① 定义获取随机颜色的方法

//获取颜色数据
getColorValue(){
  this.setData({
    colorList:[...this.data.colorList,...this.data.colorArr],
  })
  // 打印数据
  console.log(this.data.colorList);
},

② 在页面加载时获取初始数据

/**
 * 生命周期函数--监听页面加载
 */
onLoad(options) {
  this.getColorValue();
},

③ WXML及WXSS & 渲染 UI 结构并美化页面效果

WXML

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

WXSS

.colorArr{
  border: 1rpx solid red;
  border-radius: 8rpx;
  line-height: 200rpx;
  margin: 15rpx;
  text-align: center;
  text-shadow: 0rpx,0rpx,5rpx,red;
  box-shadow: 3rpx,3rpx,8rpx,red;
}

④ 在上拉触底时调用获取随机颜色的方法

/**
 * 页面上拉触底事件的处理函数
 */
onReachBottom() {
  // 模拟效果
  setTimeout(()=>{
    //重新加载数据
  this.getColorValue();
  },1000)
},

⑤ 添加 loading 提示效果

/**
 * 页面上拉触底事件的处理函数
 */
onReachBottom() {
  // 显示加载效果
  wx.showLoading({
    title: '加载中...',
  })
  // 模拟效果
  setTimeout(()=>{
    // 隐藏加载效果
    wx.hideLoading({})
    //重新加载数据
  this.getColorValue();
  },1000)
},

⑥ 对上拉触底进行简单处理节流处理（这里没有使用节流阀直接使用了定时器处理了）

在 data 中定义 isloading 节流阀

1. false 表示当前没有进行任何数据请求
2. true 表示当前正在进行数据请求

在 getColors() 方法中修改 isloading 节流阀的值

1. 在刚调用 getColors 时将节流阀设置 true
2. 在网络请求的 complete 回调函数中，将节流阀重置为 false

在 onReachBottom 中判断节流阀的值，从而对数据请求进行节流控制

1. 如果节流阀的值为 true，则阻止当前请求
2. 如果节流阀的值为 false，则发起数据请求

添加编译模式

说明：添加了自定义编译模式可以一开始编译时就会自动跳到编译的页面

添加如

最后

本文到这里就结束了,大佬们的支持是我持续更新的最大动力，希望这篇文章能帮到大家

 

                 相关专栏连接

下篇文章再见ヾ(￣▽￣)Bye_Bye