官网关于list的说明 list
list app端nvue专用组件。在app-nvue下，如果是长列表，使用list组件的性能高于使用view或scroll-view的滚动。原因在于list在不可见部分的渲染资源回收有特殊的优化处理。 原生渲染的资源回收机制，与webview渲染不同。webview不需要数据有规则格式，长页面处于不可视的部分，其渲染资源会自动回收，除非webview使用区域滚动而不是页面滚动。所以vue页面只要不用scroll-view，就不需要关注这个问题。而原生渲染则必须注意。 如果需要跨端，建议使用uni-ui的uni-list组件，它会自动处理webview渲染和原生渲染的情况，在app-nvue下使用list组件，而在其他平台则使用页面滚动。详见https://ext.dcloud.net.cn/plugin?id=24
nvue其实就是weex的扩展，就是使用weex的时候可以使用list，但是我没有使用weex，我是用的vue，所以选择使用uni-list组件
截屏2021-09-23 09.40.37.png
点击[下载插件ZIP] ui-list组件拷贝到components目录下
截屏2021-09-23 09.41.31.png
在pages->index.vue写入如下代码
代码语言：javascript复制<template>
<view>
<uni-list>
<view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(value, key) in listData" :key="key" @click="goDetail(value)">
<view class="uni-media-list">
<view>
<image class="uni-media-list-logo" :src="value.cover"></image>
</view>
<view class="uni-media-list-body">
<view class="uni-media-list-text-top">{{ value.title }}</view>
<view class="uni-media-list-text-bottom">
<text>{{ value.author_name }}</text>
<text style="margin-left: 30rpx;margin-top: 6rpx;">{{ value.published_at }}</text>
</view>
</view>
</view>
</view>
</uni-list>
</view>
</template>
<script>
export default {
data() {
return {
listData: [{
id: "109121",
title: "「粒子狂热」：被误解成潮牌的运动穿着品牌",
author_name: "徐子",
cover: "https://img.36krcdn.com/20191230/v2_37635ef22df24e96aa7f26e192036c2b_img_png",
published_at: "2019-12-30 15:20:00"
},
{
id: "109121",
title: "为什么12306时不时要崩那么一下？",
author_name: "半佛仙人",
cover: "https://img.36krcdn.com/20191230/v2_02c342a62f91498b99c7f2b5aa22ff1c_img_png",
published_at: "2019-12-30 15:22:00"
},
{
id: "109121",
title: "「倒闭、被坑、降薪、失业，2019我为什么还在坚持",
author_name: "燃财经",
cover: "https://img.36krcdn.com/20191230/v2_43cbd298bed24a18bd023802258f20c8_img_png",
published_at: "2019-12-30 15:26:00"
},
{
id: "109121",
title: "钱太好花了：想存五万还差八万，今年你攒到钱了吗",
author_name: "36氪的朋友们",
cover: "https://img.36krcdn.com/20191230/v2_037f7f799f504a60a848b52fa913ab65_img_png",
published_at: "2019-12-30 15:29:00"
}
],
};
},
onLoad() {
},
methods: {
goDetail: function(e) {
},
}
};
</script>
<style lang="scss">
.uni-media-list{
display: flex;
flex-direction: row;
margin-left: 32rpx;
margin-right: 32rpx;
margin-top: 20rpx;
.uni-media-list-logo {
width: 180rpx;
height: 140rpx;
}
.uni-media-list-body {
flex-direction: row;
height: auto;
margin-left: 32rpx;
margin-right: 32rpx;
justify-content: space-around;
}
.uni-media-list-text-top {
height: 74rpx;
font-size: 28rpx;
overflow: hidden;
}
.uni-media-list-text-bottom {
display: flex;
flex-direction: row;
margin-top: 20rpx;
margin-right: 20rpx;
font-size: 27rpx;
color: #999999;
}
}
</style>运行
截屏2021-09-23 09.42.56.png
