2.0 页面事件 - 下拉刷新事件
下拉刷新是移动端的专有名词，指的是通过手指在屏幕上的下拉滑动操作，从而重新加载页面数据的行为。
2.1 启用下拉刷新
启用下拉刷新有两种方式：
全局开启下拉刷新
在 app.json 的 window 节点中，将 enablePullDownRefresh 设置为 true
局部开启下拉刷新
在页面的 .json 配置文件中，将 enablePullDownRefresh 设置为 true
在实际开发中，推荐使用第 2 种方式，为需要的页面单独开启下拉刷新的效果。
2.2 配置下拉刷新窗口的样式
在全局或页面的 .json 配置文件中，通过 backgroundColor 和 backgroundTextStyle 来配置下拉刷新窗口的样式，其中：
backgroundColor 用来配置下拉刷新窗口的背景颜色，仅支持16 进制的颜色值
backgroundTextStyle 用来配置下拉刷新 loading 的样式，仅支持 dark 和 light
2.3 监听页面的下拉刷新事件
在页面的 .js 文件中，通过 onPullDownRefresh() 函数即可监听当前页面的下拉刷新事件。
在触发页面的下拉刷新事件的时候，如果要把 count 的值重置为 0，示例代码如下
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
this.setData({
count: 0
})
},
停止下拉刷新的效果
当处理完下拉刷新后，下拉刷新的 loading 效果会一直显示，不会主动消失，所以需要手动隐藏下拉刷新的loading 效果。此时，调用 wx.stopPullDownRefresh() 可以停止当前页面的下拉刷新。示例代码如下
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
this.setData({
count: 0
})
// 当数据重置成功之后，调用此函数，关闭下拉刷新的效果
wx.stopPullDownRefresh()
},
2.4 页面事件 - 上拉触底事件
- 上拉触底是移动端的专有名词，通过手指在屏幕上的上拉滑动操作，从而加载更多数据的行为。
2.5 监听页面的上拉触底事件
在页面的 .js 文件中，通过 onReachBottom() 函数即可监听当前页面的上拉触底事件。示例代码如下：
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
console.log('触发了上拉触底的事件');
},
2.6 配置上拉触底距离
上拉触底距离指的是触发上拉触底事件时，滚动条距离页面底部的距离
可以在全局或页面的 .json 配置文件中，通过 onReachBottomDistance 属性来配置上拉触底的距离。
小程序默认的触底距离是 50px，在实际开发中，可以根据自己的需求修改这个默认值。
二.瀑布流
onLoad: function (options) {
//调用瀑布流布局
this.getlist ()
},
//调用函数
async getlist () {
for(let i = 0;i<this.data.list.length;i++){
await this.getBoxHeight ().then(res => {
if(res == 0){
this.data.leftList.push(this.data.list[i])
}else{
this.data.rightList.push(this.data.list[i])
}
this.setData({
leftList: this.data.leftList,
rightList: this.data.rightList
})
// console.log(this.data.leftList,this.data.rightList);
})
}
},
getBoxHeight () { //获取左右两边高度
return new Promise((resolve, reject) => {
query = wx.createSelectorQuery();
query.select('#left').boundingClientRect();
query.exec((res) => {
// console.log(res);
//这里要重新实例化对象，否则可能出现两侧高度一直相等的情况
query = wx.createSelectorQuery();
query.select('#right').boundingClientRect();
query.exec((restwo) => {
// console.log(restwo);
if(res[0].height <= restwo[0].height){
resolve(0)
}else{
resolve(1)
}
})
})
})
}
三.分包加载
什么是分包
某些情况下，开发者需要将小程序划分成不同的子包，在构建时打包成不同的分包，用户在使用时按需进行加载。首次访问小程序的时候会加载主包的内容，只有在访问到分包界面的时候，才会去加载分包的内容。
为什么要使用分包
小程序单包大小限制为2M，使用分包最大可以扩展到20M（构建大型APP的时候）
优化首次加载小程序的速度，可以把不需要首次加载的内容放在分包里，可以提升小程序的使用性能（对性能要求比较高的时候）
如何使用分包
目录结构
所有分包的目录结构应该都是平级的。（分包的目录结构不能嵌套）
3.2 配置
只需要在app.json中配置即可
{ "pages":[ "pages/index", "pages/logs" ], "subpackages": [ { "root": "packageA", "pages": [ "pages/cat", "pages/dog" ] }, { "root": "packageB", "name": "pack2", "pages": [ "pages/apple", "pages/banana" ] } ] }
分包的限制
分包之间不能相互引用js
主包不能引用分包的js
独立分包
不依赖主包的分包
配置分包的时候加上independent的配置即可声明为独立分包
independent
分包预加载
在路由到某个界面的时候，可以需要加载某个分包的内容，以提升访问这个分包的速度。