精华内容
下载资源
问答
  • uniapp加载分页

    2021-08-09 16:44:42
    uniapp之懒加载分页 前言: 最近一直在写uniapp移动端项目,在写到列表时常常会有懒加载分页的功能,那么接下来我们来进行实现懒加载分页的功能,话不多说直接上代码! <u-cell-group> <u-cell-item v-for...

    uniapp懒加载分页

    前言:
    最近一直在写uniapp移动端项目,在写到列表时常常会有懒加载分页的功能,那么接下来我们来进行实现懒加载分页的功能,话不多说直接上代码!

    <u-cell-group>
    	<u-cell-item v-for="(item,index) in cellData" :key="index" @click="goDetails(item)" :title="item.name" :arrow="true">
    		<template slot="label">
    			<span>{{"技术类别:"+item.type}}</span>
    		</template>
    	</u-cell-item>
    </u-cell-group>
    
    <u-loadmore :status="status" v-show="status != 'nomore'" :load-text="loadText"/>  //重要代码
    
    在data中定义:
    cellData: [],
    status: 'loadmore',
    loadText: {  //重要代码
    	loadmore: '',
    	loading: '',
    	nomore: ''
    },
    page:1,
    size:15
    
    js:
    getMessage(){
    	uni.showLoading({
    		title: "加载中……"
    	});
    	const mess = {
    		name:this.keyword,
    		page:this.page,
    		size:this.size
    	}
    	getLegalWorker(mess).then(response => {
    		uni.hideLoading();
    		if(response.data.code == 200){
    			if(response.data.data.length < this.size){  //重要代码
    				this.status = "nomore";
    			}
    			this.cellData.push(...response.data.data)  //重要代码
    		} 
    	})
    }
    //上拉刷新事件  //重要代码
    onReachBottom() {
    	if(this.status == 'nomore'){
    		return
    	}
    	this.page++;
    	this.getMessage();
    }
    

    以上功能就是一个完整的懒加载分页功能,希望能帮助你!
    加油!!!

    展开全文
  • <template> <view> </view> </template> <script> export default { data() { return { dataList: [], dataSource: { isLoading: true, ... },
    <template>
    	<view>
    		
    	</view>
    </template>
    
    <script>
    	export default {
    		data() {
    			return {
    				dataList: [],
    				dataSource: {
    					isLoading: true,
    					pageNo: 1,
    					pageSize: 10
    				},
    				url:{
    					list:'',
    				},
    			}
    		},
    		onLoad() {
    			this.dataList = [];
    			this.loadData();
    		},
    		onPullDownRefresh(e) {
    			this.dataList = [];
    			this.dataSource.pageNo = 1;
    			this.loadData();
    		},
    		onReachBottom() {
    			if (this.dataSource.isLoading) {
    				this.dataSource.pageNo += 1;
    				this.loadData();
    			}
    		},
    		methods: {
    			loadData() {
    				let params = {
    					pageNo:this.dataSource.pageNo,
    					isPublish:1,
    				};
    				this.$http.get(this.url.list,{params:params}).then(res=>{
    					if(res.data.success){}
    					uni.stopPullDownRefresh();
    				});
    			},
    		}
    	}
    </script>
    
    <style>
    </style>
    
    
    展开全文
  • uniapp 实现 下拉分页加载数据

    千次阅读 2021-02-25 13:55:40
    uniapp 实现 下拉分页加载数据 使用场景大多在列表页中,那么如何实现呢? 正式开始之前先介绍两个函数: onPullDownRefresh 在 js 中定义 onPullDownRefresh 处理函数(和onLoad等生命周期函数同级),监听该页面...

    uniapp 实现 下拉分页加载数据

    很多列表页总数量很大,一次性查询加载会导致页面有很长时间的空白期,自然体验感极差。就会使用分页加载数据,后端默认传入第一页固定的条数,下拉的时候再次查询加载新的数据,那么如何实现呢?

    正式开始之前先介绍两个函数:

    1. onPullDownRefresh
      在 js 中定义 onPullDownRefresh 处理函数(和onLoad等生命周期函数同级),监听该页面用户下拉刷新事件。
    • 需要在 pages.json 里,找到的当前页面的pages节点,并在 style 选项中开启 enablePullDownRefresh。
    • 当处理完数据刷新后,uni.stopPullDownRefresh 可以停止当前页面的下拉刷新。
      第一点很重要,有的时候代码写好了,然后怎么下拉都不会刷新加载数据, 就是因为没有设置enablePullDownRefresh。
    1. onReachBottom
      页面滚动到底部的事件(不是scroll-view滚到底),常用于下拉下一页数据。

    接下来看一下如何实现:

    <template>
      <view>
        <view class="list-item" v-for="(item, index) in list" :key="item.id">
          <text>{{ item.note }}</text>
        </view>
        <load-more :loadingType="loadingType" />
      </view>
    </template>
    
    1. 循环返回的数据
    2. 用到一个load-more组件。

    定义一些用得到的参数:

    data() {
        return {
          params: {
            pageNo: 1,
            pageSize: 10
          },
    
          list: [],
          loadingType: ""
        };
      },
    
      methods: {
        onPullDownRefresh() {
          this.loadData();
          uni.stopPullDownRefresh();
        },
        onReachBottom() {
          this.loadData("more");
        },
        async loadData(type = "refresh") {
          if (type === "refresh") {
            this.$showLoading("加载中");
            this.params.pageNo = 1;
          } else if (this.loadingType === "nomore") {
            return;
          }
          this.loadingType = "loading";
          try {
            let {
              pageList: { list }
            } = await this.$api.massageList(this.params.pageNo, this.params.pageSize);
            let loadingType = "";
            if (list.length === 0) {
              if (type === "refresh") loadingType = "nodata";
              if (type === "more") loadingType = "nomore";
            }
            this.loadingType = loadingType;
            this.params.pageNo++;
            list.forEach(item => {
              item.actionParams = JSON.parse(item.actionParams);
            });
            this.list = type === "refresh" ? list : this.list.concat(list);
            if (type === "refresh") {
              await this.$setTime(300);
              uni.hideLoading();
            }
          } catch (error) {
            this.loadingType = "";
          }
        }
      }
    };
    
    1. 如果你要修改后端给的数据,要在this.list 之前修改,不然永远只改了前几条数据
    list.forEach(item => {
              item.actionParams = JSON.parse(item.actionParams);
            });
      this.list = type === "refresh" ? list : this.list.concat(list);
    

    在这里插入图片描述
    在这里插入图片描述
    参数的页数开始发生变化。这个视频转成git太差了,看个大概吧。哈哈哈( ̄□ ̄||尴尬的笑~~~)

    在这里插入图片描述

    展开全文
  • uniapp分页加载数据,解决一次性加载全部数据导致的卡顿问题 这里以左右可滑动的刷题页面举例 template部分 <template> <view> <swiper :current="current" @change="change" > <swiper-...

    uniapp分页加载数据,解决一次性加载全部数据导致的卡顿问题

    这里以左右可滑动的刷题页面举例

    template部分

    <template>
    	<view>
        	<swiper :current="current" @change="change" >
            	<swiper-item v-for="(question,index) in questionList" :key="index">
                    <view>
                    	<!-- 内容部分省略-->
                    </view>            
                </swiper-item>
            </swiper>
        </view>
    </template>
    

    script部分

    <script>
    	export default{
            data(){
                return{
                   current:0,//当前页面 
                   questionList:[],//问题列表
                   page:1//第一此分页加载时的界面
                }
            }
            onload(){
                this.getData()//页面 加载时请求一次界面 
            },
            methods:{
            change(){
                this.current=e.detail.current//获取改变后得页数并赋值给current
                var num = (this.current+1)%20//设置一页共有20个数据
                if(num===0){
                    this.getData()//到达 最后一页的时候再一次加载数据
                }
            },
            //获取数据
            getData(){
                uni.request({
                    url:"需要请求的url"
                    method:"GET",
                    data:{
                   	    pageNum:this.page,
                  	  	pageSize:20
                    }
                    success:(res)=>{
                        this.questionList=res.data//获取到的值赋值给问题列表
                            }
                    this.page+=1//设置 page的值为下一页
                })
            }
                
        }
    }
    </script>
    
    展开全文
  • uni-app 下拉加载分页数据

    千次阅读 2021-02-08 11:20:19
    关于uni-app对页面数据量分页加载以及下拉刷新数据 uni-app小白一枚 此文章主要记录uni-app学习中感觉有意思的知识点 提示:以下是本篇文章正文内容,下面案例可供参考 一、关于数据量多时下拉加载更多数据操作 ...
  • 在Uni-app中实现下拉加载数据,分页操作减少渲染时间!! 文章目录 1 实例部分 2 js部分 2.1 数据部分及引入组件 2.2 方法部分 2.3 onload方法 2.4 触底加载数据分页 2.5 下拉刷新部分 实例部分 设计思想: ...
  • uni-app上拉页面加载数据,实现分页效果

    万次阅读 多人点赞 2019-07-25 18:05:24
    实现分页效果是为了在上拉数据的时候逐渐加载下一页面的数据,这样就不会造成数据加载太多造成的页面显示过慢的问题,可以在一定成的上优化界面。 首先要先定义数据和在上拉函数中调用this,代码如下: var _self...
  • <template> <view class="order"> <view class="top" style="width: 100%; z-index: 100;"> <view class="displyFlex"> <u-search search-icon-color="#629ff0" ...
  • uniapp中的分页

    2021-08-17 11:33:05
    数据量过多就会使用分页 第一种:API //和data同级 onReachBottom: function (){ if (this.pages >this.current) { this.current++ this.loadOrderData(this.sts,this.current) }else { uni.showToast({ ...
  • uniapp分页加载没有用到uni-load-more

    千次阅读 2020-05-03 12:08:21
    } // 如果返回来的是空数组 ,显示这个,如果不是 进行数据的加载 第二种 if (res.data.list.length == 0 ) { that.loadingText = "————我是有底线的————"; return false; ...
  • 上拉加载分页的功能分析: 1.用户上滑页面,滚动条触底,开始加载下一页数据 2.判断有没有下一页数据 3.假如没有下一页数据,显示提示内容 4.假如还有下一页数据,加载下一页数据 首先我们先来在模板中添加...
  • uniapp 列表滚动加载

    千次阅读 2021-01-07 13:12:06
    最近写uniapp项目,发现很多列表页面需要滚动加载数据,为了简化代码,想出以下的解决方法 ... // 定义分页参数,一般滚动加载也就是分页加载,定义在mixins中统一管理 listQuery:{ pageSize:10,
  • 使用生命周期中的onReachBottom来实现 (实现触底加载:后端必须要给“总条数”,前端必须要传“当前页数和当前条数”) {{index}} {{item}}
  • <script> export default { data() { return { ... //分页请求数据 getData(){ if(this.haseMore) { uni.showLoading({ title: '加载中...' }) wx.cloud.d
  • 小程序(uniapp)-实现分页功能

    千次阅读 2020-07-28 08:10:20
    分页(触发)时机 利用小程序scroll-view 的触底事件。来请求数据 请求来的数据,利用展开运算符,进行数据拼接 […data, …res.data] 每次请求多少条数据,当前页,数据总数要搞明白 数据请求完,加载中消失,显示没有...
  • //获取试卷列表 getPaperData(){ this.$apiReq.req({ url:'接口', data:{ ...this.params }, method:"get", success:res=>{ if (res.code === 200) { //console.log('...
  • uniapp ---- 添加分页

    2021-10-27 11:23:24
    添加分页 <view> <u-navbar :is-back="false" title="盘点任务" :background="{ backgroundColor: '#007AFF'}" title-color="#fff"> </u-navbar> <rt-card2 :data="dataList" @...
  • 触底后也要加载原来的操作 底线提示 下拉刷新 开启 监听 页面闪了一下 加了延时,重新获取数据 加回调 通过形参接收回调,如果回调参数不为空,就回调,否则就不回调 ...
  • 我这边和后端同事沟通的逻辑是上拉一次 (也就是分页一次) pageIndex+1 pageSize 10 条数据不变 onReachBottom() { this.status = 'loading'; this.page = ++ this.page; if(this.cardList.length < this....
  • 这段时间一直在利用uniapp做聊天室的功能,这里分享下发送新消息,接收新消息怎么像QQ那样滚动加载。 首先我是查了一下网上的朋友,看了下大多都是使用scroll-top实现的,所以我也试了一下这个东西,确实可以实现...
  • uni-app 上拉加载更多效果组件及使用

    千次阅读 2019-01-14 17:30:44
    stateText1: '↑上拉加载', stateText2: '↓释放加载', stateText4: '没有新数据了!' } }, methods: { pullup () { this.$emit('pull-up') } } } .pull-up { width: 100%; ...
  • 仅需两步轻松完成完整分页逻辑(翻页刷新,上拉加载更多),分页自动处理。支持自定义加载更多的文字或整个视图,自定义拖放刷新样式,自动管理空数据视图,支持吸顶效果等。 在DCloud插件市场中访问: ://ext....
  • 原理: 使用 wx.createSelectorQuery()来动态获取元素的高度信息,来动态分配到左边还是右边 首先定义两个变量,再循环一下你要处理的数组,这里使用async await的目的是让上一次数据处理完成后再进行下一次循环,...
  • 发送请求,保存数据 uni.request({ url: '... } }) }, 触底加载 onReachBottom() { if(this.length >= this.total) return this.over = true; this.pageNo++; this.getComments(); },

空空如也

空空如也

1 2 3 4 5 ... 14
收藏数 262
精华内容 104
关键字:

uniapp分页加载