1. 明确scroll-view组件的基本用法和属性 scroll-view组件在uniapp中主要用于创建一个可滚动的视图区域。它支持多个属性,其中scroll-into-view属性用于将scroll-view滚动到指定元素的位置。 2. 设置scroll-view的滚动位置 要使用scroll-into-view属性,你需要确保scroll-view组件内的每个可滚动到的元素都有一个唯一的ID...
scrollTop=e.detail.scrollTop; //存储scrollTop值,这里使用本地存储为例 uni.setStorageSync("scrollTop",scrollTop); } } 三、恢复用户滚动位置 当用户再次访问页面时,我们需要在页面加载时获取之前存储的scrollTop值,并将其设置给scroll-view组件。 1.在页面加载时(如onShow或onLoad生命周期钩子中),获取...
通过scroll-view的滚动和下拉刷新来实现 在scroll-view的属性中设置:scroll-into-view="state.scrollIntoMessageId"通过动态设置scrollIntoMessageId来到指定的组件位置 记住这个id是给组件的id属性赋值之后才行,不是key我开始也以为是key,实际不是。比如下面这个代码循环创建一个列表的view,并且每个赋值一个单独的messag...
如图可见,在页面滚动过程中,顶部导航栏和底栏未动,仅中间的内容区域可滚动。 整个页面的高度设置为 100%,并采用 flex 布局 滚动区域的高度,通过flex布局的flex-grow实现自适配 <template> <!-- 顶部--自定义的导航栏 --> <CustomNavbar /> <!-- 中间--自适配高度的滚动区 --> <scroll-view scroll-y...
设置一个scrollTop设置竖向滚动条的位置,首先默认为0,当页面向下滚动会触发scroll-top事件从而改变scrollTop的值,当切换到第二个scroll-view时在默认设置scrollTop为0,那么在切换到第二个页面的同时页面的竖向滚动条的位置会默认滚动到最顶部,从而解决了默认滚动到最底部加载多次数据的问题。
scroll-top属性的值必须是具体的数值,表示滚动条距离顶部的距离。如果需要动态计算滚动位置,可以通过uni.createSelectorQuery()方法获取元素的位置信息,然后计算出滚动距离。 scroll-into-view属性的值必须是子元素的id,且不能以数字开头。如果子元素的id是动态生成的,需要在滚动前确保id已经正确设置。 示例代码: <scr...
},//滚动到底部/右边触发scrolltolower() { console.log(1111); },//滚动到顶部/左边触发scrolltoupper() { console.log(2222); } } } .scroll-view_H { white-space: nowrap; .scroll-view-item_H { display: inline-block; width:100%; height: 100px; }...
常见整个页面布局,需要中间部分直接自适应屏幕然后局部滚动。这个实现稍微难一点: js 实现:直接获取到屏幕的整个高度,然后减去上下模块的高度就是中间的 scroll-view 高度了。 代码语言:javascript 复制 // 获取屏幕可用高度letscreenHeight=uni.getSystemInfoSync().windowHeight ...
回答:内容自动滚动到可视化区域的底部,你可以自己写一个函数,在页面加载完成后调用即可,这个功能一般不需要采用组件来实现,书写起来也并不复杂,简单的逻辑如下: function getMaxHeight() { messageContainer = document.getElementsByClassName("message-container")[0]; messageContainer.scrollTo({ top: messageContainer...
两种方式的前提是:提供具体的高度值(scroll-view 也可以横向滚动到指定位置)。 一、uni.pageScrollTo uni.pageScrollTo 不起效果的原因可能有两: 1,值格式不对;2,布局格式不对。 如果是传入selector不起效: uni.pageScrollTo({ duration:300, selector: id // string 选择器 ...