精华内容
下载资源
问答
  • uniapp实现上拉刷新,下拉加载
    千次阅读
    2020-06-04 16:36:43

    上拉刷新,下拉加载这个功能实际上在我们的应用当中使用范围是很广的,比如说商城中心在展示商品的时候就可以使用下拉加载这样的功能,那么如何实现呢?

    首先遇到这个功能我就去搜插件市场了。经过我下载了不少的插件,我发现了一个非常不错的插件。
    插件地址:
    https://ext.dcloud.net.cn/plugin?id=343
    官网地址:
    http://www.mescroll.com/uni.html#load
    这个官网里面的示例和讲解是非常清楚的,通过示例我们可以照着实现这个功能。

    刷新的示例代码:
    在这里插入图片描述

    在项目中使用:

    // An highlighted block
    template部分:
    <!-- top="xxx"下拉布局往下偏移,防止被悬浮菜单遮住 -->
    		<mescroll-uni top="120" :down="downOption" @down="downCallback" :up="upOption" @up="upCallback" @emptyclick="emptyClick" @init="mescrollInit">
    			<!-- 数据列表 -->
    			<pd-list :list="pdList"></pd-list>
    		</mescroll-uni>
    script部分:
        import MescrollUni from "@/components/mescroll-uni/mescroll-uni.vue";
    	import PdList from "@/components/other/pd-list.vue";
    	import mockData from "@/common/pdlist.js"; // 模拟数据
    	
    	export default {
    		components: {
    			MescrollUni,
    			PdList
    		},
    		data() {
    			return {
    				mescroll: null, //mescroll实例对象
    				downOption:{
    					auto:false, // 不自动加载
    				},
    				upOption:{
    					auto:false, // 不自动加载
    					// page: {
    					// 	num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
    					// 	size: 10 // 每页数据的数量
    					// },
    					noMoreSize: 4, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
    					empty:{
    						tip: '~ 空空如也 ~', // 提示
    						btnText: '去看看'
    					}
    				},
    				pdList: [], //列表数据
    				isInit: false, // 列表是否已经初始化
    				scrollY: 0
    			}
    		},
    		props:{
    			i: Number, // 每个tab页的专属下标
    			index: { // 当前tab的下标
    				type: Number,
    				default(){
    					return 0
    				}
    			}
    		},
    		watch:{
    			// 监听下标的变化
    			index(val){
    				if (this.i === val && !this.isInit) {
    					this.isInit = true; // 标记为true
    					this.mescroll.triggerDownScroll();
    				}
    			}
    		},
    		mounted() {
    			// 第一个tab,自动加载数据
    			if(this.i === 0){
    				this.isInit = true; // 标记为true
    				this.mescroll.triggerDownScroll();
    			}
    		},
    		methods: {
    			// mescroll组件初始化的回调,可获取到mescroll对象
    			mescrollInit(mescroll) {
    				this.mescroll = mescroll;
    			},
    			/*下拉刷新的回调 */
    			downCallback(mescroll) {
    				// 这里加载你想下拉刷新的数据, 比如刷新轮播数据
    				// loadSwiper();
    				// 下拉刷新的回调,默认重置上拉加载列表为第一页 (自动执行 mescroll.num=1, 再触发upCallback方法 )
    				mescroll.resetUpScroll()
    			},
    			/*上拉加载的回调: mescroll携带page的参数, 其中num:当前页 从1开始, size:每页数据条数,默认10 */
    			upCallback(mescroll) {
    				//联网加载数据
    				this.getListDataFromNet(mescroll.num, mescroll.size, (curPageData)=>{
    					//联网成功的回调,隐藏下拉刷新和上拉加载的状态;
    					console.log("i="+this.i+", mescroll.num=" + mescroll.num + ", mescroll.size=" + mescroll.size + ", curPageData.length=" + curPageData.length);
    					mescroll.endSuccess(curPageData.length);
    					//设置列表数据
    					if(mescroll.num == 1) this.pdList = []; //如果是第一页需手动制空列表
    					this.pdList=this.pdList.concat(curPageData); //追加新数据
    				}, () => {
    					//联网失败的回调,隐藏下拉刷新的状态
    					mescroll.endErr();
    				})
    			},
    			//点击空布局按钮的回调
    			emptyClick(){
    				uni.showToast({
    					title:'点击了按钮,具体逻辑自行实现'
    				})
    			},
    			
    			/*联网加载列表数据
    			在您的实际项目中,请参考官方写法: http://www.mescroll.com/uni.html#tagUpCallback
    			请忽略getListDataFromNet的逻辑,这里仅仅是在本地模拟分页数据,本地演示用
    			实际项目以您服务器接口返回的数据为准,无需本地处理分页.
    			* */
    			getListDataFromNet(pageNum,pageSize,successCallback,errorCallback) {
    				//延时一秒,模拟联网
    				setTimeout(()=> {
    					try{
    						let listData = []
    						if (this.i === 0) {
    							for (let i = (pageNum - 1) * pageSize; i < pageNum * pageSize; i++) {
    								if (i === mockData.length) break
    								listData.push(mockData[i])
    							}
    						} else{
    							let wordArr = ['', '奶粉', '面膜', '图书']
    							let word = wordArr[this.i]
    							for (let i = 0; i < mockData.length; i++) {
    								if (mockData[i].pdName.indexOf(word) !== -1) {
    									listData.push(mockData[i])
    								}
    							}
    						}
    						// 回调
    						successCallback && successCallback(listData);
    					} catch (e) {
    						//联网失败的回调
    						errorCallback && errorCallback();
    					}
    				},1000)
    			}
    		}
    	}
    

    注意:这个插件本身是基于scoll的,所以不能在这个插件当中使用scoll。但是呢,我在项目当中有时候必须使用scoll的时候,我就发现可以自己来设置上拉加载。
    我们可以在需要上拉加载的位置上写上一行小字:上拉加载更多,然后呢对这行字设置点击事件:

    <view  v-if="more" class="getmore"  @tap="getmoreorder">加载更多...</view>
    

    之后呢设置加载中的动画和当没有商品时进行提示“没有更多了”:

    <!--加载loadding-->
    <tui-loadmore :visible="loadding" :index="3" type="red"></tui-loadmore>
    <tui-nomore :visible="nomore" bgcolor="#fafafa"></tui-nomore>
    

    然后在js中写上点击加载更多之后的代码:

    this.loadding = true;
    this.orderpage = this.orderpage + 1;
    let param = {
    	//给后端传的数据
    }
    ApiGetOrder(param).then(({
    	data
    }) => {
    	if (data.status == 0) {
    		this.loadding = false;
    		this.oldorderList = [...data.msg];
    		if(this.oldorderList.length < this.pagenum){
    			this.nomore = true;
    			this.more = false;
    		}else{
    			this.more = true;
    		}
    		this.orderList  = this.orderList.concat([...data.msg]); 
    	}
    })				
    

    今天的记录就到此结束啦,有问题的话可以进行指出,谢谢大家!

    更多相关内容
  • 最近公司在研发app,选择了基于Vue框架的vux组件库,现总结在实现上拉刷新功能遇到的坑,感兴趣的朋友参考下吧
  • SwipeRefreshLayout 是谷歌公司推出的用于下拉刷新的控件,SwipeRefreshLayout已经被放到了sdk中,在Version 19.1之后SwipeRefreshLayout 被放到support v4...今天说一下最常见的下拉刷新 和 上拉刷新的功能。 布局文
  • 本篇文章主要介绍了ios基于MJRefresh实现上拉刷新和下拉加载动画效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 主要为大家详细介绍了Spring实现上拉刷新和下拉加载效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • XListview实现上拉刷新下拉加载功能.rar,太多无法一一验证是否可用,程序如果跑不起来需要自调,部分代码功能进行参考学习。
  • 主要为大家详细介绍了基于Vue框架vux组件库实现上拉刷新功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 该源码实现上拉刷新/拉加载效果,可用于实现显示。
  • XListview实现上拉刷新下拉加载功能.zip项目安卓应用源码下载XListview实现上拉刷新下拉加载功能.zip项目安卓应用源码下载 1.适合学生毕业设计研究参考 2.适合个人学习研究参考 3.适合公司开发项目技术参考
  • Android应用源码之XListview实现上拉刷新下拉加载功能.zip项目安卓应用源码下载Android应用源码之XListview实现上拉刷新下拉加载功能.zip项目安卓应用源码下载 1.适合学生毕业设计研究参考 2.适合个人学习研究参考 3...
  • js实现上下拉刷新.zip

    2020-05-12 11:17:05
    基于bettrt-scroller实现上下拉刷新,支持页面过长第一次下滑到底部不刷新,可以强制刷新,实测有效
  • Android应用源码之XListview实现上拉刷新下拉加载功能.zip
  • 安卓开发-XListview实现上拉刷新下拉加载功能.zip
  • 一直说项目完了记录一下,还是给忘记了,想起来了,就记录下,我们的移动端经常会用到一种功能就是下拉加载更多,上拉刷新页面的功能,这里主要说的是mint-ui的下拉加载,上拉刷新 官网入口 实现原理: 获取...

    前言:

            一直说项目完了记录一下,还是给忘记了,想起来了,就记录下,我们的移动端经常会用到一种功能就是下拉加载更多,上拉刷新页面的功能,这里主要说的是mint-ui的下拉加载,上拉刷新

    官网入口

    实现原理:

    获取数据是一个函数,这里通过给后台传当前页码和一页显示数据量(我们后台是按照分页那种写的)以及其他参数,然后获取数据,
    下拉刷新直接调用重新渲染方法,
    上拉加载会额外传个参数,让他拿到后跟后台传来的最大值进行对比,如果比对成功则消除掉下拉状态

    实现步骤:

    第一:template部分:

    <mt-loadmore
     :top-method="loadTop"
     :bottom-method="loadBottom"
     :bottom-all-loaded="allLoaded"
     :autoFill='isAutoFill'
     ref="loadmore">
            //主体内容部分
            <NewCon class="recom_con" :list='newList'></NewCon>
    </mt-loadmore>

    第二:data部分

          /**
           * 上拉+下拉懒加载参数
           */
          allLoaded: false,//可以进行上拉,true不能,false可以
          isAutoFill: false,//是否自动触发上拉函数
          pageNum:1,

    第三:methods部分

        /**
         * 获取列表数据
         */
        initTableData(isBottom){
          let articleTypeId = '1';//推荐的类型为1,后期不用改
          let pageNum = this.pageNum;//当前页码
          let pageSize = '5';//一次显示多少条数据
          let userId = this.$store.state.userData.id;//id
          this.$get('skms/app/article/getChannelArticle','',{
            articleTypeId:articleTypeId,
            pageNum:pageNum,
            pageSize:pageSize,
            userId:userId,
          }).then((res) => {
            let datas = res.data.data;
            if(res.data.code == 10000){
              if(isBottom){//isBottom==上拉加载,如果不传是下拉刷新
                if(this.pageNum>=datas.totalCount){//当前页码大于他发送的最大页码时/视具体情况添加限制条件
                  this.$refs.loadmore.onBottomLoaded();
                  this.allLoaded = true;
                }else{
                  this.newList = this.newList.concat(datas.list);
                  this.$refs.loadmore.onBottomLoaded();
                }
              }else{
                this.newList = datas.list;
                this.$refs.loadmore.onTopLoaded();
                this.allLoaded = false;//刷新完让可以上拉加载
                this.pageNum = 1;//当前页码
              }
            }
          }).catch((error)=>{
            console.log('错误信息:'+error)
          });
        },
    //------------------------逻辑功能----------------------
        /**
         *  下拉刷新
         */
        loadTop() {
          console.log('下拉刷新');
          this.initTableData();
        },
        /**
         *  上拉加载
         */
        loadBottom() {
          console.log('上拉加载');
          this.pageNum++;
          let isBottom = true;
          this.initTableData(isBottom);
        },

     

    展开全文
  • 代码实现3.1 全局变量3.2 OnCreate3.3 自定义的showInfo方法3.4 下拉刷新3.5 上拉加载4. 所有代码 实现效果 下拉刷新 上拉加载 1. 准备环境 Android Studio 2020.3.1 (1) 给项目安装 androidx....

    实现效果


    下拉刷新
    在这里插入图片描述
    上拉加载
    在这里插入图片描述

    1. 准备环境


    Android Studio 2020.3.1
    在这里插入图片描述
    (1) 给项目安装 androidx.swiperefreshlayout:swiperefreshlayout:1.1.0-beta01布局组件
    在这里插入图片描述
    (2) 在 dependencies依赖中添加一行

    implementation 'androidx.swiperefreshlayout:swiperefreshlayout:1.1.0-beta01'
    

    在这里插入图片描述(3) 点击 Sync 同步,完成安装
    在这里插入图片描述笔者使用的是1.1.0 beta01版本,只要保证在这个版本之上应该都适用,更多关于这个布局的使用,请参考官方API Android开发文档

    2. 布局


    2.1 foot_view

    foot_view 用于显示上拉加载时,出现的画面提示,到时候会添加到列表框的底部

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        >
    
        <TextView
            android:id="@+id/foot_view_tv"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center"
            android:text="加载更多..."
             />
    </LinearLayout>
    

    ftoo_view.xml 布局的效果图:
    在这里插入图片描述

    2.2 activity_main

    activity_main.xml 应用主要的布局 ,在 SwipeRefreshLayout布局里嵌套了一个 ListView

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">
    
        <androidx.swiperefreshlayout.widget.SwipeRefreshLayout
            android:id="@+id/refresh"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            >
        <ListView
            android:id="@+id/listview"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
             />
    
        </androidx.swiperefreshlayout.widget.SwipeRefreshLayout>
    </LinearLayout>
    

    3.代码实现


    3.1 全局变量

    public class MainActivity extends AppCompatActivity implements SwipeRefreshLayout.OnRefreshListener, AbsListView.OnScrollListener{
        ArrayList<String> list_all;             // 存储列表所有的测试数据
        ArrayList<String> list_lv;              // 存储列表当前的数据
        ArrayAdapter<String> adapter;           // ListView的适配器对象
        SwipeRefreshLayout refreshLayout;       // 主界面刷新布局的对象
        ListView lv;                            // 主界面列表对象
        View foot;                              // 上拉加载底部的视图
        final int MAX_PAGE = 5;                 // 最多的页数
        final int PER_PAGE = 15;                // 每页的数据个数
        int page = 0;                           // 当前页数
    }
    

    3.2 OnCreate

    @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
    
            // 1. 获取组件
            lv = findViewById(R.id.listview);
            refreshLayout = findViewById(R.id.refresh);
    
            // 2. 产生列表框测试的数据
            list_all = new ArrayList<>();
            for (int i = 0; i < PER_PAGE * MAX_PAGE; i++)
                list_all.add(String.format("Botton:%d", i));
            list_lv = new ArrayList<>(list_all.subList(0, PER_PAGE));
    
            // 3. 设置 适配器 以及 视图
            adapter = new ArrayAdapter<>(this, android.R.layout.simple_list_item_1, list_lv);
            foot = LayoutInflater.from(this).inflate(R.layout.foot_view,null);
            lv.setAdapter(adapter);
    
            // 4. 设置监听事件
            lv.setOnScrollListener(this);               // 下拉刷新
            refreshLayout.setOnRefreshListener(this);   // 上拉加载
        }
    

    3.3 自定义的showInfo方法

      public void showPageInfo(){
            Toast.makeText(MainActivity.this, String.format("当前是第%d页",page), Toast.LENGTH_SHORT).show();
        }
    

    3.4 下拉刷新

        // SwipeRefreshLayout 下拉刷新
        @Override
        public void onRefresh() {
            page = ((page == MAX_PAGE - 1) ? 0 :  page + 1);
            list_lv.clear();
            list_lv.addAll(list_all.subList(page * PER_PAGE, (page+1) * PER_PAGE - 1));
            System.out.println(list_lv.toString());
            adapter.notifyDataSetChanged();
            showPageInfo();
            refreshLayout.setRefreshing(false);
        }
    

    3.5 上拉加载

        // ListView 上拉加载
        @Override
        public void onScrollStateChanged(AbsListView absListView, int i) {
            int last =lv.getLastVisiblePosition();
            int first = lv.getFirstVisiblePosition();
            int num = lv.getCount();
    
            // SCROLL_STATE_IDLE 表示 当前View没有滚动
    
            if(last == num - 1 && SCROLL_STATE_IDLE == i)
                lv.addFooterView(foot);
            if(num == PER_PAGE + 1){
                lv.removeFooterView(foot);
                onRefresh();
                lv.setSelection(0);
            }
        }
        // ListView 上拉加载接口的另一个方法 没有用到 可以不管
        @Override
        public void onScroll(AbsListView absListView, int i, int i1, int i2) { }
    

    4. 所有代码

    package com.example.test1;
    
    import androidx.annotation.NonNull;
    import androidx.annotation.Nullable;
    import androidx.appcompat.app.AppCompatActivity;
    import androidx.swiperefreshlayout.widget.SwipeRefreshLayout;
    
    import android.os.Bundle;
    import android.view.LayoutInflater;
    import android.view.View;
    import android.widget.AbsListView;
    import android.widget.Adapter;
    import android.widget.ArrayAdapter;
    import android.widget.ListView;
    import android.widget.TextView;
    import android.widget.Toast;
    
    import java.util.ArrayList;
    
    public class MainActivity extends AppCompatActivity implements SwipeRefreshLayout.OnRefreshListener, AbsListView.OnScrollListener{
        ArrayList<String> list_all;             // 存储列表所有的测试数据
        ArrayList<String> list_lv;              // 存储列表当前的数据
        ArrayAdapter<String> adapter;           // ListView的适配器对象
        SwipeRefreshLayout refreshLayout;       // 主界面刷新布局的对象
        ListView lv;                            // 主界面列表对象
        View foot;                              // 上拉加载底部的视图
        final int MAX_PAGE = 5;                 // 最多的页数
        final int PER_PAGE = 15;                // 每页的数据个数
        int page = 0;                           // 当前页数
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
    
            // 1. 获取组件
            lv = findViewById(R.id.listview);
            refreshLayout = findViewById(R.id.refresh);
    
            // 2. 产生列表框测试的数据
            list_all = new ArrayList<>();
            for (int i = 0; i < PER_PAGE * MAX_PAGE; i++)
                list_all.add(String.format("Botton:%d", i));
            list_lv = new ArrayList<>(list_all.subList(0, PER_PAGE));
    
            // 3. 设置 适配器 以及 视图
            adapter = new ArrayAdapter<>(this, android.R.layout.simple_list_item_1, list_lv);
            foot = LayoutInflater.from(this).inflate(R.layout.foot_view,null);
            lv.setAdapter(adapter);
    
            // 4. 设置监听事件
            lv.setOnScrollListener(this);               // 下拉刷新
            refreshLayout.setOnRefreshListener(this);   // 上拉加载
        }
        public void showPageInfo(){
            Toast.makeText(MainActivity.this, String.format("当前是第%d页",page), Toast.LENGTH_SHORT).show();
        }
        // SwipeRefreshLayout 下拉刷新
        @Override
        public void onRefresh() {
            page = ((page == MAX_PAGE - 1) ? 0 :  page + 1);
            list_lv.clear();
            list_lv.addAll(list_all.subList(page * PER_PAGE, (page+1) * PER_PAGE - 1));
            System.out.println(list_lv.toString());
            adapter.notifyDataSetChanged();
            showPageInfo();
            refreshLayout.setRefreshing(false);
        }
    
        // ListView 上拉加载
        @Override
        public void onScrollStateChanged(AbsListView absListView, int i) {
            int last =lv.getLastVisiblePosition();
            int first = lv.getFirstVisiblePosition();
            int num = lv.getCount();
    
            // SCROLL_STATE_IDLE 表示 当前View没有滚动
    
            if(last == num - 1 && SCROLL_STATE_IDLE == i)
                lv.addFooterView(foot);
            if(num == PER_PAGE + 1){
                lv.removeFooterView(foot);
                onRefresh();
                lv.setSelection(0);
            }
        }
        // ListView 上拉加载接口的另一个方法 没有用到 可以不管
        @Override
        public void onScroll(AbsListView absListView, int i, int i1, int i2) { }
    }
    
    展开全文
  • 安卓Android源码——XListview实现上拉刷新下拉加载功能.zip
  • 安卓Android源码——XListview实现上拉刷新下拉加载功能.rar
  • Android高级应用源码-XListview实现上拉刷新下拉加载功能.zip

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 47,669
精华内容 19,067
关键字:

怎么实现上拉刷新