2.0 Page Event - Pull-down Refresh Event
Pull-down refresh is a proper term on the mobile side, which refers to the behavior of reloading page data by sliding your finger down on the screen.
2.1 Enable pull-down refresh
There are two ways to enable pull-down refresh:
Enable pull-down refresh globally.
In the window node of app.json, set enablePullDownRefresh to true. Enable
pull-down refresh locally
. In the .json configuration file of the page, set enablePullDownRefresh to true.
In actual development, it is recommended to use the second method for needs The page can individually enable the pull-down refresh effect.
2.2 Configure the style of the pull-down refresh window.
In the global or page .json configuration file, configure the style of the pull-down refresh window through backgroundColor and backgroundTextStyle, where:
backgroundColor is used to configure the background color of the pull-down refresh window. It only supports hexadecimal color values.
backgroundTextStyle is used to configure the pull-down refresh loading style. It only supports dark and light.
2.3 Monitor the pull-down refresh event of the page
in the .js file of the page, through The onPullDownRefresh() function can monitor the pull-down refresh event of the current page.
When triggering the pull-down refresh event of the page, if you want to reset the count value to 0, the sample code is as follows
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
this.setData({
count: 0
})
},
Stop the pull-down refresh effect.
After the pull-down refresh is processed, the pull-down refresh loading effect will always be displayed and will not disappear automatically , so you need to manually hide the pull-down refresh loading effect. At this time, calling wx.stopPullDownRefresh() can stop the pull-down refresh of the current page. The sample code is as follows
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
this.setData({
count: 0
})
// 当数据重置成功之后，调用此函数，关闭下拉刷新的效果
wx.stopPullDownRefresh()
},
2.4 Page events - pull-up and bottom events
- Pull-up bottoming is a proprietary term on the mobile side. It is the act of loading more data by sliding your finger up on the screen .
2.5 Monitor the pull-up and bottom-out events of the page
In the .js file of the page, you can listen to the pull-up and bottom event of the current page through the onReachBottom () function. The sample code is as follows:
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
console.log('触发了上拉触底的事件');
},
2.6 Configure the pull-up bottoming distance
The pull-up bottoming distance refers to the distance between the scroll bar and the bottom of the page when the pull-up bottoming event is triggered. You
can configure the pull-up touch through the onReachBottomDistance attribute in the global or page .json configuration file. bottom distance.
The default bottoming distance of the mini program is 50px. In actual development, you can modify this default value according to your own needs.
2. Waterfall flow
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)
}
})
})
})
}
3. Subpackage loading
What is subcontracting
In some cases, developers need to divide the small program into different sub-packages, package them into different sub-packages when building, and load them on demand when users use them. The content of the main package will be loaded when the mini program is accessed for the first time, and the content of the subpackage will be loaded only when the subpackage interface is accessed.
Why use subcontracting
The single package size of a mini program is limited to 2M, and can be expanded to a maximum of 20M using sub-packaging (when building a large APP)
Optimize the speed of loading the mini program for the first time. Contents that do not need to be loaded for the first time can be placed in sub-packages, which can improve the performance of the mini program (when the performance requirements are relatively high)
How to use subcontracting
Directory Structure
All subpackaged directory structures should be horizontal. (The subpackaged directory structure cannot be nested)
3.2 Configuration
Just configure it in app.json
{ "pages":[ "pages/index", "pages/logs" ], "subpackages": [ { "root": "packageA", "pages": [ "pages/cat", "pages/dog" ] }, { "root": "packageB", "name": "pack2", "pages": [ "pages/apple", "pages/banana" ] } ] }
Subcontracting restrictions
Sub-packages cannot reference each other's js
The main package cannot reference sub-packaged js
independent subcontracting
Subcontracting that does not depend on the main package
When configuring subcontracting, add the independent configuration to declare it as independent subcontracting.
independent
Subpackage preloading
When routing to a certain interface, you may need to load the content of a certain subpackage to improve the speed of accessing this subpackage.