微信中使用scroll-view实现滚动页面，上拉加载更多频繁回到顶部（避坑scroll-y滚动页面中，在顶部设置了fixed的搜索框中文字在iphone设备中掉出页面外的问题）

最新推荐文章于 2024-09-26 14:59:32 发布
最新推荐文章于 2024-09-26 14:59:32 发布
阅读量1k 收藏 1
点赞数 1
分类专栏： 小程序开发总结 文章标签： scroll-view 小程序 iphone中fixed失效
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012439689/article/details/89139109
版权

问题出现于一个滚动列表页，在顶部设置了fixed样式的搜索框，结果测试过程中，搜索框中的文字在视图滚动时会掉到页面外面来，为了解决这个问题，采用了以下的方式

（1）调整样式，之前的fixed搜索框和滚动列表区域均使用absolute在页面进行定位并设置不同的top值分隔开来，列表区域不再设置scroll-y样式，改用小程序原生的scroll-view滚动视图实现滚动列表

（2）这样的解决办法需要处理滚动问题，scroll-view中如果没有使用分页，可以给页面设置scroll-top=值，回到顶部时设置该值为0，但是如果使用分页的清空的时候，设置该值之后，可能造成上拉加载更多后页面反复回到顶部，影响用户体验

【解决办法】不使用scroll-top=0回到顶部的方式，为scroll-view组件添加wx:if=“rerender“，先设置reRender=false再设置reRender=true，让滚动列表重新绘制实现回到顶部

