uniapp开发app滚动怎么写
时间: 2023-12-23 20:04:37 浏览: 118
uni-app 实现聊天页面滚动到最底部
5星 · 资源好评率100%
在uniapp中,你可以使用`<scroll-view>`标签来实现滚动。下面是一个简单的例子:
```html
<template>
<scroll-view :style="{height: '500rpx'}">
<div v-for="item in items" :key="item.id">{{ item.text }}</div>
</scroll-view>
</template>
<script>
export default {
data() {
return {
items: [
{ id: 1, text: 'item 1' },
{ id: 2, text: 'item 2' },
{ id: 3, text: 'item 3' },
{ id: 4, text: 'item 4' },
{ id: 5, text: 'item 5' },
{ id: 6, text: 'item 6' },
{ id: 7, text: 'item 7' },
{ id: 8, text: 'item 8' },
{ id: 9, text: 'item 9' },
{ id: 10, text: 'item 10' },
],
};
},
};
</script>
```
在这个例子中,我们使用`<scroll-view>`标签包装了一组数据项。我们给`<scroll-view>`标签设置了一个高度,以便它可以滚动。`<div>`标签用于显示每个数据项的文本。
你可以在`<scroll-view>`标签中添加其他属性来控制滚动的行为。例如,你可以通过设置`scroll-y`属性为`true`来启用垂直滚动。你还可以设置`scroll-top`属性来控制滚动的初始位置,等等。具体请参考uniapp官方文档。
阅读全文