117.【微信小程序 - 01】（十一）-阿里云开发者社区

117.【微信小程序 - 01】（十一）

2023-09-24 36

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 117.【微信小程序 - 01】

6.页面事件-上拉触底事件

(1). 什么是上拉触底

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

(2).监听页面的上拉触底事件

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

当页面到达底部50px的时候，会自动触发

/**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {
  )
  },

注意: 当我们已经处于请求下一个页面的时候，不能让用户再次上拉请求。我们要设置一个限制请求的过程。

(3).配置上拉触底距离

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

7.页面事件-上拉触底案列

(1).案列实现的步骤

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

(2).获取一个随机颜色

// pages/contact/contact.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
      colorList:[]
  },
  getColors(){
    wx.request({
      url: 'https://applet-base-api-t.itheima.net/api/color', //url
      method:'GET',  // 方式
      success:(resp)=>{  // 成功回调
        console.log('随机颜色->',resp.data.data)
        this.setData({
          colorList:[...this.data.colorList,...resp.data.data]  // 把新增的数据汇总到一起，并不是替换
        })
        console.log(this.data.colorList)
      }
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    this.getColors()
  }
})

(3).渲染UI结构并美化页面效果

contact.wxml

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

contact.wxss

/* pages/contact/contact.wxss */
.num-item{
  border: 1px solid red;
  border-radius: 8rpx;
  line-height: 200rpx;
  text-align: center;
}

(4).在上拉触底时调用获取随机颜色的方法

contact.js

/**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {
    this.getColors()
  },

// pages/contact/contact.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
      colorList:[]
  },
  getColors(){
    wx.request({
      url: 'https://applet-base-api-t.itheima.net/api/color', //url
      method:'GET',  // 方式
      success:(resp)=>{  // 成功回调
        console.log('随机颜色->',resp.data)
        this.setData({
          colorList:[...this.data.colorList,...resp.data.data]  // 把新增的数据汇总到一起，并不是替换
        })
        console.log(this.data.colorList)
      }
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    this.getColors()
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
  },
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {
  },
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {
  },
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {
  },
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {
    this.getColors()
  },
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {
  }
})

(5).设置节流的操作

我们查看微信API找到微信官方提供的加载接口

这个Loading不会自动的关闭，只有我们手动关闭

基本思路: 我们只需要在调用方法的成功之前，一直处于加载的页面。然后成功的时候把加载的页面给关闭了，就是限流成功!!

// pages/contact/contact.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
      colorList:[],
      count:0
  },
  getColors(){
    // 1.这里还没有进入成功的页面。
      wx.showLoading({
        title: '正在努力加载数据中...',
        mask:true
      })
    wx.request({
      url: 'https://applet-base-api-t.itheima.net/api/color', //url
      method:'GET',  // 方式
      success:(resp)=>{  // 成功回调
        console.log('随机颜色->',resp.data)
        this.setData({
          colorList:[...this.data.colorList,...resp.data.data]  // 把新增的数据汇总到一起，并不是替换
        })
        console.log(this.data.colorList)
      },
      complete:()=>{
         // 关闭加载的操作
        wx.hideLoading()
      }
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    this.getColors()
  },
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {
    this.getColors()
  },
})

8.自定义编译模式

(1).添加自定义编译模式

如何配置自定义编译模式: 1.点击普通编译。2.点击自定义编译。3.修改参数

(2).如何删除自定义编译模式

如何删除自定义的模板