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

猜你喜欢

转载自www.cnblogs.com/luguankun/p/11470746.html