小程序之下拉刷新

1、通过scroll-view实现

scroll-view组件,通过scroll-view自带的触发下拉刷新、上拉加载事件。在iOS下,可以正常触发,但在安卓机型下,必须先上滑一段距离再下滑,才能够触发下拉刷新事件,体验不太好。

2、通过 onPullDownRefresh实现

需要在 .json 文件中配置。(.json 文件的格式和 app.json与具体页面的.json文件的区别。) 如果配置在app.json文件中,那么整个程序都可以下拉刷新。如果写在具体页面的.json文件中,那么就是对应的页面,可以下拉刷新。

2.1 app.json中配置,这样整个小程序都可以下拉刷新,如果在某个页面不需要下拉刷新,在单个页面的.json文件中配置"enablePullDownRefresh": false就可以了

方法简单记录:

app.json中

"window": {
        "enablePullDownRefresh":true
    }

然后在单个页面会出现类似下拉卡住的情况,所以要用wx.stopPullDownRefresh();一般情况下,下拉刷新会要求重新加载数据,所以在单个页面的.js文件中写

onPullDownRefresh: function () {

        var that=this;

        wx.stopPullDownRefresh();   //一般情况下应该是下面的请求函数成功之后再写这个,为了体验感,先写在这里了
        
        that.setData({

            banner_data: [],   //这些数据需要置空一下,防止内容累计添加
            excellence_data: [],
            old_consultation_data: [],
            teacher_course_data: [],
            recommended_course_data: []

        });

        that.get_banner_data();

        that.get_excellence_data();

        that.get_old_consultation_data();

        that.get_teacher_course();

        that.get_recommended_course(app.globalData.location);

       
        
    }

猜你喜欢

转载自www.cnblogs.com/wanan-01/p/9032774.html
今日推荐