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

1、下拉刷新（json文件中格式要严格，否则编译出错）

全局开启下拉刷新。不推荐

在app.json的window节点中设置："enablePullDownRefresh": true

局部开启下拉刷新，推荐

在需要下拉刷新的页面json中配置："enablePullDownRefresh": true

2、配置下拉刷新窗口样式

在对应json文件中（或者全局app.json文件中）配置

"backgroundColor": "#efefef"   背景颜色，仅支持16进制

"backgroundTextStyle": "dark"   背景样式 dark 或者light 两种方式

js文件中的onPullDownRefresh事件可以监听到刷新事件

onPullDownRefresh() {

      console.log("下拉刷新了")

  },

下拉刷新完成之后，样式没有及时关闭，可在下拉刷新监听事件中加入

onPullDownRefresh() {

      console.log("下拉刷新了")

      wx.stopPullDownRefresh();  // 加载完成后停止刷新样式

  },

3、上拉触底（常用于分页）

对应页面js中函数

 onReachBottom() {

    console.log("上拉触底了")

  },

// 对应json中可以设置滚动条距离底部还有多少像素时进行刷新，默认是50px

"onReachBottomDistance": 150  // 默认单位是px，设置数值后即可

数据拼接：

在获取分页数据的时候返回的data中的数据和原有数据进行拼接

如：

data：{

        dataList:[1,2,3,4]

}

getList(){

        wx.request({

                url:"http://localhost:8080",

                method:"GET",

                success:({data:res})=>{

                        this.setData({

                                dataList:[...this.data.dataList,...res.data]

                        })

                }

        })

}

success:({data:res})=>: 将返回的数据data重命名为res

dataList:[...this.data.dataList,...res.data]： 将新数据拼接在原有数据的后边，res.data为新获取到的数据，this.data.dataList为原有数据

上拉触底节流（处理无效请求）

设置data是否加载的的变量作为是否加载数据的阈值,false,表示可以加载，true标识加载中

data:{

      loding:fals

},

getList(){

        // 更新数据为加载中状态

        this.setData({

                loding:true

        });

        // 加载提示

       wx.showLoading({“title”:"数据加载中。。。"})

        wx.request({

                url:"http://localhost:8080",

                method:"GET",

                success:({data:res})=>{

                        this.setData({

                                dataList:[...this.data.dataList,...res.data]

                        })

                },

                complete:()=>{

                        wx.hideLoading(); // 加载提示不会自动关闭，不管当前函数调用成功与否，最后都要关闭加载提示

                        

                        this.setData({

                                loding:false   // 将参数更新为false，可以再次加载

                        });

                }

        })

}

 onReachBottom() {

    // 如果数据正在加载中，直接返回，不处理请求 

    if(this.data.loding){

        return;

    }

    this.getList()；

  },

生命周期