3 changed files with 81 additions and 45 deletions
@ -0,0 +1,63 @@ |
|||||
|
<template> |
||||
|
<view class="container"> |
||||
|
<scroll-view |
||||
|
class="scroll-view" |
||||
|
scroll-y="true" |
||||
|
@scrolltolower="onScrollToLower" |
||||
|
> |
||||
|
<button @click="scrollTo">点击滚动</button> |
||||
|
<view v-for="(item, index) in list" :key="index"> |
||||
|
{{ item }} |
||||
|
</view> |
||||
|
</scroll-view> |
||||
|
<button @click="addItem">添加内容</button> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
list: Array.from({ length: 20 }, (_, i) => `Item ${i + 1}`), |
||||
|
}; |
||||
|
}, |
||||
|
methods: { |
||||
|
onScrollToLower() { |
||||
|
console.log("滚动到底部了"); |
||||
|
// 可以在这里加载更多数据 |
||||
|
}, |
||||
|
addItem() { |
||||
|
this.list.push(`Item ${this.list.length + 1}`); |
||||
|
this.$nextTick(() => { |
||||
|
this.$refs.scrollView.scrollTo({ |
||||
|
top: 99999, |
||||
|
duration: 300, |
||||
|
}); |
||||
|
}); |
||||
|
}, |
||||
|
scrollTo() { |
||||
|
uni.pageScrollTo({ |
||||
|
scrollTop: 100, |
||||
|
duration: 300, |
||||
|
}); |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style> |
||||
|
.container { |
||||
|
height: 100%; |
||||
|
} |
||||
|
.scroll-view { |
||||
|
height: 80%; |
||||
|
} |
||||
|
button { |
||||
|
width: 100%; |
||||
|
height: 50px; |
||||
|
line-height: 50px; |
||||
|
text-align: center; |
||||
|
background-color: #007aff; |
||||
|
color: white; |
||||
|
} |
||||
|
</style> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue