uniapp scroll-view使用
文章描述：
uniapp scroll-view使用方法，以及滑动到最底部
template
<scroll-view scroll-y="true" style="height: 400rpx;"
:scroll-into-view="bottomId" scroll-with-animation="true">
<view v-for="(item,index) in list">
<view :style=" 'height: 180rpx; background-color:' + item.color"></view>
</view>
<view :id="'p'+(list.length)">footer</view>
</scroll-view><scroll-view scroll-y="true" style="height: 400rpx;"
:scroll-top="scrollTopHeight" scroll-with-animation="true" >
<view v-for="(item,index) in list">
<view :style=" 'height: 180rpx; background-color:' + item.color" class="item"></view>
</view>
</scroll-view>scroll-with-animation在设置滚动条位置时使用动画过渡
script
export default{
data(){
return{
list:[
{id:1,color:'#eee'},
{id:1,color:'#666'},
{id:1,color:'#fff'},
{id:1,color:'#eee'},
{id:1,color:'#666'},
{id:1,color:'#eee'},
{id:1,color:'#666'},
{id:1,color:'#eee'}
],
bottomId:"",
scrollTopHeight:"",
itemHeight:""
}
},
onReady() {
setTimeout(()=>{
this.num = this.list.length
this.bottomId = 'p'+ (this.num)
},500)
this.getElementStyle()
console.log(this.itemHeight * this.list.length)
let height = this.itemHeight * this.list.length
this.$nextTick(()=>{
this.scrollTopHeight = height + 0
})
},
methods:{
// 获取元素高度
getElementStyle:function(){
const query = uni.createSelectorQuery().in(this);
query.select('.item').boundingClientRect(data=>{
console.log(data)
this.itemHeight = data.height
}).exec()
},
}
}
发布时间：2022/09/23
发表评论