登录  /  注册

浅谈小程序中下拉刷新和上拉加载功能怎么实现?(附代码)

青灯夜游
发布: 2021-10-26 10:49:22
转载
2655人浏览过

本篇文章给大家介绍一下小程序中实现下拉刷新和上拉加载功能的方法,希望对大家有所帮助!

浅谈小程序中下拉刷新和上拉加载功能怎么实现?(附代码)

在进行列表数据展示的时候,如果数据比较多或者更新比较快,就需要提供上拉刷新和下拉加载的功能,让提升用户的体验。【相关学习推荐:小程序开发教程

下拉刷新及上拉加载wxml文件编写

当我们使用scroll-view滑动组件展示列表时,其本身就存在下拉刷新和上拉加载的触发函数

<scroll-view class="scroll" scroll-y="{{true}}" upper-threshold="50"   
bindscrolltoupper="refresh"  style="height:700px">
  <l-loadmore show="{{upfresh}}" bindscrolltolower="getMore"  type="loading" loading-text="拼命刷新中">
</l-loadmore>

<l-loadmore show="{{downfresh}}" type="loading" loading-text="拼命加载中">
</l-loadmore>
登录后复制
  • scroll-y: 是否允许纵向滚动,默认为false,这里我们设置为true
  • upper-threshold: 距顶部/左边多远时,触发 scrolltoupper 事件(下拉刷新)
  • bindscrolltoupper:滚动到顶部/左边时触发,这里设置滚动到顶部需要触发的函数
  • bindscrolltolower:滚动到顶部/右边时触发

引入line-ui框架

这里我使用的下拉刷新和上拉加载展示组件是lin-ui框架提供的,这里我说下如何引入lin-ui框架:

lin-ui官方文档地址

//在小程序项目目录中执行下面的函数
npm install lin-ui
登录后复制

然后在需要引入组件的页面的json文件中进行引入

"usingComponents": {
    "l-loadmore":"/miniprogram_npm/lin-ui/loadmore/index",
    "l-loading":"/miniprogram_npm/lin-ui/loading/index",
  },
登录后复制

这样lin-ui组件就引入成功了

js代码编写

data: {
    downfresh:false,//底部加载展示控制
    upfresh:false//顶部加载展示控制
  },
登录后复制

首先在data中设置加载组件是否显示,默认都不显示

下拉刷新js代码

//下拉刷新
refresh(){
    if(this.data.upfresh){
      console.log("还没刷新完成")
      return;
    }
    var that = this;
    this.setData({
      upfresh: true,
      // upfresh:false
    })
   
    setTimeout(function() {
      //updateData为自己的数据更新逻辑代码
      that.updateData(true,()=>{
        that.setData({
          upfresh: false,
      });
     })
      // wx.hideLoading();
    console.info(&#39;下拉刷新加载完成.&#39;);
  }, 500);
  },
    
      //更新数据
   updateData:function(tail, callback) {
  
    var that = this;
    console.log("updatedata-=-=seea"+that.data.searchValue)
    wx.request({
      url: app.gBaseUrl + &#39;compony-detail/page&#39;,
      method: &#39;GET&#39;,
      data: {
        page: 0,
        count: 20,
        componyname:that.data.searchValue
      },
      success: (res) => {
        this.setData({
          componys: res.data
        })
        if (callback) {
          callback();
        }
      }
    })
   },
登录后复制

上拉加载js代码

 /**
   * 滑动到底部加载更多
   */
  getMore(){
    // downloadingData=this.data.downloadingData
    if(this.data.downfresh){
      console.log("还没加载完成")
      return;
    }
   var that = this;
    this.setData({
      downfresh: true,
      // upfresh:false
    })
   
    this.setData({
      downloadingData: true
      // upfresh:false
    })

    setTimeout(function() {
      that.loadData(true,()=>{
        that.setData({
        downfresh: false
      });
     })
      // wx.hideLoading();
    console.info(&#39;上拉数据加载完成.&#39;);
  }, 1000);
  },
    
      loadData: function(tail, callback) {
    var that = this;
    wx.request({
      url: app.gBaseUrl + &#39;compony-detail/page&#39;,
      method: &#39;GET&#39;,
      data: {
        page: that.data.componys.length,
        count: 20,
        componyname:that.data.searchValue
      },
      success: (res) => {
        // console.log(JSON.stringify(res.data))
        that.setData({
          componys: that.data.componys.concat(res.data),
        });
        if (callback) {
          callback();
        }
      }
    })
  },
登录后复制

整个下拉刷新和上拉加载的功能我们就已经实现了,主要就是利用到了scroll-view的组件特性,根据触发的时机来控制记载组件的显隐,整体实现并不是很难,具体代码可根据自己的实际情况做适当调整哦。

更多编程相关知识,请访问:编程视频!!

以上就是浅谈小程序中下拉刷新和上拉加载功能怎么实现?(附代码)的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:掘金社区网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
最新问题
关于CSS思维导图的课件在哪? 课件
凡人来自于2024-04-16 10:10:18
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号