uni-app交流分享：原生js实现下拉刷新上拉加载，一套代码多端运行。经典APP案例，支持vue，流应用，兼容手机及PC浏览器

发布于 1周前 作者 ionicwang 来自 Uni-App

uni-app交流分享：原生js实现下拉刷新上拉加载，一套代码多端运行。经典APP案例，支持vue，流应用，兼容手机及PC浏览器

8月伊始,好东西与大家一起分享~

好久没有写东西了,这大半年都在忙公司的项目.永远也弄不完的需求; APP做好了,新的需求要把APP搬到微信端, 微信端好不容易改好了, 还要做一个版本发到PC官网; PC官网弄好了,接下来还得研究一下小程序,小程序还没整明白,新来的产品说要用vue优化一下项目

挺感谢HBuilder提供的平台,让APP大部分代码能够迁移到其他平台;省了不少功夫;

然后有些组件就不好弄了,比如双webview的下拉刷新,上拉加载; 如果涉及到菜单切换,或者要刷新父webview的情况就比较复杂了;APP一套代码,微信端也弄一套,维护起来比较麻烦;

于是抽空用原生js实现了下拉刷新上拉加载,完美运用于android,ios,兼容手机及PC主流浏览器,一套代码多端运行.支持vue,流应用,

mescroll – 精致的下拉刷新和上拉加载js框架 (JS framework for pull-refresh and pull-up-loading)

功能亮点 :

  1. 自动判断和提示列表无任何数据或无更多数据
  2. 支持监听列表滚动事件,无需手动判断处理列表的页码,时间等变量
  3. 可指定列表滚动到任何位置,附带平滑效果一键滚动到顶部或底部
  4. 可配置列表数据不满屏时,自动加载下一页
  5. 一个界面可支持多个下拉刷新,上拉加载
  6. 可临时锁定下拉刷新和上拉加载 7…

先看看

[mescroll主流APP案例:]

【仿淘宝 v6.8.0】APP的下拉刷新上拉加载

【仿京东 v6.1.0】APP的下拉刷新上拉加载

【仿贝贝 v6.0.0】APP的下拉刷新上拉加载

【仿新浪微博 v7.6.1】APP的下拉刷新上拉加载

【雅布力 v2.4.0】APP的下拉刷新上拉加载

快速入门 :

1 引用 mescroll.min.css , mescroll.min.js

2 拷贝以下布局结构:

<div id="mescroll" class="mescroll">  
       //列表内容,如:<ul>列表数据</ul> ...
</div>

3 创建MeScroll对象:

var mescroll = new MeScroll("mescroll", {  
    down: {  
        callback: downCallback //下拉刷新的回调  
    },  
    up: {  
        callback: upCallback //上拉加载回调,简写callback:function(page){upCallback(page);}  
    }  
});

4 处理回调:

//下拉刷新的回调  
function downCallback(){  
    $.ajax({  
        url: 'xxxxxx',  
        success: function(data){  
            //联网成功的回调,隐藏下拉刷新的状态;
            mescroll.endSuccess(); //无参
            //设置数据
            //setXxxx(data);//自行实现 TODO
        },  
        error: function(data){  
            //联网失败的回调,隐藏下拉刷新的状态
            mescroll.endErr();  
        }  
    });
}

//上拉加载的回调 page = {num:1, size:10}; num:当前页 从1开始, size:每页数据条数  
function upCallback(page){  
    $.ajax({  
        url: 'xxxxxx?num='+ page.num +"&amp;size="+ page.size,  
        success: function(data){  
            //联网成功的回调,隐藏下拉刷新和上拉加载的状态;
            //参数data.length:当前页的数据总数
            //mescroll会根据data.length自动判断列表如果无任何数据,则提示空,显示empty配置的内容;
            //列表如果无下一页数据,则提示无更多数据;
            //如果不传data.length,则仅隐藏下拉刷新和上拉加载的状态.例如downCallback
            mescroll.endSuccess(data.length);
            //设置列表数据
            //setListData(data);//自行实现 TODO
        },  
        error: function(data){  
            //联网失败的回调,隐藏下拉刷新和上拉加载的状态
            mescroll.endErr();
        }
    });
}

以上为mescroll最基本的用法,强烈建议您下载并查看 mescroll基础案例 , 发现mescroll更强大的功能 ~

基础案例一共5个, 每个案例3分钟, 一共花您15分钟;

这15分钟您将了解mescroll在不同情况下应如何快速配置 ~

磨刀不误砍柴工,心急吃不了热豆腐. 请静下心来体验与理解mescroll, 一定会让您事半功倍 ~

mescroll文档及案例:

8月伊始,好东西与大家一起分享,

如使用中有任何问题,可发帖提问@我; 或者发私信;

提问前最好能提供重现问题的案例~O(∩_∩)O谢谢


Harmonyos Next教程
1 回复

在uni-app中实现下拉刷新和上拉加载功能，并利用原生JavaScript来增强体验，可以确保代码在不同平台上都能流畅运行。以下是一个基本的代码示例，展示了如何在uni-app中通过Vue组件实现这些功能，同时保证代码能够在多端（如H5、小程序、App等）上运行。

1. 创建Vue组件

首先，创建一个Vue组件，例如List.vue，用于显示列表数据并实现下拉刷新和上拉加载。

<template>
  <view class="container">
    <scroll-view scroll-y="true" @scrolltolower="loadMore" @scrolltoupper="refresh" :scroll-top="scrollTop">
      <view v-for="(item, index) in list" :key="index" class="list-item">{{ item }}</view>
      <view v-if="loadingMore" class="loading">加载中...</view>
      <view v-if="noMoreData" class="no-more">没有更多数据</view>
    </scroll-view>
    <view v-if="refreshing" class="refreshing">刷新中...</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [],
      page: 1,
      refreshing: false,
      loadingMore: false,
      noMoreData: false,
      scrollTop: 0,
    };
  },
  methods: {
    async refresh() {
      this.refreshing = true;
      this.page = 1;
      this.list = [];
      this.noMoreData = false;
      // 模拟API请求
      const newData = await this.fetchData();
      this.list = newData;
      this.refreshing = false;
      this.$nextTick(() => {
        this.scrollTop = 0; // 刷新后回到顶部
      });
    },
    async loadMore() {
      if (this.loadingMore || this.noMoreData) return;
      this.loadingMore = true;
      this.page++;
      const newData = await this.fetchData();
      if (newData.length === 0) {
        this.noMoreData = true;
      } else {
        this.list = [...this.list, ...newData];
      }
      this.loadingMore = false;
    },
    fetchData() {
      // 模拟API请求，这里可以替换为实际的API调用
      return new Promise(resolve => {
        setTimeout(() => {
          const data = Array.from({ length: 10 }, (_, i) => `Item ${(this.page - 1) * 10 + i + 1}`);
          resolve(data);
        }, 1000);
      });
    },
  },
  mounted() {
    this.refresh();
  },
};
</script>

<style>
/* 添加必要的样式 */
</style>

2. 多端兼容性

uni-app已经为我们处理了大部分的多端兼容性问题。上述代码在H5、小程序、App等平台上都应该能够正常运行，前提是遵循uni-app的组件和API规范。如果遇到特定平台的兼容性问题，可以参考uni-app官方文档进行调整。

3. 总结

上述代码展示了如何在uni-app中利用Vue组件实现下拉刷新和上拉加载功能，同时保证代码能够在多端上运行。通过模拟API请求来展示数据加载过程，可以根据实际需求替换为真实的API调用。此外，样式部分可以根据具体需求进行自定义。

回到顶部