页面事件

下拉刷新 onPullDownRefresh

• 在Page顶级 top-level 中使用
• 页面重新初始化
• 部分逻辑初始化
• 真机下不能自动返回，需要显式的调用 wx.stopPullDownRefresh(Object object)
• 需要在配置文件中开启

"enablePullDownRefresh": true

onPullDownRefresh() {
    //
}

触底加载 onReachBottom

• 在Page顶级top-level中使用
• 加载更多数据，如拉取下一分页数据
• 每次触底都会触发 - 节流、懒加载
• 每次拉取的新数据，都叠加到之前的数据上
• 拉取完毕后，应停止
• 更多信息，请访问 lazyLoad、scroll滚动加载

onReachBottom() {
    //
}

分享|转发 onShareAppMessage

• 在Page顶级top-level中使用

onShareAppMessage() {
    //
}

焦点1 Focus

方案1 Solution

• 使用标记 flag：true 为下拉刷新；false 为触底加载
• 在下拉刷新中，传入 true；在触底加载中，传入 false；如果是下拉刷新，就执行停止下拉刷新效果

_load(flag) {
    wx.request({
        url: this.data.baseUrl + '/good/page?page=' + this.page + '&pageSize=' + this.pageSize,
        success: res => {
            console.log(res);
            this.setData({
                goods: [...this.data.goods, ...res.data],
                total: res.header['X-Total-Count']
            })
            //下拉刷新才执行
            if(flag){
                wx.stopPullDownRefresh()
            }
        },
        fail: err => {
            console.log(err);
        },
        complete: () => {
            console.log('log done');
        }
    })
}

方案2 Solution

• 使用函数作为参数决定是否要显式停止刷新；传入函数，则执行；否则不执行
• 本质上，和方案1并没有区别

函数声明 - 根据cb的有无决定是否执行特定操作

_load(cb) {
    //其他逻辑
    cb&cb()
}

函数执行 - 无形参 cb，正常执行

this._load()

函数执行 - 有形参 cb，执行特定操作

this._load(()=>{
    wx.stopPullDownRefresh()  
})

焦点2 Focus

• 不管是下拉刷新还是触底加载，在当前加载没有完成之前，不应该再次触发
• 节流阀初始为false
• 加载时设置节流阀为true
• 加载完毕时设置节流阀为false
• 每次加载时，先判断节流阀是否为false；为false则加载；否则返回
• 修改加载函数 - 增加静态数据isLoading；在下拉刷新和触底加载中，判断是否为真；为真返回；为假才加载

_load(flag) {
    //开始加载时，为真
    this.isLoading = true
    wx.request({
        url: this.data.baseUrl + '/good/page?page=' + this.page + '&pageSize=' + this.pageSize,
        success: res => {
            console.log(res);
            this.setData({
                goods: [...this.data.goods, ...res.data],
                total: res.header['X-Total-Count']
            })
            //下拉刷新才执行
            if(flag){
                wx.stopPullDownRefresh()
            }
        },
        fail: err => {
            console.log(err);
        },
        complete: () => {
            console.log('log done');
            //加载完毕为假
            this.isLoading = false
        }
    })
}