uniapp mescroll注意事项

1.初始化mescroll的时候，包括以后

调用@dowm，就一定会调用一次@up
所以我一般在@down中清除list数据，在@up中获取数据
@up中 page.num==1必须判断，这里获取第一个数据

2.mescroll最基本的配置

tempale:

 <mescroll-uni ref="mescrollRef" @init="mescrollInit" 这个不用设置@down="downCallback" @up="upCallback" :down="downOption" :up="upOption" :fixed="false" :height="listHeight + '%'">  动态设置高<view class="main-list-item" v-for="(item,index) in list"             :key="index">{{index}}</view></mescroll-uni>

js:data()

return {list:0,show:true,downOption: {use: true, // 是否启用下拉刷新; 默认trueauto: true, // 是否在初始化完毕之后自动执行下拉刷新的回调; 默认truetextLoading: '加载中 ...' // 加载中的提示文本},upOption: {use: true, // 是否启用上拉加载; 默认trueauto: false, // 是否在初始化完毕之后自动执行上拉加载的回调; 默认truepage: {num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始size: 10, // 每页数据的数量time: null // 加载第一页数据服务器返回的时间; 防止用户翻页时,后台新增了数据从而导致下一页数据重复;},noMoreSize: 10, // 如果列表已无数据,可设置列表的总数量要大于等于5条才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看offset: 80, // 距底部多远时,触发upCallback(仅mescroll-uni生效, 对于mescroll-body则需在pages.json设置"onReachBottomDistance")textLoading: '加载中 ...', // 加载中的提示文本textNoMore: '-- END --', // 没有更多数据的提示文本},listHeight:0}

js:methods:

         /*下拉刷新的回调 */downCallback() {// 下拉刷新的回调,默认重置上拉加载列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )setTimeout(()=>{this.list = [];this.mescroll.resetUpScroll()},1000)console.log("downCallback");},/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */upCallback(page) {//联网加载数据try{setTimeout(()=>{if(page.num > 1){this.list = this.list + 10;}this.mescroll.endByPage(10, 3); //必传参数(当前页的数据个数, 总页数)},1000)//设置列表数据if(page.num == 1) {this.list = 10; //如果是第一页需手动 初始化数据}console.log("upCallback",page.num);}catch{this.mescroll.endErr();}},

js:onLoad()

动态设置高度height,需要重新渲染

this.show = false;this.$nextTick(() => {this.show = true;
})

uniapp mescroll注意事项相关推荐

uni-app 日历、提醒事项添加日程和提醒（ios）
uni-app 日历.提醒事项添加日程和提醒(ios):https://ext.dcloud.net.cn/plugin?id=5203
uniApp开发小程序(7)使用mescroll配置上啦下拉的样式，以及分类页面的配置
使用第三方 mescroll 下拉刷新组件,使用 [wxs+renderjs实现]高性能的下拉刷新上拉加载组件.支持uni-app的下拉刷新和上拉加载的组件,支持原生页面和局部区域滚动. mescro ...
uniapp微信小程序传参方法和注意事项
传参方法: uni-app官网https://uniapp.dcloud.io/tutorial/vue-components.html#概念注意事项: 在vue项目中,如果子组件里的props名字 ...
【iOS内购支付】Uniapp拉起苹果内购支付注意事项、实现步骤以及踩过的坑（手把手教程）
前言 Hello!又是很长时间没有写博客了,因为最近又开始从事新项目,也是第一次接触关于uniapp开发原生IOS应用的项目,在这里做一些关于我在项目中使用苹果内购支付所实现的方式以及要注意的事项,希 ...
uni-app打包pc web H5 wap项目注意事项
近日做了一个公司的管理系统wap站,我开发是使用的UNI-APP + color UI,下面详细说说打包上线注意的相关事项. 右击项目目录选择发行 > 网站PC web 或手机H5(仅适用u ...
自学uni-app （7）项目搭建的详细步骤、注意事项和遇到的问题
跨平台框架uni-app 步骤一.需求分析二.功能分析三.多页面应用搭建 1.创建新页面 2.注册新页面四.添加组件 1.添加组件 2.导入组件 3.注册组件 4.使用注册的组件五.基本布局 ...
前端小白006：关于uniapp小程序背景音频和音频一些注意事项
前端小白006:关于uniapp小程序背景音频和音频一些注意事项全局唯一的背景音频权限申请背景音频和音频同时存在解决办法(个人推测) 个人结语全局唯一的背景音频背景音频好处就是可以后台播放 ...
uni-app中使用lodash_uniapp适配到微信小程序注意事项
uniapp我也是第一次玩,官网说可以一次编码,多端发布.说实话,一开始我是怀疑的.不过,走到现在,app已经开发好.h5页面也接近完成.现在要生成小程序了,想想就很激动.. 在hbuilderx上运 ...
关于阿里云与mangoDB的关系，以及uni-app基于阿里云打包H5以及app的讲解及注意事项
目录被称为全球领先的阿里云阿里云数据库与mongoDB的关系什么是mongoDB 阿里云与mongoDB达成战略合作伙伴关系的意义什么是uni-app 优点本地云函数的上传关于H5打包并打 ...
uniapp开发抖音小程序注意事项
1.抖音小程序图片名不能带空格,不然真机调试的时候,图片查找不出来 2.抖音小程序需要登录按钮,需要登录页如有其它注意事项,继续更新

uniapp mescroll注意事项

动态设置高度height,需要重新渲染

uniapp mescroll注意事项相关推荐

最新文章

热门文章