帮我用uniapp写一个列表页
时间: 2024-03-21 18:38:35 浏览: 16
好的,以下是一个简单的uniapp列表页示例代码:
1. 在pages文件夹下新建一个list文件夹,并在其中新建一个list.vue文件。
2. 在list.vue文件中编写以下代码:
```
<template>
<view>
<scroll-view class="list-container">
<view class="list-item" v-for="(item, index) in list" :key="index">{{ item }}</view>
</scroll-view>
</view>
</template>
<script>
export default {
data() {
return {
list: ['第1项', '第2项', '第3项', '第4项', '第5项', '第6项', '第7项', '第8项', '第9项', '第10项']
}
}
}
</script>
<style>
.list-container {
height: 100vh;
overflow-y: scroll;
}
.list-item {
height: 100px;
line-height: 100px;
text-align: center;
font-size: 32px;
border-bottom: 1px solid #ccc;
}
</style>
```
3. 在pages.json文件中添加以下配置:
```
{
"pages": [
{
"path": "pages/list/list",
"name": "list",
"config": {
"navigationBarTitleText": "列表页"
}
}
]
}
```
4. 运行uniapp项目,进入列表页即可看到列表展示效果。
注:以上代码仅为示例,实际开发中可根据需求进行修改。