小程序scroll-top

最新推荐文章于 2024-05-15 15:57:16 发布
最新推荐文章于 2024-05-15 15:57:16 发布
阅读量230 收藏
点赞数
分类专栏： 笔记 文章标签： 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_50736511/article/details/120839439
版权

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

万事胜意sy
关注
专栏目录
【微信小程序】小程序之滚动页面的某个元素位置
疾术客
05-07 5348
这种效果基本上都是在文章详情页面才会出现，用于点击按钮页面滚动到文章的评论位置。但是不排除可以用于别的功能！ 首先我们需要用到的是在小程序里面获取某一个元素的位置高度 var that = this; var flag = that.data.flag; //flag是一个开关变量，用来控制点击滑动到指定位置，再次点击返回到原位置 conso...
微信小程序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-top的问题
qq_54488820的博客
02-18 581
<scroll-view scroll-y="true" :style="{height: hg +'px'}" :scroll-top=500> </scroll-view> 发现如果写成:scroll-top="500",增加引号的话，就不会生效。要取消引号
微信小程序，滚动条回到顶部，点击按钮的时候，让滚动条回到顶部scroll-top
笑到世界都狼狈的博客
01-05 4375
首先官方文档中有介绍scroll-view的相关属性：https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html 我们可以看到scroll-view中存在属性scroll-top="0"可以让滚动条回到顶部，但是实际操作中，我们往往需要在某些特定操作后让滚动条回到顶部 下面以点击按钮，让滚顶条回到顶部为例，写一个简单的实现代码： scroll.wxml: <view class="homes">
scroll-view里面的scrolltop在小程序里面只有作用一次
Huagg24的博客
11-07 1043
因为做移动端，有个表格数据要动态写成html格式进行拼接，所以用scroll视图来做的，做分页功能的时候遇到了问题，就是切换页面的时候发现只有第一次点击才能返回到顶部，其他时候都没效果。必须在onScroll里面不停的更改this.pageData.scrollTop。再设置一个一样的变量。当点击时，用old变量去给scrollTop重新赋值；再调用$nextTick等dom结构生成后，再重新赋值scrolltop，就能回到顶部了。这是由于vue和小程序的视图层同步方式不同导致的。
微信小程序scroll-view下拉刷新(附带下拉刷新效果)
11-19
在微信小程序开发中，`scroll-view`组件是一个非常重要的元素，它允许用户在内容超过屏幕范围时进行滚动浏览。在本教程中，我们将探讨如何在`scroll-view`中实现下拉刷新（Pull-to-Refresh）功能，同时提供一个具体...
微信小程序scroll-view实现字幕滚动
01-03
本文实例为大家分享了微信小程序scroll-view实现字幕滚动的具体代码，供大家参考，具体内容如下 需求： 实现框内的文字自下而上的自动循环滚动。 解决方案： demo:字幕滚动 通过控制滑动条来完成字幕滚动，通过...
小程序笔记：scroll-view中设置了scroll-top为0置顶无效
qq_38337245的博客
09-23 1045
场景：比如一个订单详情里面有评价输入区域，评价完成之后，重新获取订单详情接口页面的高度会发生一些改变，我们就要设置页面滚回到顶部 标签： <scroll-view scroll-top="{{scrollTop}}" bindscroll="`bindscroll`"></scroll-view> data： scrollTop: 0, // 滚动到顶部 oldScrollTop: 0, // 滚动位置 滚动方法： bindscroll(e){ // 监听页面滚动 th
小程序scroll-view安卓机隐藏横向滚动条的实现详解
10-16
在微信小程序中，`scroll-view` 组件是一个用于实现可滚动内容区域的组件，特别适合在有限的空间内展示大量数据。在本问题中，开发者遇到了一个特定于安卓设备的问题，即在使用 `scroll-x` 属性实现横向滚动时，滚动...
微信小程序中scroll-view中不设定高度实现自动滚动
09-17
### 微信小程序中scroll-view实现自动滚动及高度自适应 #### 一、问题背景与需求分析 在微信小程序开发过程中，经常会遇到需要使用`scroll-view`组件来展示可滚动内容的需求。通常情况下，为了使`scroll-view`能够...
scroll-top 设置微信小程序滚动条位置
You_wil_see的博客
10-14 5017
1.首先呢 我们要在scroll-view标签中 加上scroll-top属性，scroll-top属性后可加number/string，如果你直接加入scroll-top= "0"的话是没有效果的。所以要设置一个变量，以便于在每次点击过后都会促发这个效果。 我们先设置一个变量scroll-top= "{{scrollTop}}"。 2.第二步就是在同文件的js文件当中，为变量赋值： 3.之后在点击事件后面 加入就可以了。 ...
小程序定位滚动到顶部
m0_45215325的博客
05-15 177
【代码】小程序定位滚动到顶部。
微信小程序 scrollview 滚动到指定位置
天问博客-专注于大前端技术
11-29 8920
在微信小程序中，实现 ScrollView 滚动到指定位置有多种方法，下面将介绍三种主要的实现方式。
微信小程序scroll-view一键回到顶部，动态绑定了scroll-top值，滑动会发生抖动
qq_41227106的博客
06-06 2056
scroll-view一键回到顶部
微信小程序scroll-top不生效问题
pengju12345的博客
05-24 1349
昨天我在写微信小程序的聊天界面遇到的问题 当我进入页面的时候我需要把我的聊天记录定位到我的存储聊天记录框的最底下所以我需要给我的scroll-top传入一个动态的数值让他初始化的时候，发送信息的时候，接收消息的时候都要在最底下然而这个时候出现了问题： 我的html <scroll-view style="height: {{height-50}}px;" scroll-y scroll-top="{{scrollTop}}" > 我的js //生命周期函数 liaotianjil
微信小程序开发聊天框 使用scroll-view的scroll-top使滚动条在最底部
wanhongxu的博客
03-07 798
当时用scroll-top默认只有第一次会滚动底部，其他的滚动位置不准或不滚动。
《scrollTop VS scrollLeft 之微信小程序》
杨晓风 迷迭香的记忆
04-28 644
背景 公司使用微信小程序来开发公司的一个产品，有幸参与到其中。在最近的一次迭代中，体验优化有这样一个点，点击类目时，分别实现横向滚动和纵向滚动的中间定位： 技术方案 横向滚动 一、wxml-核心代码 <scroll-view class="{{showFold ? 'subC-top-nav-fold' : 'subC-top-nav'}}" enhanced="{{true}}" bounces="{{true}}" scroll-
微信小程序（滚动吸顶）
weixin_43837268的博客
06-06 969
【代码】微信小程序（滚动吸顶）
在uniapp/微信小程序设置scrollTop初始值
m0_60353051的博客
11-26 3591
本文通过利用scroll-into-view属性+自定义定位器方式实现uniapp和微信小程序中对scrollTop设置初始值
小程序scroll-y
最新发布
09-13
小程序的`scroll-y`是一个事件属性，它用于指定当用户在组件中进行垂直方向上的滚动操作时触发的事件处理器。在微信小程序中，这个属性通常被添加到`<scroll-view>`组件上，以此来监听垂直滚动事件。 使用`scroll-y`时，你可以指定一个函数，该函数会在滚动时被调用，你可以在这个函数里执行一些逻辑，比如数据的动态加载、更新显示的内容等。函数能够接收到一个包含滚动信息的事件对象，这个对象中会包含当前滚动的位置等信息。 下面是一个简单的示例代码，展示了如何在小程序中使用`scroll-y`属性： ```xml <scroll-view scroll-y="onVerticalScroll" scroll-top="0" enablescroll="true" bindscrolltolower="loadMore" scroll-into-view="{{toView}}" style="height: 300px;"> <!-- 内容区域 --> </scroll-view> ``` ```javascript Page({ onVerticalScroll: function(e) { // 当垂直滚动时触发此函数 console.log('当前滚动位置：', e.detail.scrollTop); // 根据滚动位置可以做更多的处理，比如加载更多数据等 }, loadMore: function() { // 滚动到页面底部时触发此函数，用于加载更多数据 console.log('已滚动到底部，加载更多数据'); } }); ``` 在上面的示例中，`scroll-y`属性绑定到了`onVerticalScroll`函数，这个函数会在垂直滚动事件发生时被调用，并打印出当前滚动的位置。`bindscrolltolower`属性绑定了`loadMore`函数，当用户滚动到容器底部时，该函数会被触发。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

万事胜意sy

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值