mescroll-uni上拉加载失效

最新推荐文章于 2023-05-22 22:06:07 发布

jueshileqishou01

最新推荐文章于 2023-05-22 22:06:07 发布

阅读量1.2k

点赞数 2

文章标签： vue.js 前端 javascript uni-app Powered by 金山文档

本文链接：https://blog.csdn.net/jueshileqishou01/article/details/129728179

版权

mescroll-uni上拉加载失效，修改代码，HbuilderX自动同步代码后，又可以正常使用==

问题很奇怪！！！

原因：

mescroll-uni没有正确的渲染导致的。

mescroll-uni的高度是通过动态计算的，

当mescroll-uni已经渲染完成，高度才被计算出来，也就是说mescroll-uni采用的默认高度，内部压根不是我设置的值，只不过是页面看上去高度是我设置的那个

解决：

既然高度是通过计算的，那么就要计算完成后，再渲染mescroll-uni

代码：

<mescroll-uni v-if="scrollHeight > 0" :style="'height:'+ scrollHeight +'px;'" >
</<mescroll-uni >

当scrollHeight>0,才显示，这个时候才是真正的正确的渲染出来了

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

jueshileqishou01

关注关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

mescroll-uni_1.3.3.zip

01-27

在uniapp项目中，我们可以通过引入Mescroll来增强应用的用户体验，尤其是对于内容丰富的列表页面，它的下拉刷新和上拉加载功能可以显著提高用户的操作效率。集成Mescroll的第一步是下载最新的版本，这里我们使用的...

关于Jeecg uniapp 使用 mescroll 无法上拉加载

qidixiaoxian的博客

04-26

1439

