微信小程序下拉刷新和上拉加载

小程序中想要实现下拉刷新还是很方便的,官方文档给了API。但是如何使用并没有找到详细用法,有事找度娘,在这里记录下。

想要实现下拉刷新或上拉加载,首先最重要的一点就是设置app.json或者某页面.json、将enablePullDownRefresh 这个属性设置为true。

app.json和某页面.json的区别:

app.json:是全局型的下拉刷新

某页面.json :是单个页面的下拉刷新

app.json设置
某页面.json设置

设置完之后,就是监听下拉刷新或者上拉加载了

下拉刷新:onPullDownRefresh(){ }

在js里:

这里先模拟加载,添加了一个定时器

效果图:

注:默认刷新动画的背景颜色是白色,所以会看不到下面的三点。加一个背景颜色就好了。

//下拉刷新

  onPullDownRefresh() {

    console.log('--------下拉刷新-------')

    wx.showNavigationBarLoading() //在标题栏中显示加载

    wx.showLoading({

       title: '努力加载中',

    })

    //模拟加载

    setTimeout(function () {

    // complete

      wx.hideNavigationBarLoading() //完成停止加载

      wx.stopPullDownRefresh() //停止下拉刷新

     //隐藏加载框

      wx.hideLoading();

    }, 1500);

  },

上拉加载:onReachBottom(){ }




。。。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容