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.效果：