关于Jeecg uniapp 使用 mescroll 无法上拉加载修改/common/mixin/Mixin.js 在下拉刷新后hasNext为true /** * 下了列表混入 * @type {{data(): *, methods: {upCallback(*): void, downCallback(): void, loadList(*): void}}} */ const ListMixin = { data() { return { downOption: { au

1 条评论您还未登录，请先登录后发表或查看评论

解决mescroll固定位置上拉加载无效果？真的只需一步

weixin_44995391的博客

04-20

5668

前言在开发项目时遇到了mescroll上拉加载不刷新的问题如何解决，简单记录一下自己的解决过程。一、官网的解决方法先理解mescroll触发上拉的原理: mescroll 是 div 原生的 overflow: auto 滚动. 与 iScroll和better-scroll通过js模拟列表滚动不同, mescroll的性能更优,兼容性更好. 我们知道: 当一个div的内容超过这个div设置的高度时, 就会出现滚动条. 此时上下滑动即可触发div的onScroll事件, 从而能够监听列表如果滚动到

【html+Vue】使用cdn引入的mescroll插件，解决无法触发上拉下滑效果的问题

llz199607的博客

09-17

2072

最近因为手头项目与vuecli3存在兼容性问题，于是迫不得已，把每个vue page页面用html + vue的传统模板进行重构（就像官网示例那样，通过<script> cdn引入vue ，使用new Vue({})的方式 ) 。但是在重构mescroll列表加载插件时遇到了问题。因为不是在vuecli中，mescroll-vue组件就不能在html里直接通过import来使用了。经过研究和测试，有如下两种解决办法一、使用vue-http-loader强制...

关于mescroll 无法下拉刷新,上拉加载的问题

最新发布

09-08

首先，mescroll-nui是基于MeScroll库的一个uni-app插件，MeScroll是一个高性能、易用的下拉刷新、上拉加载插件，适用于各种滚动容器。在uni-app项目中引入mescroll-nui，可以为你的应用提供流畅的刷新和加载体验，...

带吸附效果顶部导航（支持左右滑，下拉刷新，上拉加载更多，返回顶部，加载动画）.zip

07-09

这种导航栏通常位于应用屏幕的顶部，具有多种交互功能，如左右滑动切换页面、下拉刷新、上拉加载更多内容以及快速回到页面顶部的能力。在本案例中，我们关注的"tab_wy"文件可能是一个实现此类功能的示例代码或者资源...

11-14

内容概要：uniapp实现下拉刷新及上拉加载更多的完整代码（app，H5，小程序均可使用），下载后解压，使用HBuilder导入项目即可运行。适合人群：少许编程基础人员即可. 适应场景：需要使用uniapp开发移动端时，涉及...

【z-paging下拉刷新、上拉加载】示例demo

07-26

【配置简单】仅需两步（绑定网络请求方法、绑定分页结果数组）轻松完成完整下拉刷新，上拉加载更多功能。【低耦合，低侵入】分页自动管理。在page中无需处理任何分页相关逻辑，无需在data中定义任何分页相关变量，...

记录一次关于flex 跟 mescroll的配合使用

qq_41304029的博客

04-25

242

view.list自动占满剩余高度（设置为flex-group:1），其中mescroll设置为fixed:false 希望自动占满list，但是实际上mescroll 高度最终没有按照自己的意愿跟list高度一致，而是由内容撑开了。其中它的子元素 input_box 不能自动增高，也就是flex-group为0。我将empty的v-if 修改为v-show 后可以实现了，这里小声逼逼几句，comment 评论区占整个屏幕高度 50vh，并且设置为弹性盒子容器。

uniapp内使用 mescroll

糜家智の博客

05-22

3714

在使用uniapp开发项目的过程中，在很多场景里都需要下拉刷新和上拉加载，而则是一个非常精致的下拉刷新和上拉加载 js 框架。mescroll是在 H5端运行的下拉刷新和上拉加载插件，时代变化太快, 作者已转向维护 mescroll 的 uni 版本了mescroll的uni版本, 是专门用在uni-app的下拉刷新和上拉加载的组件, 支持一套代码编译到iOS、Android、H5、小程序等多个平台。

mescroll-uni组件上拉底部一直显示加载中..(mescroll-uni的使用)

xxx

07-12

2661

官网mescroll-uni

uniapp mescroll注意事项

jueshileqishou01的博客

03-02

2754

uniapp mescroll

uniapp使用mescroll-uni只实现下拉刷新，不实现上拉加载

LzzMandy的博客

06-28

3015

mescroll-uni官网地址：http://www.mescroll.com/uni.html?v=20200315 只实现下拉刷新，不实现上拉加载，在data中设置upOption如下： upOption: { use: false } 参考代码如下： <template> <mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up=.

uni-app 上拉加载函数 onReachBottom 不触发

Smile0L0的博客

05-14

8333

记一次问题解决记录。问题：uni-app 上拉加载函数不触发。首先我已经在 pages.json 文件中配置了 enablePullDownRefresh 为 true，且配置正确。 { "path": "pages/list/list", "style": { "enablePullDownRefresh": true } }, 查资料之后，有一种说法是onReachBottomDistance 这个值的设置太小，会导致不触发函数，建议设置为 150。onReachBottomD.

mescroll-uni上拉加载不出数据

LzzMandy的博客

06-29

3209

复现场景：上拉加载，滚动到底，触发了后端请求，也成功返回数据，但是页面静止原因：经排查，页面布局正确，每次触底都请求回了数据，要展示的数据也更新了，但页面没有更新，主要原因是页面没有刷新解决方法：深copy数据详见https://blog.csdn.net/LzzMandy/article/details/107002238 ...

mescroll-uni使用

09-02

mescroll-uni是一个基于uni-app框架的下拉刷新和上拉加载的插件。它提供了一种简单、灵活的方式来实现页面的滚动加载效果。使用mescroll-uni，你需要按照以下步骤进行操作： 1. 首先，你需要在你的uni-app项目中安装mescroll-uni插件。你可以使用npm命令来安装，执行以下命令： ``` npm install mescroll-uni ``` 2. 在你的页面中引入mescroll-uni插件。可以在需要使用滚动加载的页面的`<template>`中引入mescroll-uni的组件，例如： ``` <template> <view> <mescroll-uni></mescroll-uni> </view> </template> ``` 3. 在你的页面的`<script>`中引入mescroll-uni组件，并配置相应的参数。例如： ``` <script> import MescrollUni from 'mescroll-uni' export default { components: { MescrollUni }, data() { return { mescrollOptions: { down: { use: true, callback: this.downCallback }, up: { use: true, callback: this.upCallback } } } }, methods: { downCallback() { // 下拉刷新的回调函数 // 执行刷新逻辑 }, upCallback() { // 上拉加载的回调函数 // 执行加载更多逻辑 } } } </script> ``` 4. 根据你的需求，实现对应的下拉刷新和上拉加载的逻辑处理。在`data`中配置`mescrollOptions`对象，通过`down`和`up`属性来配置下拉刷新和上拉加载的回调函数。这样，你就可以使用mescroll-uni插件实现下拉刷新和上拉加载的效果了。具体的配置和使用方法可以参考mescroll-uni的官方文档。