uniapp中mescroll的使用

1.视图 

<mescroll-uniref="mescrollRef"@init="mescrollInit"@down="downCallback"@up="upCallback":up="{auto:false,page:{num:0,size:10}}":fixed="false"
</mescroll-uni>

2.js


1.  引入js文件,不要忘了mixins
import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
import MescrollMoreItemMixin from "@/components/mescroll-uni/mixins/mescroll-more-item.js";export default {mixins: [MescrollMixin, MescrollMoreItemMixin],data() {return {upOption: {        //2.  用来配置无数据时的空显示auto: false,empty: {icon: this.$baseImgUrl+'news_null.png',tip: "暂无数据",}},}}
}3.  数据初始化
onLoad() {this.mescroll.resetUpScroll()},4.methods: {downCallback() {     //下拉刷新this.mescroll.resetUpScroll();},upCallback(page) {     //上滑加载getArticleList({    //接口获取数据列表page_size:page.size,page_no:page.num}).then(({data}) => {if (page.num == 1) this.mainlist = [];let curPageData = data.list;let curPageLen = curPageData.length;let hasNext = !!data.more;        //数据返回没有更多数据了this.mainlist = this.mainlist.concat(curPageData);   // 数据拼接this.mescroll.endSuccess(curPageLen, hasNext);}).catch(() => {this.mescroll.endErr()})},

3.mescroll-mixins.js文件

// mescroll-body 和 mescroll-uni 通用// import MescrollUni from "./mescroll-uni.vue";
// import MescrollBody from "./mescroll-body.vue";const MescrollMixin = {// components: { // 非H5端无法通过mixin注册组件, 只能在main.js中注册全局组件或具体界面中注册// 	MescrollUni,// 	MescrollBody// },data() {return {mescroll: null //mescroll实例对象}},// 注册系统自带的下拉刷新 (配置down.native为true时生效, 还需在pages配置enablePullDownRefresh:true;详请参考mescroll-native的案例)onPullDownRefresh(){this.mescroll && this.mescroll.onPullDownRefresh();},// 注册列表滚动事件,用于判定在顶部可下拉刷新,在指定位置可显示隐藏回到顶部按钮 (此方法为页面生命周期,无法在子组件中触发, 仅在mescroll-body生效)onPageScroll(e) {this.mescroll && this.mescroll.onPageScroll(e);},// 注册滚动到底部的事件,用于上拉加载 (此方法为页面生命周期,无法在子组件中触发, 仅在mescroll-body生效)onReachBottom() {this.mescroll && this.mescroll.onReachBottom();},methods: {// mescroll组件初始化的回调,可获取到mescroll对象mescrollInit(mescroll) {console.log(mescroll)this.mescroll = mescroll;this.mescrollInitByRef(); // 兼容字节跳动小程序},// 以ref的方式初始化mescroll对象 (兼容字节跳动小程序)mescrollInitByRef() {if(!this.mescroll || !this.mescroll.resetUpScroll){let mescrollRef = this.$refs.mescrollRef;if(mescrollRef) this.mescroll = mescrollRef.mescroll}},// 下拉刷新的回调 (mixin默认resetUpScroll)downCallback() {if(this.mescroll.optUp.use){this.mescroll.resetUpScroll()}else{setTimeout(()=>{this.mescroll.endSuccess();}, 500)}},// 上拉加载的回调upCallback() {// mixin默认延时500自动结束加载setTimeout(()=>{this.mescroll.endErr();}, 500)}},mounted() {this.mescrollInitByRef(); // 兼容字节跳动小程序, 避免未设置@init或@init此时未能取到ref的情况}}export default MescrollMixin;

4.mescroll-more-item.js文件

/*** mescroll-more-item的mixins, 仅在多个 mescroll-body 写在子组件时使用 (参考 mescroll-more 案例)*/
const MescrollMoreItemMixin = {// 支付宝小程序不支持props的mixin,需写在具体的页面中// #ifndef MP-ALIPAY || MP-DINGTALKprops:{i: Number, // 每个tab页的专属下标index: { // 当前tab的下标type: Number,default(){return 0}}},// #endifdata() {return {downOption:{auto:false // 不自动加载},upOption:{auto:false // 不自动加载},isInit: false // 当前tab是否已初始化}},watch:{// 监听下标的变化index(val){if (this.i === val && !this.isInit) {this.isInit = true; // 标记为truethis.mescroll && this.mescroll.triggerDownScroll();}}},methods: {// 以ref的方式初始化mescroll对象 (兼容字节跳动小程序)mescrollInitByRef() {if(!this.mescroll || !this.mescroll.resetUpScroll){// 字节跳动小程序编辑器不支持一个页面存在相同的ref, 多mescroll的ref需动态生成, 格式为'mescrollRef下标'let mescrollRef = this.$refs.mescrollRef || this.$refs['mescrollRef'+this.i];if(mescrollRef) this.mescroll = mescrollRef.mescroll}},// mescroll组件初始化的回调,可获取到mescroll对象 (覆盖mescroll-mixins.js的mescrollInit, 为了标记isInit)mescrollInit(mescroll) {this.mescroll = mescroll;this.mescrollInitByRef && this.mescrollInitByRef(); // 兼容字节跳动小程序// 自动加载当前tab的数据if(this.i === this.index){this.isInit = true; // 标记为truethis.mescroll.triggerDownScroll();}},}
}export default MescrollMoreItemMixin;

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/658935.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Mac 终端可以使用yarn,但是vscode里面报错segmentation fault

Mac 终端可以使用yarn 但是vscode里面报错segmentation fault 查阅官网https://www.yarnpkg.cn/getting-started/install 在vscode运行corepack enable即可解决该问题

嵌入式-stm32-江科大-OLED调试工具

文章目录 一&#xff1a;OLED调试工具1.1 OLED显示屏介绍1.2 实验&#xff1a;在OLED显示屏的使用1.3 自己新增功能测试道友&#xff1a;今天没有开始的事&#xff0c;明天绝不会完成。 一&#xff1a;OLED调试工具 1.1 OLED显示屏介绍 学习任何一门语言就需要进行调试&#…

Spark SQL的高级用法

一. 快速生成多行的序列 需求:请生成一列数据, 内容为 1 , 2 , 3 , 4 ,5 -- 快速生成多行的序列 -- 方式一 select explode(split("1,2,3,4,5",",")); --方式二 /*序列函数sequence(start,stop,step):生成指定返回的列表数据[start,stop]必须传入,step步…

付费使用GitHub Copilot半年,我残了吗?

有些程序员担心使用AI编程助手来写程序,自己会残掉 代码都不写了,你还是程序员吗? 手生脚慢,你怕是只会写hello word了吧? 接下来我用自己的亲身经验,告诉你答案。 ---- 购买记录 ---- 2023年7月17号,我付费100美金购买了一年Copilot,下一次续费的日期是今年的7月1…

防火墙详解

一、基本定义 所谓“防火墙”是指一种将内部网和公众访问网&#xff08;如Internet&#xff09;分开的方法&#xff0c;它实际上是一种建立在现代通信网络技术和信息安全技术基础上的应用性安全技术&#xff0c;隔离技术。越来越多地应用于专用网络与公用网络的互联环境之中&a…

PYTHON蓝桥杯——每日一练(简单题)

题目 利用字母可以组成一些美丽的图形&#xff0c;下面给出了一个例子&#xff1a; ABCDEFG BABCDEF CBABCDE DCBABCD EDCBABC 这是一个5行7列的图形&#xff0c;请找出这个图形的规律&#xff0c;并输出一个n行m列的图形。 输入格式 输入一行&#xff0c;包含两个整数…

AttributeError: module ‘cv2.gapi.wip.draw‘ has no attribute ‘Text‘

解决方法&#xff1a; pip install opencv-python4.6.0.66问题原因&#xff0c;安装的版本不对&#xff08;或是安装了cv2&#xff09;

快速美化上百张图片,就是这么简单

你是否曾经遇到过需要批量处理大量图片的情况&#xff1f;比如调整图片大小、裁剪、美化等等。如果你还在一张张地处理&#xff0c;那么你一定需要一款强大的工具来帮助你完成这个任务。今天&#xff0c;我将向你介绍一款名为"固乔智创助手软件"的工具&#xff0c;它…

使用Thumbnailator遇到异常:No suitable ImageReader found for source data

使用Thumbnailator工具完成对图片进行裁剪、缩放的处理&#xff1a; Thumbnails.of(file.getInputStream()).size(width, height).keepAspectRatio(false).toOutputStream(outputStream); 如果前端传入的是webp格式或者二进制文件&#xff0c;该文件中存储内容为将图片转成ba…

浅谈Elastic Search V8版本的一些重大改进

首先说明下本文只阐述一些对我们日常使用影响比较大的更改&#xff0c;比如学的时候是Elastic Search v7.x及其以下的版本&#xff0c;但是用的时候却是Elastic Search v8.x&#xff0c;还有一种情况就是从低版本迁移到高版本&#xff0c;这两种情况的话我们都需要关注下&#…

ECMAScript新特新

1.兼容性 当低版本IE浏览器不支持ES6语法是需要引用browser.js 2.ES6新特性介绍 序号ES6ES71块级作用域变量声明关键字let和constArray.prototype.includes&#xff1a;新增了 includes 方法&#xff0c;用于判断数组中是否包含指定的元素。返回布尔值&#xff0c;表示是否包…

如何开通GitHub Copilot

GitHub Copilot 是由GitHub 和OpenAI共同开发的人工智能代码辅助工具&#xff0c;可以自动地生成高质量代码片段、上下文信息等。 通过自然语言处理和机器学习技术&#xff0c;能够通过分析程序员编写的代码、注释和上下文信息&#xff0c;自动生成代码&#xff0c;减轻程序员的…

基于ssm的法律咨询系统(有报告)。Javaee项目,ssm项目。

演示视频&#xff1a; 基于ssm的法律咨询系统&#xff08;有报告&#xff09;。Javaee项目&#xff0c;ssm项目。 项目介绍&#xff1a; 采用M&#xff08;model&#xff09;V&#xff08;view&#xff09;C&#xff08;controller&#xff09;三层体系结构&#xff0c;通过Sp…

代码随想录训练营第三十六天打卡| 435. 无重叠区间 763.划分字母区间 56. 合并区间

435. 无重叠区间 1.模仿射气球那一题的思路&#xff0c;把区间按左边界从小到大排序&#xff0c;遇到重叠区间就删除&#xff0c;同时更新区间右边界&#xff0c;保留最小的那个。当前删除最少的区间&#xff0c;从而全局达到删除区间最少。个人是AC了这道题&#xff0c;但是发…

基于node.js和Vue3的医院挂号就诊住院信息管理系统

摘要&#xff1a; 随着信息技术的快速发展&#xff0c;医院挂号就诊住院信息管理系统的构建变得尤为重要。该系统旨在提供一个高效、便捷的医疗服务平台&#xff0c;以改善患者就医体验和提高医院工作效率。本系统基于Node.js后端技术和Vue3前端框架进行开发&#xff0c;利用其…

Django模型(七)

一、聚合与分组查询 1.1、准备数据 class Cook(models.Model):"""厨师"""name = models.CharField(max_length=32,verbose_name=厨师名)level = models.IntegerField(verbose_name=厨艺等级)age = models.IntegerField(verbose_name=年龄)sect …

图像旋转_题解

【题解提供者】吴立强 解法 思路 设旋转后的图像为 B B B&#xff0c;那么有 A i , j B j , n − i A_{i,j} B_{j,n-i} Ai,j​Bj,n−i​ 成立&#xff0c;故 i , j i,j i,j 互换且 i i i 倒序输出即可。 代码展示 #include <iostream> using namespace std;co…

《二叉树》——3(层序遍历)

目录 前言&#xff1a; 层序遍历: 解析&#xff1a; 前言&#xff1a; 本文主讲链式二叉树的层序遍历&#xff0c;在前面的张篇blog我们初步实现了链式二叉树递归部分的内容&#xff0c;对于递归算法的学习和思维方式我们仍然需要不断加强&#xff0c;所以将对链式二叉树进行…

Python与ArcGIS系列(二十)GDAL之合并shp和geojson要素图层

目录 0 简述1 代码实现2 结果展示0 简述 Shp格式是GIS中非常重要的数据格式,主要在Arcgis中使用,但在进行很多基于网页的空间数据可视化时,通常只接受GeoJSON格式的数据,众所周知JSON是利用键值对+嵌套来表示数据的一种格式,以其轻量、易解析的优点,被广泛使用与各种领域…

Flink与Redis集成:自定义连接器实现维表创建与数据汇入

目录 一、问题引入 二、Redis创建维表 2.1 预期效果展示 2.2 设计要点