uniapp获取微信小程序页面滚动的高度

最新推荐文章于 2024-06-07 14:18:58 发布
原创 最新推荐文章于 2024-06-07 14:18:58 发布 · 276 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#微信小程序 #uni-app #小程序 

uni.createSelectorQuery().selectViewport().scrollOffset(res => {
	console.log("竖直滚动位置" + res.scrollTop);
}).exec();

uniapp文档地址

peepeeman
关注
uniapp封装微信小程序自定义头部
weixin_48095278的博客
06-12 767
uniapp封装微信小程序自定义头部
微信小程序动态设置scroll-view的高度，实现只有scroll-view区域可以滚动
weixin_48952990的博客
07-13 2115
动态设置scroll-view的高度
Uniapp或者微信小程序如何动态的计算Scrollview的高度
hollebug的博客
08-22 4606
当一个小程序页面，顶部有搜索栏，或者分类查询时，我们想要保证它们能固定到顶部，就需要使用到Scrollview，那么如何确定Scrollview就是一个问题，这时我们可以使用以下代码来实现。先获取Scrollview距离顶部的高度，然后页面高度减去顶部距离，就能得到剩余的内容高度，如果底部还有操作条，那么我们再减去其高度，就能得到具体的Scrollview高度了。注意点是为了能准确的获取到页面元素，从而准确计算高度，我们需要将代码放到onReady生命周期里运行。
小程序页面获取滚动条高度
weixin_30709061的博客
04-16 1217
没有用过vue等MVVM的框架，直接开始做小程序，没有dom操作真是各种不适应，思维有时都转换不过来 想要做的效果是 很常见的滚动条超出某个元素时，该元素固定在顶部 网上看到的获取滚动条高度及返回顶部的代码 onPageScroll:function(e){ // 获取滚动条当前位置 console.log(e) }, goTop: function (e) { // ...
Uniapp微信小程序滚动条跳转到元素高度
09-04
Uniapp框架的针对微信小程序的使滚动条跳转到指定元素位置。直接复制粘贴内容，然后配置好page.json。就可以直接查看效果。
uniApp获取页面滚动的高度
文龙刚的博客
06-07 1786
【代码】uniApp获取页面滚动的高度。
小程序获取滚动条高度以及返回顶部
文龙刚的博客
04-26 1804
【代码】小程序获取滚动条高度以及返回顶部。
uniapp微信小程序（用左右箭头控制Swiper滚动）
08-21
uniapp微信小程序（用左右箭头控制Swiper滚动） 微信小程序原本Swiper组件没有箭头控制功能，用uniapp进行了功能封装，开发者可自行对内部进行组件化封装直接使用在自己项目里。本项目为初始项目、优化架构和去掉...
详解微信小程序scroll-view横向滚动的实践踩坑及隐藏其滚动条的实现
10-17
其中，scroll-view是微信小程序提供的一个用于实现滚动视图的组件，它支持垂直和水平滚动。但是，在实际开发中，开发者经常遇到一些问题，比如如何使scroll-view实现横向滚动，以及如何隐藏滚动条，来达到美观的效果...
微信小程序uniapp日历组件，可以自定义文案，可以上下滑动选择日期
03-01
在IT行业中，微信小程序是一种轻量级的应用程序，它运行在微信环境中，无需下载安装即可使用，极大地便利了用户。而uni-app则是一个多端开发框架，它允许开发者使用一套代码来构建iOS、Android、H5、微信小程序、...
uniapp小程序控制页面元素滚动指定距离
05-15 1680
其他元素的滚动距离，可以通过设置横向滚动距离位置：scroll-left="100" 来实现横向滚动，设置scroll-top="100" 来实现纵向滚动。
关于uniapp窗口高度问题
weixin_49807130的博客
11-18 528
需要注意的是，不同的设备和系统可能会有一些差异，因此在实际使用时，最好进行兼容性处理。指的是屏幕的高度，包括导航栏的高度。因此，在微信小程序中，指的是可使用窗口的高度，即屏幕高度减去导航栏高度。指的是可使用窗口的高度，即屏幕高度减去导航栏高度。通常是相等的，因为app没有导航栏占用屏幕空间。在app和微信小程序中，使用。
uni-app 获取 scroll-view高度 获取页面剩余高度 所占手机屏幕的剩余高度
以后永远的博客
04-08 7336
uni-app 获取自定义可视化高度 1.问题场景 直接上图 我想获取下面的view 可视化高度 下边图片标记的框保证数据多时，内容可以滑动 做到看视频时 可以看到下方内容。 2.解决思路 从上图可见 使用页面的总体高度 - 减去 标题的红框上方的高度（多余高度）即可解决此类问题。 也就是说 height = pageHeight - otherHeight； 3.官网描述(动态获取节点信息...
Web前端之微信小程序及时获取页面循环元素的宽度、距离左边值、函数自调、类似递归、高度、闪屏、globalData、scrollView、selectAll、exec、map
优快云博客主页地址：https://mengjian.blog.youkuaiyun.com/
11-19 2394
Web前端之微信小程序及时获取页面循环元素的宽度、距离左边值、函数自调、类似递归、高度、闪屏、globalData、scrollView、selectAll、exec、map
小程序滚动到指定元素高度
c347087870的博客
10-20 1159
小程序滚动到指定元素高度
小程序 获取页面滚动的高度
沫沫酱
05-27 9090
wx.createSelectorQuery().select('#the-id').boundingClientRect(function(rect){ rect.id // 节点的ID rect.dataset // 节点的dataset rect.left // 节点的左边界坐标 rect.right // 节点的右边界坐...
微信小程序获取滚动条高度_微信小程序设置滚动条过程详解
weixin_32821813的博客
01-17 1668
原因原来在app.wxss中定义了如下的内容【不知道是不是新建项目自动生成的，这里也就提供了隐藏滚动条的思路啦】::-webkit-scrollbar {width: 0px;height: 0px;color:#transparent;}what, 宽高为0，而且还是透明的，难怪，好吧，修改宽高4px，color设置为green，以为可以了，呵呵，太年轻。scroll-viwe依然没有滚动条，以...
小程序scroll-view区域滚动计算可滚动高度
guairena的博客
01-08 3316
需求：   微信小程序区域滚动，头部是标题、日期切换、下面是表头，可滚动的只有列表表体的内容；通过scroll-view组件实现表体内容的区域滚动。 思路： 列表页主要有标题、日期时间切换、列表表头在滚动的时候是不能动的，只有表体的数据内容可以区域滚动。表体的内容写在<scroll-view></scroll-view>组件里。 在列表页还可以切换到图表页；图表页的头部和列表共用，相当于筛选条件是一样的。图表需要滚动的也要放到<scroll-view></scr
微信小程序获取滚动条高度_小程序页面获取滚动条高度
weixin_28961225的博客
02-12 2280
没有用过vue等MVVM的框架，直接开始做小程序，没有dom操作真是各种不适应，思维有时都转换不过来想要做的效果是 很常见的滚动条超出某个元素时，该元素固定在顶部网上看到的获取滚动条高度及返回顶部的代码onPageScroll:function(e){ // 获取滚动条当前位置console.log(e)},goTop: function (e) { // 一键回到顶部if (wx.pageS...
uniapp开发微信小程序做滚动歌词，irc文件
最新发布
01-09
UniApp 开发微信小程序时，如果你想实现滚动歌词功能，通常会利用 JavaScript 和 CSS 来完成。首先，你需要准备一个包含歌词的文字列表 (IRC 文件可能不是直接相关的术语，它可能是某一种特殊的文件格式，比如歌词文件的通用格式 LRC)，然后将其转换成数组结构。接着，可以创建一个滚动视图（如 `scroll-view` 组件），并动态地通过数据绑定 (`v-for`) 渲染每一行歌词。 以下是一个简单的步骤： 1. **数据处理**：读取 IRC 文件内容，并解析成适合展示的 JSON 格式，每条数据包含歌词的时间点和歌词内容。 ```javascript const lyricsData = parseIrcFile(ircFilePath); ``` 2. **组件模板**：在 WXML 中设置滚动视图，绑定到数据数组上。 ```html <view class="lyrics-scroll"> <scroll-view scroll-y="{{true}}" bindscrolltolower="onScrollToLower"> <block v-for="(line, index) in lyricsData" :key="index"> <text>{{ line.text }}</text> </block> </scroll-view> </view> ``` 3. **事件监听**：添加滚动到底部事件处理器，用于显示下一行歌词。 ```javascript methods: { onScrollToLower() { this.$apply(() => { if (this.showNextLine) { // 显示下一行歌词 const nextLine = this.lyricsData[this.currentLineIndex + 1]; // 更新当前行索引 this.currentLineIndex++; // 可能需要更新歌词滚动位置 this.updateScrollPosition(nextLine.timePoint); } }); }, } ``` 4. **样式调整**：在 WXSS 中添加滚动效果、歌词滚动速度等CSS规则。 记得在实际项目中可能还需要考虑用户体验优化，例如滚动动画和平滑切换等。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值