小程序----页面事件(二)

简介: 小程序----页面事件(二)

2.3. 配置上拉触底距离

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

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

3. 上拉触底案例

3.1. 案例效果展示

3.2. 案例的实现步骤

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

3.3.

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

// pages/home/home.js
Page({
  data: {
    colorList: []
  },
  getColor() {
    wx.request({
      url: 'https://www.escook.cn/api/color',
      method: 'GET',
      success: ({ data: res })=>{
        this.setData( {
          colorList: [...this.data.colorList, ...res.data]
        } )
      }
    })
  }
})

步骤2 - 在页面加载时获取初始数据

// pages/home/home.js
Page({
  data: {
    colorList: []
  },
  getColor() {
    wx.request({
      url: 'https://www.escook.cn/api/color',
      method: 'GET',
      success: ({ data: res })=>{
        this.setData( {
          colorList: [...this.data.colorList, ...res.data]
        } )
      }
    })
  },
  onLoad() {
    this.getColor()
  }
})

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

<!--pages/home/home.wxml-->
<text>pages/home/home.wxml</text>
<view
  wx:for="{{colorList}}"
  wx:key="index"
  class="num-item"
  style="background-color: rgba({{item}});"
>
  {{item}}
</view>
/* pages/home/home.wxss */
.num-item {
  border: solid 1px black;
  height: 50px;
  margin: 5px;
}

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

// pages/home/home.js
Page({
  data: {
    colorList: []
  },
  getColor() {
    wx.request({
      url: 'https://www.escook.cn/api/color',
      method: 'GET',
      success: ({ data: res })=>{
        this.setData( {
          colorList: [...this.data.colorList, ...res.data]
        } )
      }
    })
  },
  onLoad() {
    this.getColor()
  },
  // 下拉触底
  onReachBottom() {
    this.getColor()
  }
})

步骤5 - 添加 loading 提示效果

// pages/home/home.js
Page({
  data: {
    colorList: []
  },
  getColor() {
    // loading
    wx.showLoading({
      title: '数据加载中...'
    })
    wx.request({
      url: 'https://www.escook.cn/api/color',
      method: 'GET',
      success: ({ data: res })=>{
        this.setData( {
          colorList: [...this.data.colorList, ...res.data]
        } )
      },
      // 请求完成
      complete: ()=>{
        wx.hideLoading()
      }
    })
  },
  onLoad() {
    this.getColor()
  },
  onReachBottom() {
    this.getColor()
  }
})

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

  1. 在 data 中定义 isloading 节流阀
    false 表示当前没有进行任何数据请求
    true 表示当前正在进行数据请求
  2. 在 getColors() 方法中修改 isloading 节流阀的值
    在刚调用 getColors 时将节流阀设置 true
    在网络请求的 complete 回调函数中,将节流阀重置为 false
  3. 在 onReachBottom 中判断节流阀的值,从而对数据请求进行节流控制
    如果节流阀的值为 true,则阻止当前请求
    如果节流阀的值为 false,则发起数据请求
// pages/home/home.js
Page({
  data: {
    colorList: [],
    // 节流
    isLoading: false
  },
  getColor() {
    // loading
    // 节流
    if ( this.data.isLoading ) return 
    // 节流
    this.setData( {
      isLoading: true
    } )
    wx.showLoading({
      title: '数据加载中...'
    })
    wx.request({
      url: 'https://www.escook.cn/api/color',
      method: 'GET',
      success: ({ data: res })=>{
        this.setData( {
          colorList: [...this.data.colorList, ...res.data]
        } )
      },
      // 请求完成
      complete: ()=>{
        wx.hideLoading()
        // 节流
        this.setData( {
          isLoading: false
        } )
      }
    })
  },
  onLoad() {
    this.getColor()
  },
  onReachBottom() {
    this.getColor()
  }
})

拓展


目录
打赏
0
0
0
0
16
分享
相关文章
小程序的页面如何布局?
【10月更文挑战第16天】小程序的页面如何布局?
147 1
微信小程序的目录结构及页面结构的说明
本文详细介绍了微信小程序的目录结构、页面组成部分以及项目的全局配置文件,阐述了小程序的宿主环境和运行机制,包括小程序启动和页面渲染的过程。
微信小程序的目录结构及页面结构的说明
微信小程序多种跳转页面方式
微信小程序多种跳转页面方式
小程序页面之间(传值)传递数据的方法
小程序页面之间(传值)传递数据的方法
210 63
微信小程序开发学习之页面导航(声明式导航和编程式导航)
这篇文章介绍了微信小程序中页面导航的两种方式:声明式导航和编程式导航,包括如何导航到tabBar页面、非tabBar页面、后退导航,以及如何在导航过程中传递参数和获取传递的参数。
微信小程序开发学习之页面导航(声明式导航和编程式导航)
微信小程序学习之数据绑定,事件绑定,事件传参与数据同步的学习记录
本文介绍了微信小程序中的数据绑定、事件绑定、事件传参与数据同步的基本概念和使用方法,包括如何在data对象中定义数据、使用mustache语法在wxml中渲染数据、绑定和处理事件、事件对象属性、事件传参以及实现输入框与data数据的同步。
微信小程序学习之数据绑定,事件绑定,事件传参与数据同步的学习记录
微信小程序如何将一个按钮放到页面的最底下?
微信小程序如何将一个按钮放到页面的最底下?
591 5
微信小程序页面事件,下拉刷新事件和上拉触底事件
这篇文章介绍了微信小程序中如何实现下拉刷新和上拉触底事件,包括开启下拉刷新、配置下拉刷新样式、监听下拉刷新事件,以及监听上拉触底事件和配置上拉触底的距离。
万能的微信小程序个人主页:商城系统个人主页、外卖系统个人主页、购票系统个人主页等等【全部源代码分享+页面效果展示+直接复制粘贴编译即可】
这篇文章分享了四个不同应用场景下的微信小程序个人主页的源代码和页面效果展示,包括商城系统、外卖系统、医疗挂号和电影购票系统的个人主页。提供了完整的页面布局和样式代码,允许开发者直接复制粘贴并根据自己的项目需求进行简单的改造使用。
万能的微信小程序个人主页:商城系统个人主页、外卖系统个人主页、购票系统个人主页等等【全部源代码分享+页面效果展示+直接复制粘贴编译即可】
跨端技术问题之页面或组件样式在小程序、小程序插件和小程序分包中有什么差异
跨端技术问题之页面或组件样式在小程序、小程序插件和小程序分包中有什么差异

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等