uni-app创建list列表

0.app.vue需要引入uni.css，在官方模板复制一个uni.css复制到common文件夹里，还要复制uni.ttf文件到static文件下。然后在app.vue的style标签加入以下代码

@import "./common/uni.css";

 

1.复制以下代码到对应的vue文件

<template>
    <view class="content">
         <view class="uni-list">
             <view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(item,index) in list" :key="index">
                  <view class="uni-list-cell-navigate uni-navigate-right">
                       {{item}}
                  </view>
             </view>
         </view>
    </view>
</template>

2.准备数据

data() {
            return {
                list:[1,2,3]
            }
        },

3.效果：