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).如何删除自定义编译模式
如何删除自定义的模板
