微信小程序学习-页面事件

1.下拉刷新事件

（1）什么是下拉刷新

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

（2）启用下拉刷新

        全局开启下拉刷新。在app.json的window节点中，将 enablePullDownRefresh 设置成 true

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

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

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

        backgroundColor 用来配置下拉刷新窗口的背景颜色，仅支持16进制的颜色值

        backgroundTextStyle 用来配置下拉刷新 loading 的样式，仅支持 dark 和 light

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

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

（5）停止下拉刷新的效果

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

{
  "usingComponents": {},
  "enablePullDownRefresh": true,  // 开启下拉刷新
  "backgroundColor": "#efefef",  // 页面下拉背景颜色
  "backgroundTextStyle": "dark"  // 页面下拉loading样式
}

<view>count: {{ count }}</view>
<button bindtap="increament">+1</button>

Page({
  data: {
    count: 0
  },

  increament() {
    this.setData({
      count: this.data.count + 1
    })
  },

  onPullDownRefresh() {
    this.setData({
      count: 0
    })
    wx.stopPullDownRefresh()
  },
})

2.上拉触底

（1）什么是上拉触底

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

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

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

（3）配置上拉触底距离

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

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

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

Page({
  data: {
    colorList: [],
    isLoading: false
  },

  getColorList() {
    this.setData({
      isLoading: true
    })
    wx.showLoading({
      title: '数据加载中...',
    })
    wx.request({
      url: 'https://applet-base-api-t.itheima.net/api/color',
      method: 'GET',
      success: (res) => {
        this.setData({
          colorList: [...this.data.colorList, ...res.data.data]
        })
      },
      complete: () => {
        wx.hideLoading()
        this.setData({
          isLoading: false
        })
      }
    })
  },

  onLoad(options) {
    this.getColorList()
  },
  
  onReachBottom() {
    if (!this.data.isLoading) this.getColorList()
  },
})

.color-item {
	margin: 15rpx;
	border: 1rpx solid #efefef;
	border-radius: 6rpx;
	line-height: 200rpx;
	text-align: center;
	text-shadow: 0 0 5rpx #fff;
	box-shadow: 1rpx 1rpx 6rpx #aaa;
}

3.添加编译模式

工具栏-普通编译-添加编译模式-填写页面名称/路径/参数-确定