uniapp将页面滚动到指定位置记录一下

最新推荐文章于 2025-05-23 16:30:00 发布

爱吃猫的鱼swy

最新推荐文章于 2025-05-23 16:30:00 发布

阅读量913

点赞数

分类专栏： uniapp 文章标签： uni-app

本文链接：https://blog.youkuaiyun.com/aichimaodeyuybh/article/details/126367246

版权

uniapp 专栏收录该内容

4 篇文章

订阅专栏

//uniapp将页面滚动到指定位置
uni.pageScrollTo({
	scrollTop: 0,//0代表滚动到顶部
	duration: 300//动画时长
});

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

爱吃猫的鱼swy

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

Uniapp实现页面滚动Tab吸顶，点击tab内容滚动到对应tab内容位置

weixin_47342624的博客

06-13

1528

data() {return {curTab: 0,tabTop: 0, // tab距离顶部的距离},name: '正文详情',}]name: '相关附件',})name: '图文解读',})},// 点击tab滚动事件if(!0 : (data?},// uni页面滚动监听事件// 获取tabs的距离顶部的距离}).exec();},

uniapp 页面滚动指定元素节点位置

qq_29096549的博客

07-11

6692

先看看最终效果吧背景：页面动态加载tab，tab里动态加载列表，上方有一块固定内容（个人资料）。需求：判断未勾选节点，可自动跳转到目标节点处。实现逻辑：将页面滚动到目标节点距离 = 指定节点离页面顶部的距离 + 页面在垂直方向已滚动的距离 - 内容列表上方固定区域高度赋代码，无关代码已删除，仅供参考。关键代码在：BindCreateDayLZRecord() 提交方法中。 <template> <view class="fullheight"> <!-- 标题

参与评论您还未登录，请先登录后发表或查看评论

uni-app 滚动到指定位置

qq_36529240的博客

05-10

4795

方法二使用uni.pageScrollTo 使页面纵向滚到到指定位置。无法滚动将代码放在setTimeout，nextTick里执行。方法1：使用标签，可以将页面横向（或纵向）滚动到指定位置。建议设置height为auto :height:auto。

前端：uniapp中uni.pageScrollTo方法与元素的overflow-y:auto之间的关联

梨木乔

04-18

466

前端：uniapp中uni.pageScrollTof方法与元素的overflow-y:auto之间的关联

uniapp将页面滚动到目标位置

Smile_ping的博客

06-28

6317

uniapp将页面滑动到目标位置或返回顶部的两种实现方式...

uniapp 页面滚动到指定位置的方法

--=

04-23

3869

uniapp 页面滚动到指定位置的方法

uniapp设置滚动条滚动到指定位置

最新发布

m0_72030584的博客

05-23

781

UniApp页面滚动监听魔法指南

Uniapp实现滑动页面tab的切换

qq_44127479的博客

11-16

1116

Uniapp实现滑动页面tab的切换。

跳转到指定页面元素位置

01-08

跳转到指定页面元素位置校验页面元素，点击之后跳转到指定位置 export const getElementTop = (element:any):any => { //元素距离屏幕浏览器上方距离，如果页面元素滑上去，就是负数 element dom元素 let clientHeight:any = element.getBoundingClientRect().top; //文档滚动距离 let scrollTop:any = document.documentElement.scrollTop //两位向加就是需要跳转的高度 let ele

uniapp 滚动页面到指定位置

weixin_58421147的博客

03-01

3702

uniapp 点击滚动页面到指定位置

uniapp记录上次滚动的位置

zhao949895887的专栏

11-12

1245

记录滚动位置 onPageScroll(e) { console.log(e) // {scrollTop: 216} this.scrollTop = e.scrollTop; uni.setStorageSync('detail' + this.id, e.scrollTop); }, 跳转到指定位置 getscrollTop() { let data = uni.getS

uniapp小程序的锚点定位（将页面滚动到目标位置）

一直在路上

12-14

1594

小程序中，a页面跳转到b页面，跳转后滚动定位到b页面的特定位置。直接上代码：下面是b页面的模板代码和js代码。

uniapp页面滚动到指定位置

wang1811539550的博客

03-10

770

【代码】uniapp页面滚动。

uniapp页面滚动条到指定位置

weixin_40918145的博客

06-20

804

获取到信息后页面滚动到指定位置，但是我比较懒，有没有什么简洁的方法，少写代码，有，直接上代码。

uni-app 页面滚动到指定位置

bai_shuang的博客

02-16

1442

uni-app 页面滚动到指定位置

uniapp滚动到页面指定位置

weixin_68819400的博客

06-27

332

【代码】uniapp跳转到页面指定为止。

uniapp滚动选择

03-27

### UniApp 中实现滚动选择功能在 UniApp 开发中，可以通过 `scroll-view` 组件来实现滚动选择的功能。以下是详细的说明以及代码示例。 #### 使用 `scroll-view` 实现滚动选择 `scroll-view` 是 UniApp 提供的一个组件，支持水平或垂直方向上的滚动操作。通过绑定事件和动态控制滚动位置，可以轻松实现滚动选择的效果[^3]。 #### 关键属性与方法 - **`scroll-x` 和 `scroll-y`**: 控制是否允许横向或纵向滚动。 - **`bindscroll` 或 `@scroll`**: 监听滚动事件，获取当前滚动的位置。 - **`scrollTop`/`scrollLeft`**: 设置初始滚动偏移量。 - **`scrollIntoView`**: 让某个指定的子节点自动滚动到可视区域。下面是一个完整的示例： ```html <template> <view class="container">  <scroll-view class="scroll-view_H" scroll-x @scroll="onScroll" :scroll-left="scrollLeft" > <view v-for="(item, index) in items" :key="index" :id="'item-' + index" class="scroll-item" :class="{ 'active': currentIndex === index }" @click="selectItem(index)" > {{ item }} </view> </scroll-view>  <text>已选择: {{ selected }}</text> </view> </template> <script> export default { data() { return { items: ['选项一', '选项二', '选项三', '选项四', '选项五'], // 数据列表 currentIndex: 0, // 当前选中的索引 scrollLeft: 0, // 滚动距离 selected: '' // 已选择的内容 }; }, methods: { onScroll(e) { this.scrollLeft = e.detail.scrollLeft; }, selectItem(index) { this.currentIndex = index; this.selected = this.items[index]; // 自动滚动到选中的项目 setTimeout(() => { const id = '#item-' + index; uni.createSelectorQuery().in(this).select(id).boundingClientRect(rect => { if (rect && rect.left < 0 || rect.right > uni.upx2px(750)) { this.scrollLeft += (rect.width * index); } }).exec(); }, 100); } } }; </script> <style scoped> .container { padding: 20rpx; } .scroll-view_H { white-space: nowrap; width: 100%; border: 1px solid #ccc; margin-bottom: 20rpx; } .scroll-item { display: inline-block; text-align: center; line-height: 80rpx; font-size: 30rpx; color: black; padding: 0 20rpx; margin-right: 20rpx; border-radius: 10rpx; background-color: #f0f0f0; } .active { color: white; background-color: blue; } </style> ``` #### 功能解析 1. **滚动监听**：通过 `@scroll` 获取滚动的距离并更新 `scrollLeft` 的值。 2. **点击选择**：当用户点击某一项时，记录其索引并通过 `currentIndex` 更新状态。 3. **自动滚动调整**：如果所选项目不在视图范围内，则调用 `createSelectorQuery()` 方法计算目标元素的位置，并手动调整 `scrollLeft` 值使其可见[^4]。 --- ### 移除滚动条样式为了提升用户体验，在某些场景下可能需要隐藏默认的滚动条。可采用如下 CSS 方式去除滚动条显示[^2]: ```css /* 隐藏整个应用内的滚动条 */ ::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; -webkit-appearance: none; background: transparent; } /* 如果仅针对特定组件隐藏滚动条 */ .scroll-view_H ::-webkit-scrollbar { display: none; } ``` 上述样式可以直接写入全局文件（如 `app.vue`）或者局部作用域内。 --- ### 注意事项 - 若页面整体未发生滚动行为，则无法触发 `onReachBottom` 生命周期函数。此时需借助 `scroll-view` 来模拟分页加载逻辑[^1]。 - 对于性能优化，建议减少 DOM 节点数量，避免因过多数据渲染影响流畅度。 ---

uniapp将页面滚动到指定位置 记录一下

uniapp将页面滚动到指定位置记录一下