| uniapp设置滚动条滚动到指定位置 | 您所在的位置：网站首页 › uniapp底部弹框拖动效果 › uniapp设置滚动条滚动到指定位置 |
uniapp设置滚动条滚动到指定位置
|
场景：左侧菜单栏，每次切换时，需要右侧商品展示区保持滚动条及页面在最顶部
1.利用scroll-view 中scroll-top属性实现 1.1设置scrollToTop属性为0 data() { return { // 保证每次切换，滚动条位置都在最顶部 scrollToTop: 0, }; } 1.2 菜单栏切换时clickFirstCategory切换scrollToTop的值 scrollToTop在0，1之间切换，通过1px的差别使页面可以正常渲染 {{category.cat_name}} clickFirstCategory(index) { // 每次点击都保证scroll滚动条在最顶部 this.scrollToTop = this.scrollToTop ? 0 : 1 }, ... 2.使用uni.pageScrollTo()方法 顶部 backToTop export default { data() { return { }; }, methods: { backToTop(){ uni.pageScrollTo({ selector: ".cart-box", scrollTop: 0 }) } }, } 3.uni.pageScrollTo()和scroll-view组件使用区别1）使用 uni.pageScrollTo 方法，属于页面级别滚动。 如果传入 scrollTop 不起效，应该是布局的问题， 它是页面级的滚动：所有的 滚动单元 必须是在根元素下，由 滚动单元 直接撑起来的高度，就可以滚动到指定位置。 2）使用 scroll-view 标签的属性：scroll-top(距离值 num) 或 scroll-into-view(子元素的id,不能以数字开头 string); 属于区域级别滚动。 两种方式的前提是：提供具体的高度值 参考：uniapp 将元素滚动到指定位置的两种方法总结_uniapp滚动到指定元素的位置_铁锤妹妹@的博客-CSDN博客 |
【本文地址】
公司简介
联系我们