微信小程序scroll-view的scroll-top无效

最新推荐文章于 2023-11-03 11:23:16 发布
最新推荐文章于 2023-11-03 11:23:16 发布
阅读量936 收藏
点赞数
文章标签： 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/q879936814/article/details/112553385
版权

分析原因，滚动需要内容的高度大于盒子的高度，之前设置的高度一致。
修改scroll-view的height即可。

<scroll-view scroll-x scroll-y scroll-left="500" scroll-top="{{top}}" style="height: 1260rpx">
        <image src="./img/map.jpg"></image>
      </scroll-view>
codeMing_
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
小程序笔记：scroll-view中设置了scroll-top为0置顶无效
qq_38337245的博客
09-23 960
场景：比如一个订单详情里面有评价输入区域，评价完成之后，重新获取订单详情接口页面的高度会发生一些改变，我们就要设置页面滚回到顶部 标签： <scroll-view scroll-top="{{scrollTop}}" bindscroll="`bindscroll`"></scroll-view> data： scrollTop: 0, // 滚动到顶部 oldScrollTop: 0, // 滚动位置 滚动方法： bindscroll(e){ // 监听页面滚动 th
微信小程序scroll-view组件scroll-top设置后无效
qq_36016136的博客
07-26 1742
引用scroll-view视图容器 <scroll-view class="right-content" scroll-y scroll-top="{{backTop}}">内容</scroll-view> 在js文件中定义backtop变量 data: { // 设置每次切换分类从头开始浏览 backTop: 0 } 做了以上的工作后发现并没有像预期的一样，后来看了网上的几篇文章，说是在backTop的值没改变的情况下，微信小程序自带的框架出于性能的考
微信小程序scroll-view组件设置 scroll-top无效问题解决
分享互联网的有趣知识~
12-29 4183
在实际运用过程中，发现设置了scroll-top无效，滚动条位置并没有发生变化，是因为微信小程序的官方框架处于性能考虑，初始化设置scroll-top不会重新渲染页面，需要将scroll-top的是放在一个事件内执行才可以生效。
微信小程序scroll-top不生效问题
pengju12345的博客
05-24 1300
昨天我在写微信小程序的聊天界面遇到的问题 当我进入页面的时候我需要把我的聊天记录定位到我的存储聊天记录框的最底下所以我需要给我的scroll-top传入一个动态的数值让他初始化的时候，发送信息的时候，接收消息的时候都要在最底下然而这个时候出现了问题： 我的html <scroll-view style="height: {{height-50}}px;" scroll-y scroll-top="{{scrollTop}}" > 我的js //生命周期函数 liaotianjil
关于小程序 scroll-view中设置scroll-top无效 和小说图书阅读进度条小案例
weixin_30316097的博客
08-07 451
在最近的项目有做到关于小说阅读的进度条功能，其中用到scroll-view和slider组件，发现scroll-view中的scroll-top在设置值后无效，出现这种情况大概是以下几种问题： 1.scroll-view的高度需要设置固定的值，比如全屏可以设置：height:100vh; 2.不可以同时设置scroll-into-view和scroll-top（scroll-left）属性，因...
微信小程序中的scroll-view中的scroll-top属性设置失效解决方案
qq_37046592的博客
05-26 5387
微信小程序中设置竖向滚动时，如下所示： 当我们期望通过上一页/下一页或者回到顶部之类的按钮改变滑动位置时，有时候会发现没有任何效果。不知道是bug还是微信小程序设计团队为了减少效率的浪费，当srcoll-top的值在改变前后是一致的话，则不会触发任何效果。所以为了解决这种情况，我们可以将初始值设为-1，改变值设为0，如下所示： 这样我们就能获得想要的效果。 ...
微信小程序scroll-view组件实现滚动动画
08-28
微信小程序 scroll-view 组件实现滚动动画 微信小程序 scroll-view 组件是一种常用的滚动容器组件，通过设置 scroll-into-view 和 scroll-with-animation 属性可以实现滚动动画效果。在本文中，我们将详细介绍如何...
微信小程序scroll-view实现字幕滚动
01-03
本文实例为大家分享了微信小程序scroll-view实现字幕滚动的具体代码，供大家参考，具体内容如下 需求： 实现框内的文字自下而上的自动循环滚动。 解决方案： demo:字幕滚动 通过控制滑动条来完成字幕滚动，通过...
微信小程序 scroll-view的使用案例代码详解
10-15
【微信小程序 `scroll-view` 的使用详解】 在微信小程序开发中，`scroll-view` 是一个非常重要的组件，它提供了一个可滚动的视图容器，能够处理复杂的滚动需求，包括横向和纵向滚动。本文将深入探讨 `scroll-view` ...
解决微信小程序scroll-view换行问题
01-03
今天在写小程序的时候使用了scroll-view,但是发现在scroll-view中一行文字不能换行，代码如下： <scroll xss=removed> asdhadjhkajshdkjahsdkjasdajsdhkajsdkajsdkajsdhasjdaksj </scroll> 发现scroll-view内的一大...
uniapp scroll-view 设置scrollTop无效
最新发布
peachban的博客
11-03 1848
在实际运用过程中，发现设置了scroll-top无效，滚动条位置并没有发生变化，是因为微信小程序的官方框架处于性能考虑，初始化设置scroll-top不会重新渲染页面，需要将scroll-top的是放在一个事件内执行才可以生效。这里也有一个坑，如果事件执行时，scrollTop的值和原来一样，他是不会生效的(就算页面滚动了，但是scrollTop是不变的)，所以在触发回到顶部事件，重新赋值的时候，可以加一个0.0001，页面就会回到顶部了。这里有一个坑，初始值设置（注意：不要设置成0，不然无效）
微信小程序scroll-view不动的处理
weixin_34129145的博客
04-14 1686
scroll-view原来好好的，最近突然不动了，捣鼓半天，居然是要手工设定为scroll属性！下面两样样式必不可少，一是设定滚动方向上的宽度或高度，二是设置超出的处理为scroll 1、设定宽度 2、overflow:scroll; ...
关于scroll-view 的 scrollTop无效问题
qq_35451130的博客
02-21 2004
今天研究了以下小程序滚动高度的问题，刚开始用scroll-view来设置滚动高度，并且点击其他导航按钮让其置顶的问题，发现scroll-top设置无效的问题，在之前的时候可以通过bindscroll的绑定事件可以设定，但是小程序的版本可能改了，出现了一个api 叫wx.pageScrollTode api 下面给大家看一下写的代码，首先在wxml里面需要用到滚动的容器用scroll-view包裹起来， 在data当中定义scrollTop的数值，0或者-1都可以， 可以监听以下滚动的scrollTop的
ios系统微信小程序scroll-view划不动的问题
每天都记录一点点！
02-04 5359
这段时间开发个微信小程序的点餐系统，因为只需要小程序版本，所以就用原生的小程序写了，过程中遇到了几个问题和坑，就总结一下，方便来后者。 商品分类和商品列表的左右联动，像美团和饿了么那样的交互，点击某个分类滑动到对应的商品列表，随意滑动商品列表商品分类也会做对应的切换，我个人的实现方案如下： 要用到scroll-view的to-view属性 每个商品的高度都是固定的，所以要开始计算好每个类目对应的商品列表的高度，在滑动商品的时候实时获取scrollTop,然后再让商品分类列表做对应的切换 主要代码如下：
uniapp 微信小程序 scroll-view滑动卡顿 回到顶部
weixin_47614691的博客
05-11 691
参考uni-app官方文档 下面是代码片段 <scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scroll="scroll"> <view id="demo1" class="scroll-view-item uni-bg-red">A</view> <view id="demo2" class="scroll-view-item uni-bg-green"&g..
scroll-view里面的scrolltop在小程序里面只有作用一次
Huagg24的博客
11-07 978
因为做移动端，有个表格数据要动态写成html格式进行拼接，所以用scroll视图来做的，做分页功能的时候遇到了问题，就是切换页面的时候发现只有第一次点击才能返回到顶部，其他时候都没效果。必须在onScroll里面不停的更改this.pageData.scrollTop。再设置一个一样的变量。当点击时，用old变量去给scrollTop重新赋值；再调用$nextTick等dom结构生成后，再重新赋值scrolltop，就能回到顶部了。这是由于vue和小程序的视图层同步方式不同导致的。
scrollTop不生效的原因解决方法
前端小师姐迪迪_的博客
02-21 1万+
scrollTop 设置 不生效；scrollTop 一直为0；
微信小程序ScrollTop的获取以及赋值
热门推荐
weixin_34292959的博客
05-23 1万+
微信小程序获取元素高度宽度 1.创建节点 var query = wx.createSelectorQuery(); 2.绑定DOM query.select('#box').boundingClientRect() 3.获取元素信息 query.exec(function (res) { //console.log(res)...
微信小程序scroll-view scroll-into-view
10-13
微信小程序中的 scroll-view 组件可以实现滚动视图的效果，而 scroll-into-view 属性可以让指定的某个子组件滚动到视图中。当 scroll-into-view 的值为某个子组件的 id 时，该子组件就会滚动到 scroll-view 的顶部或底部，具体取决于该子组件在 scroll-view 中的位置。 例如，以下代码可以让 id 为 "item-5" 的子组件滚动到 scroll-view 的顶部： ``` <scroll-view scroll-into-view="item-5"> <view id="item-1">...</view> <view id="item-2">...</view> <view id="item-3">...</view> <view id="item-4">...</view> <view id="item-5">...</view> <view id="item-6">...</view> <view id="item-7">...</view> </scroll-view> ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值