李成笔记网

专注域名、站长SEO知识分享与实战技巧

2024年12月31日

uniapp高性能下拉刷新下拉加载使用mescroll-uni-vue2快速实现

前情提示

vue2

hubilderx4.29最新版本

mescroll-uni-1.3.8目前最新版本

使用mescroll-body支持原生组件，性能更好，非常容易接入，官方也提供了很多demo示例。

快速安装

使用uni_modules直接下载导入。不需要配置其他任何地方，不需要配置不必配置pages.json。

业务接口示例

返回要有总页码、或者总条数，这里用的总条数

{
    "success": true,
    "message": "",
    "code": 200,
    "result": {
        "records": [
            {
                "id": "1849444662765731841",
                "fatteningPigNo": "333",
                "filingDate": null,
                "plantName": null,
                "buildingName": null,
                "fieldName": null,
                "frailWeight": null,
                "whetherManual": null,
                "responsiblePersonnel": null,
                "createTime": "2024-10-24 21:35:43",
                "createBy": "admin",
                "updateTime": null,
                "updateBy": null,
                "delFlag": 0,
                "sysOrgCode": "A01",
                "tenantId": null
            },
            {
                "id": "1849450786642509825",
                "fatteningPigNo": "请问请问",
                "filingDate": null,
                "plantName": null,
                "buildingName": null,
                "fieldName": null,
                "frailWeight": null,
                "whetherManual": null,
                "responsiblePersonnel": null,
                "createTime": "2024-10-24 22:00:03",
                "createBy": "admin",
                "updateTime": null,
                "updateBy": null,
                "delFlag": 0,
                "sysOrgCode": "A01",
                "tenantId": null
            }
        ],
        "total": 2,
        "size": 10,
        "current": 1,
        "orders": [

        ],
        "optimizeCountSql": true,
        "searchCount": true,
        "maxLimit": null,
        "countId": null,
        "pages": 1
    },
    "timestamp": 1729778822564
}

效果图

业务界面代码

如果你引入了uview，基本可以完全复制使用

<template>
  <view>
    <!--标题和返回-->
    <cu-custom :bgColor="NavBarColor" isBack>
      <block slot="backText">返回</block>
      <block slot="content">育肥猪信息</block>
    </cu-custom>
    <view class="search">
      <u-search v-model="keywords" @custom="search" @search="search"></u-search>
    </view>

    <!--滚动加载列表-->
    <view class="btn-plus" @click="navTo('pdtjPigYfInfoForm')">
      <u-icon name="plus-circle-fill" size="90" color="#3d87ff"></u-icon>
    </view>
    <mescroll-body ref="mescrollRef" top="105rpx" @init="mescrollInit" :up="upOption" :down="downOption"
                   @down="downCallback" @up="upCallback">
      <u-cell-group class="list" :border="false">
        <u-swipe-action :options="options2" v-for="(item, index) in list" :key="item.id" :index="index"
                        @click="optionsClick">
          <u-cell-item :arrow="true" @click="navTo('pdtjPigYfInfoForm?id='+item.id)">
            <text slot="title">{{item.name || item.id}}</text>
            <text slot="label">创建者：{{item.createBy}}  |  时间：{{item.createTime}}</text>
          </u-cell-item>
        </u-swipe-action>
      </u-cell-group>

    </mescroll-body>

  </view>
</template>

<script>
import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
import Mixin from "@/common/mixin/Mixin.js";

export default {
  mixins: [MescrollMixin, Mixin],
  data() {
    return {
      keywords: '',
      CustomBar: this.CustomBar,
      NavBarColor: this.NavBarColor,
      purl: "/pball/pdtjPigYfInfo/list",
      options2: [{
        text: '收藏',
        style: {
          backgroundColor: '#3c9cff'
        }
      }, {
        text: '删除',
        style: {
          backgroundColor: '#f56c6c'
        }
      }]
    };
  },
  methods: {
    goHome() {
      this.$Router.push({
        name: "index"
      })
    },
    search(value) {
      console.log('search', value)
    },
    optionsClick(rowIndex, btnIndex) {

    },
    navTo(url) {
      uni.navigateTo({
        url: url
      });
    }
  }
}
</script>
<style lang="scss">
</style>

