uniapp scroll-view 和 uni.pageScrollTo 能同时使用嘛!
时间: 2023-12-23 21:05:48 浏览: 261
是的,你可以同时使用 uniapp 的 scroll-view 组件和 uni.pageScrollTo 方法。scroll-view 组件是用来实现可滚动视图的,而 uni.pageScrollTo 方法是用来实现页面的滚动效果。你可以在 scroll-view 组件内部使用 uni.pageScrollTo 方法来实现更精确的滚动效果。
相关问题
uniapp scroll-view 回到顶部
可以通过在scroll-view组件上绑定一个tap事件,然后在事件处理函数中调用scroll-view组件的scrollTo方法来实现回到顶部的功能。具体实现步骤如下:
1. 在scroll-view组件上绑定一个tap事件,例如:
```html
<scroll-view class="scroll-view" scroll-y="true" @tap="backToTop">
<!-- scroll-view的内容 -->
</scroll-view>
```
2. 在事件处理函数backToTop中调用scroll-view组件的scrollTo方法,将scrollTop设置为0,例如:
```javascript
methods: {
backToTop() {
uni.pageScrollTo({
scrollTop: 0,
duration: 300
});
}
}
```
其中,duration表示滚动到顶部的动画时间,单位为毫秒。
uniapp scroll-view回到底部
在UniApp中,可以使用scroll-view组件来实滚动视图,并且可以通过编程的方式将滚动视图回到底部。下面是一种实现方式:
1. 首先,在你的页面中引入scroll-view组件,并设置一个唯一的id,例如:
```html
<scroll-view id="myScrollView" scroll-y="true" style="height: 100vh;">
<!-- 内容区域 -->
</scroll-view>
```
2. 在页面的script标签中,使用uni.createSelectorQuery()方法获取scroll-view组件的实例,并将其保存在一个变量中:
```javascript
export default {
mounted() {
this.$nextTick(() => {
uni.createSelectorQuery().select('#myScrollView').boundingClientRect((rect) => {
this.scrollView = uni.pageScrollTo({
scrollTop: rect.height // 将滚动位置设置为scroll-view的高度,即回到底部
});
}).exec();
});
}
}
```
3. 这样,当页面加载完成后,scroll-view组件会自动滚动到底部。
阅读全文