在做uniapp项目中,有个滚动视图组件scroll-view
,跟微信小程序里的组件一样的,想要实现自动滚动到最底部,是一件容易忽略的,小事情。
问题呈现
官网uniapp文档上说可以控制滚动条,并没有自动滚动到底部的设置选项,请看布局源代码,如下,大多数可能都是这样写的
<template>
<view>
<scroll-view class="scroll-view" :style="{height:scrollViewHeight+'px'}" :scroll-y="true" :scroll-top="scrollTop" :scroll-with-animation="true">
<block v-for="(item,index) in images" :key="index">
<image class="item" :src="item.src" mode="aspectFill"></image>
</block>
</scroll-view>
</view>
</template>
<script>
export default {
data() {
return {
images:[],
scrollTop:0,//滚动条位置
scrollViewHeight:300,//滚动视图的高度
//...
};
},
//...
}
</script>
🤔 虽然可以控制滚动条位置,但是,不知道滚动视图框内的内容高度,要怎么精准控制滚动条位置呢
解决方案
通过各种尝试,认为最好的方案就是,在滚动视图组件内再加一层view
视图,布局改动后,源代码如下
<template>
<view>
<scroll-view class="scroll-view" :style="{height:scrollViewHeight+'px'}" :scroll-y="true" :scroll-top="scrollTop" :scroll-with-animation="true">
<view id="scroll-view-content">
<block v-for="(item,index) in images" :key="index">
<image class="item" :src="item.src" mode="aspectFill"></image>
</block>
</view>
</scroll-view>
</view>
</template>
<script>
//此处省略...
</script>
还有,实现滚动底部的处理方法scrollToBottom()
,代码如下
export default {
data() {
return {
images:[],
scrollTop:0,//滚动条位置
scrollViewHeight:300,//滚动视图的高度
//...
};
},
mounted() {
let i = 10;
do{
this.images.push({
src:'../../static/test.jpg',
//...
});
i--;
}while(i>0);
},
//...
methods:{
scrollToBottom(){
this.$nextTick(()=>{
uni.createSelectorQuery().in(this).select('#scroll-view-content').boundingClientRect((res)=>{
let top = res.height-this.scrollViewHeight;
if(top>0){
this.scrollTop=top;
}
}).exec()
})
}
}
}
注意事项
需要注意组件scroll-view
的属性设置文章来源:https://www.toymoban.com/news/detail-514722.html
- 需要设置固定高度,这样视图里面内容当只有超过该高度才会有滚动效果
- 需要设置
scroll-with-animation=true
,可以出现慢慢滚动到底部效果
文章来源地址https://www.toymoban.com/news/detail-514722.html
到了这里,关于【uniapp】scroll-view 实现自动滚动到最底部的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!