uniapp的scroll-view的自定义下拉刷新后滚动盒子置顶

最新推荐文章于 2023-12-05 18:27:57 发布
最新推荐文章于 2023-12-05 18:27:57 发布
阅读量278 收藏
点赞数
分类专栏： scroll-view 文章标签： uni-app vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_54097544/article/details/131300889
版权

下拉刷新后出现问题如下

 

 自定义下拉刷新后，滚动盒子往上顶，没有刷新的时候，显示正常

 解决方法如下贴图

 

WQ_1128
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
uniapp scroll-view 横向和纵向滚动 带滚动回调
09-10
Uniapp 平台兼容性 全端支持 引入组件即可
微信小程序scroll-view下拉刷新(附带下拉刷新效果)
11-19
微信小程序scroll-view下拉刷新(附带下拉刷新效果) 使用说明 https://blog.csdn.net/u012308481/article/details/102619511
微信小程序 - scroll-view组件之上拉加载下拉刷新（解决上拉加载不触发）
Qianmoer的博客
08-02 5618
/ 自己定义刷新事件 var self = this;// 自己定义刷新事件 self . setData({triggered : true , // 将triggered属性设置为true，表示下拉刷新已经被触发 }) wx . showToast({title : "刷新成功" }) setTimeout(function() {triggered : false , // 将triggered属性设置为false，表示下拉刷新已完成 }) console . log('下拉刷新已完成')
关于scroll-view和下拉刷新的那些坑
03-29
众所周知，小程序不支持操作dom元素，但最近公司做了这样的一个功能，滚动scrollview 标签，当页面滚动到一定的高度时，给页面一个固定导航，并且还要执行下拉加载的方法。由于在官方文档的说明中，使用竖向滚动时，需要给<scroll>一个固定高度，通过 WXSS 设置 height。但是设置了高度的时候，下拉加载的方法就不好使了。这时候我们要根据滚动的高度来设置不同的高度，部分代码如下： <scroll-view scroll-y="true" style="height: {{scrollViewHeight}}rpx;" bindscroll="scrollviewScrol
uniapp下拉置顶
weixin_44952708的博客
05-17 784
onLoad() { let that = this // 获取当前dom与顶部之间的距离 const query = uni.createSelectorQuery() query.select('#delicacy').boundingClientRect() query.exec(function(res){ that.menuTop = res[0].top }) }, // 监听滚动 onPageScroll(.
uni-app顶部导航栏 下拉滑动固定到屏幕顶部
小猫爪子
11-24 3848
示例图片 代码 <template> <view style="display: flex;flex: row; position:fixed; left: 0; width: 100%; top: 30;z-index: 999;"> <scroll-view scroll-x class="bg-white nav" scroll-with-animation :scroll-left="scrollLeft"> <view class="cu-i
uniapp scroll-view回到顶点
狗狗狗亮的博客
05-06 674
组件里有个scroll-top属性，用来设置竖向滚动位置， 但发现直接设置数值的时候，并不生效，比如设为0. 官方例子如下 这里他是先监听滚动位置，在goTop里赋值给scrollTop，然后再将scrollTop的值设为0。 复制代码去用，这种scroll事件，会不断的改变data里的数据，真机没试过，但是在模拟器上会卡。 但是直接使用this.scrollTop = 0 并不会回到顶点。 然后按这个例子看，应该是要做一个值的改变，不能让新的值等于旧的。 两种办法： 1： this.scrollTo
uni-app 滑到一定位置固定某个元素在顶部 吸顶解决方案 APP端 H5端
织网的博客
08-26 5715
uni-app 滑到一定位置固定某个元素在顶部 <template> <view class="content"> <view style="width: 100%; height: 200rpx; border: red solid 1rpx;">导航栏上面内容</view> <view class="switchSign"></view> <view class="tagTop" :class="{ 'topfi
小程序scroll-view自身下拉刷新的实现分享
03-29
其实也比较简单，首先自定义组件下的 scroll-view 高度设为比组件本身高出 40px，即头部显示刷新文字的区域高度，然后让 scroll-view y轴偏移 -40px，这样刷新文字区域就在顶部看不到了，具体css如下：   .scroll-...
微信小程序scroll-view组件实现滚动动画
08-28
主要为大家详细介绍了微信小程序scroll-view组件实现滚动动画，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
自定义顶部导航，自定义下拉刷新
qq_37273844的博客
08-17 248
效果图： 记住在刷新完成回调：this.refreshView.stopPullRefresh(); git链接: master.
uniapp：scroll-view触底加载、下拉刷新、返回顶部
FIRE
05-18 2603
选择uniapp自带的下拉刷新还是scroll-view看场景。场景：从首页跳转到别的页面再返回来的时候，直接返回首页顶部。顺便解决了ios下拉，顶部和底部有白屏的问题。
踩坑记录：uniapp中scroll-view的scroll-top不生效问题；
最新发布
qq_44776454的博客
12-05 1848
踩坑记录：uniapp中scroll-view的scroll-top不生效问题 的详细解决思路
uniapp 操作 scroll-view 切换滚动条不返回顶端
Kerwin__li的博客
01-13 972
我们在给 scroll-view 绑定了 scroll-top 属性后，通过事件处理函数 将scroll进行赋值，来达到每次切换可以返回顶部。每次赋值的时候赋值不同的数据 就可以解决这个问题了。
微信小程序scroll-view组件之上拉加载下拉刷新（解决上拉加载不触发）
学如逆水行舟，不进则退！
07-12 6814
最近在学习微信小程序，有一个功能就是做一个商品列表分页限流然后实现上拉加载下拉刷新功能，遇到了一个使用scroll-viwe组件下拉刷新事件始终不触发问题，网上很多说给scroll-view设置一个高度啥的就可以解决，有些人设置了高度也不触发，所以在下就研究了一波这个scroll-view的触发机制。
uni-app：顶部标题栏的部分相关设置（标题更改， 加载效果）
weixin_46001736的博客
09-26 4302
uni-app：顶部标题栏的部分相关设置（标题更改， 加载效果）
微信小程序下拉刷新和回到顶部的实现
weixin_46077222的博客
10-11 462
微信小程序下拉刷新和回到顶部的实现
uni-app顶部下拉选择框自定义（手写tabList)
m0_71231013的博客
12-27 1062
这边建议大家去我的github仓库中拉取，然后进行修改 把我这个当作基础框架 这样比较简单 也不需要自己造轮子。大家可以自己定义去修改 然后里面的内容就在下面的3个数组去修改就可以了 点击事件为。里面的内容也有对应的高亮切换效果 高亮颜色样式可自己外部传入。点击不同的tabList展示不同的盒子 盒子做了动画效果。当我们点击遮罩的时候这个弹框也会自动关闭。如若搬运，请挂上我的博客链接，创作不易。
小程序-uni-app：scroll-view/区域滚动、下拉刷新、上拉加载更多
snowball的博客
07-24 5909
开发环境：小程序、uniapp + vue3 + ts实现功能：列表页面实现，区域滚动、下拉刷新、上拉加载更多，效果如图：正常：下拉刷新：
uniapp中scroll-view自定义下拉
09-04
在uni-app中，你可以通过自定义组件来实现scroll-view的自定义下拉效果。下面是一个简单的示例： 1. 首先，创建一个自定义组件，比如命名为CustomScrollView。 在CustomScrollView.vue文件中，可以定义一个容器元素和一个下拉刷新的提示元素，如下所示： ```html <template> <view class="custom-scroll-view"> <view class="refresh-indicator" v-show="showRefreshIndicator"> <!-- 自定义下拉刷新的内容 --> <!-- ... --> </view> <scroll-view class="scroll-view-content"> <!-- scroll-view的内容 --> <!-- ... --> </scroll-view> </view> </template> <script> export default { data() { return { showRefreshIndicator: false, // 是否显示下拉刷新提示 startY: 0, // 记录开始滑动的位置 }; }, methods: { onTouchStart(e) { this.startY = e.touches[0].clientY; }, onTouchMove(e) { const currentY = e.touches[0].clientY; const distance = currentY - this.startY; if (distance > 0 && this.$refs.scrollView.scrollTop === 0) { // 下拉到顶部了，显示下拉刷新提示 this.showRefreshIndicator = true; } else { // 没有下拉到顶部，隐藏下拉刷新提示 this.showRefreshIndicator = false; } }, onTouchEnd() { if (this.showRefreshIndicator) { // 触发下拉刷新事件 this.$emit('refresh'); } this.showRefreshIndicator = false; }, }, }; </script> <style scoped> .custom-scroll-view { position: relative; height: 100%; } .refresh-indicator { position: absolute; top: -50px; /* 下拉刷新提示的高度 */ left: 0; right: 0; height: 50px; /* 下拉刷新提示的高度 */ } .scroll-view-content { height: 100%; } </style> ``` 2. 在使用CustomScrollView组件的页面中，可以引入该组件并监听其下拉刷新事件，如下所示： ```html <template> <view> <!-- ... --> <custom-scroll-view @refresh="onRefresh"> <!-- ... --> </custom-scroll-view> </view> </template> <script> import CustomScrollView from '@/components/CustomScrollView'; export default { components: { CustomScrollView, }, methods: { onRefresh() { // 处理下拉刷新逻辑 // ... }, }, }; </script> ``` 通过以上步骤，你就可以实现自定义下拉刷新效果了。当用户在CustomScrollView组件内部下拉到顶部时，会触发refresh事件，你可以在onRefresh方法中处理下拉刷新的逻辑，例如发送网络请求获取最新数据，然后更新页面内容。 需要注意的是，以上示例是基于uni-app框架的实现方式，如果你使用的是其他框架或原生开发，具体实现方式可能会有所不同。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值