@/common/mixin/Mixin.js主要用了请求业务接口，和配置mescroll的options。

/**
 * Copyright (c) 2013-Now http://pusdn.com All rights reserved.
 * Author: PGZ Club
 */
const ListMixin = {
	data() {
		return {
			downOption: {
				auto: false, //是否在初始化完毕之后自动执行下拉回调callback; 默认true
			},
			upOption: {
				page: {
					num: 0,
					size: 10,
					time: null
				},
				noMoreSize: 1, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
				empty: {
					tip: '~ 暂无更多数据 ~', // 提示
					// btnText: '返回首页'
				},
				textNoMore: '-- 暂无更多数据 --',
				toTop: {
					src: null,
					offset: 1000,
					duration: 300,
					zIndex: 9990,
					right: "50rpx",
					bottom: "165rpx",
					safearea: false,
					width: "40px",
					radius: "50%",
					left: null
				}
			},
			queryParam: {
				pageNo: 1,
				pageSize: 10
			},
			list: [],
			pageNo: 1,
			pageSize: 10,
		}
	},
	onShow() {
		this.canReset && this.mescroll.resetUpScroll()
		this.canReset && this.mescroll.scrollTo(0, 0)
		this.canReset = true
	},
	methods: {
		/*下拉刷新的回调 */
		downCallback() {
			//加载列表数据
			this.loadList('down');
		},
		/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
		upCallback(page) {
			let param = this.queryParam
			param.pageNo = page.num,
				param.pageSize = page.size

			if (page.num == 1) {
				this.list = [];
			}
			console.log("upCallback==param::", param)
			this.$http.get(this.purl, {
				params: param
			}).then(res => {
				console.log("upCallback请求返回res", res)
				if (res.data.success) {
					let rec = res.data.result.records;
					let totalSize = res.data.result.total;
					let hasNext = true;
					if (!rec || rec.length < this.pageSize) {
						console.log("加载完成!没有更多了")
						hasNext = false;
					}
					console.log("hasNext", hasNext)
					//方法四 (不推荐),会存在一个小问题:比如列表共有20条数据,每页加载10条,共2页.如果只根据当前页的数据个数判断,则需翻到第三页才会知道无更多数据.
					// this.mescroll.endSuccess(rec.length);
					this.mescroll.endBySize(rec.length, totalSize);
					//设置列表数据
					this.list = this.list.concat(rec);
					this.$forceUpdate();
				} else {
					this.mescroll.endErr();
				}
			}).catch(() => {
				//加载失败, 结束
				this.mescroll.endErr();
			})
		},
		loadList(flag) {
			let param = this.queryParam
			param.pageNo = this.pageNo,
				param.pageSize = this.pageSize
			console.log("请求参数", param)
			if (flag == 'down') {
				if (this.mescroll.optUp.use) {
					this.mescroll.resetUpScroll()
				} else {
					setTimeout(() => {
						this.mescroll.endSuccess();
					}, 500)
				}
			}
			return false;
			this.$http.get(this.purl, {
				params: param
			}).then(res => {
				if (res.data.success) {
					console.log("请求返回res.data", res.data)
					let rec = res.data.result.records
					if (flag == 'down') {
						//下拉刷新成功的回调,隐藏下拉刷新的状态
						// this.mescroll.endSuccess();
						// if(this.mescroll.optUp.use){
						// 	this.mescroll.resetUpScroll()
						// }else{
						// 	setTimeout(()=>{
						// 		this.mescroll.endSuccess();
						// 	}, 500)
						// }
					}
					//添加新数据
					this.list = rec;
					/* if(!rec || rec.length<this.pageSize){
					  console.log("加载完成!")
					} */
				} else {
					console.log("请求返回else", res)
					this.mescroll.endErr();
				}
			}).catch((err) => {
				console.log("请求返回err", err)
				//加载失败, 结束
				this.mescroll.endErr();
			})
		},
	}

}

export default ListMixin;

标签：px和rpx 

作者:lichen , 分类:站长日记 , 浏览:15 , 评论:0

发表评论:

控制面板
您好，欢迎到访网站！
  查看权限
网站分类
最新留言