蛋蛋fighting哈湫
关注
专栏目录
【微信小程序】—— 为什么上拉加载后会返回顶部
LimonSea的博客
08-20 2531
我下面的代码是没有问题的，确实每次都能加载到，但是都会重回顶部 注：下面的代码不能直接用，有一些变量没有贴上来 //上拉加载下一页商品 onReachBottom: function() { console.log('--------上拉加载--------'); this.getGoods(page); }, //刷新列表 getGoods: functio...
微信小程序scroll-view重新加载数据，滚动条回到顶部
guairena的博客
05-05 4320
问题： 微信小程序切换了筛选条件后，列表滚动条没有滚动回顶部。 场景： wepy+原生 通过<scroll-view>实现列表滚动 方案： 1、通过wx:if设置列表元素的展示隐藏 通过给<scroll-view wx:if="{{flag}}"> 设置显示隐藏，去重新加载列表。直接设置无法生效，滚动条依旧保留在上次滚动的地方；加一个延迟，放在定时器里去setTimeout(() => { this.flag = true }, 100) 设置flag的值。目的是等到页面渲染完
微信小程序-scroll-view横向滚动和上拉加载
03-29
最近刚好在集中scroll-view的文章和跳坑指南；今天介绍微信小程序中scroll-view实现横向滚动和上拉加载的实现及需要注意的地方。先看最终效果。横向滚动1.设置滚动项display：i ...       最近刚好在集中scroll-view的文章和跳坑指南；  今天介绍微信小程序中scroll-view实现横向滚动和上拉加载的实现及需要注意的地方。  先看最终效果。 (此图片来源于网络，如有侵权，请联系删除! )   横向滚动 1.设置滚动项display：inline-block;  2.设置滚动视图容器white-space: nowrap;  3.滚动项不要用float 为
第三章 表格布局与表单交互
最新发布
2401_84313276的博客
09-26 813
‌：使用。
当小程序上拉加载时，页面上拉加载一次，滚动一次到顶部（同时有水平滑动和竖直滑动）
qq_37273844的博客
08-24 331
<scroll-view scroll-x="true">内容</scroll-view> js onReachBottom() { this.getList() }, getList(){ let res=['内容'] this.data.list.concat(res) this.setData({ list:this.data.list.concat(res) }) ...
解决better-scroll下拉加载更多后，自动滚动到顶部的问题
weixin_48008551的博客
03-23 1258
当监听数据更新后，再次触发初始化，页面列表自动滚动到顶部，要想保持原位置，禁止当前滚动即可。 这里只会这个方法，如果有更好的方法，欢迎解答。 官方文档里有stop方法 stop() 参数：无 返回值：无 作用：立即停止当前运行的滚动动画。 init() { this.listScroll =new BScroll('.wrapper',{ probeType: 3, startY:true, c
微信小程序上拉加载的时候为什么第二页又回到了顶部
肖肖肖丽珠的博客
10-10 672
而我的loading每次在请求接口的函数的时候都会重新赋值。这就导致了这个判断wx:if="{{saleLists.length>0&&!loading}}"在加载第二页的时候又先不显示再显示。直接wx:if="{{saleLists.length>0}}"就行了。正确的写法应该是把这个loading的判断去掉。找了半天原因是我的判断写错了。
微信小程序scroll-view组件实现滚动动画
08-28
在本文中，我们将详细介绍如何使用 scroll-view 组件实现滚动动画，并提供了一个完整的示例代码。 知识点1：scroll-view 组件的基本使用 scroll-view 组件是微信小程序中的一种常用的滚动容器组件，可以用来实现...
微信小程序scroll-view实现字幕滚动
01-03
本文实例为大家分享了微信小程序scroll-view实现字幕滚动的具体代码，供大家参考，具体内容如下 需求： 实现框内的文字自下而上的自动循环滚动。 解决方案： demo:字幕滚动 通过控制滑动条来完成字幕滚动，通过...
微信小程序scroll-view实现滚动穿透和阻止滚动的方法
10-18
在微信小程序开发中，`scroll-view` 是一个非常重要的组件，用于实现页面的滚动效果。在某些场景下，我们可能需要实现滚动穿透或者阻止`scroll-view`的滚动，以达到特定的交互效果。本文将详细介绍如何在微信小程序...
解决NestedScrollView、ScrollView加载完自动滑动至顶部或底部问题
陈立的博客
01-06 1858
很多小伙伴在使用以上两个布局时都会遇到切换用NestedScrollView 或ScrollView作为外层布局的页面时，内容自动上移了。上移的原因是NestedScrollView或ScrollView或自动滚动到获取了焦点的child view的位置。NestedScrollView、ScrollView内容上移原因。通过让其获取焦点来解决该问题。
自定义拉到顶部和底部具有弹性ScrollView，支持下拉上拉弹性
12-20
自定义拉到顶部和底部具有弹性ScrollView，支持下拉上拉弹性
ScrollView加载完数据后自动滑动到底部
周益龙的专栏
01-16 3471
之前一直纠结一个问题就是通过代码往ScrollView加入一些需要显示的view，通过addView来加入view，由于addView是通过队列消息的模式加入的，如果仅仅在之后加入scrollview.fullScroll(View.FOCUS_DOWN)，无法达到效果。 而使用 scrollview.post(new Runnable() {
scroll-view回到顶部的使用（scroll-top）
weixin_69666355的博客
03-27 4799
scroll-view遇到的坑！加载分页数据的时候再次调用搜索接口会多调用一次触底接口！：分页的时候调用了两次触底 故：强行每次搜索的时候渲染页面都强行让滚动条回到顶部。2.初始值设置（注意：不要设置成0，不然无效啊）1.在标签上添加 scroll-top。
微信小程序开发系列（三十三）·如何通过scroll-view实现上拉加载和下拉刷新
时光の尘的博客
03-17 5058
当用户下拉刷新时，会触发名为 refreshHandler 的处理函数来执行相应的逻辑，比如加载最新数据或者其他操作。当 refresher-triggered 的值为 true 时，表示下拉刷新已经被触发，可以执行相应的刷新操作。当滚动视图滚动到设定的阈值（由 lower-threshold 决定）时，触发触底事件，然后会调用名为 getMore 的处理函数来执行相应的逻辑。在滚动视图中，当距离底部的距离小于或等于 lower-threshold 设置的值时，会触发触底事件。
微信小程序-scroll-view实现上拉加载和下拉刷新
weixin_42284031的博客
06-20 1527
scroll-view组件通过自身一些属性实现上拉加载的功能。lower-threshold=“100"属性表示距离底部多少px就会实现触发下拉加载的事件。类似于在.json文件里面配置"onReachBottomDistance”: 100bindscrolltolower="getMore"属性是监听下拉加载的所绑定的方法。enable-back-to-top属性设置为ture表示点击状态栏或者标题栏回到顶部位置。
小程序scroll-view上拉加载更多,下拉刷新数据
qq_39389646的博客
04-28 998
小程序scroll-view上拉加载更多,下拉刷新数据 方法一 <scroll-view id="dialog_list" scroll-y="{{true}}" scroll-with-animation='{{true}}' scroll-top='{{scroll_top}}' scroll-into-view="{{toView}}" scroll-with-animation="t...
解决scrollview窗口滚动条拖动到下端却回到顶端的问题
zxy6681的专栏
09-13 2148
void CMyView::OnVScroll(UINT nSBCode, UINT nPos, CScrollBar* pScrollBar) { // TODO: Add your message handler code here and/or call default SCROLLINFO scrollinfo; if((SB_THUMBTRACK==nSBCode)||(SB_THUMB
小程序实现上拉加载下拉刷新
m0_53912016的博客
05-29 133
效果图 代码 wxml <scroll-view scroll-y style="height:100vh;" bindscrolltolower="bindDownLoad" bindscrolltoupper="topLoad" bindscroll="scroll"> <view wx:for="{{list1}}" wx:key="id" class="main"> <view>{{item.ansCont}}</view>
微信小程序scroll-view锚点链接滚动实现详解
本文主要探讨了在微信小程序中如何实现scroll-view组件的锚点链接滚动跳转功能。通过示例代码和解释，帮助开发者理解如何在scroll-view中绑定事件和设置属性，以便用户点击列表项时能平滑滚动到对应的目标内容。 在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值