1. 效果图
2. 子组件uni代码
代码：
<template>
<!-- 最大view包裹 -->
<view class="index-list">
<view class="index-list1 u-f-ac u-f-jsb"> <!-- 第一行 -->
<view class="u-f-ac"> <!-- 左边 头像 -->
<image :src="item.userpic"
mode="widthFix"
lazy-load></image>
{{item.username}} <!-- 左边 昵称 -->
</view>
<view class="u-f-ac" v-show="item.isguanzhu"> <!-- 右边 决定是否显示 -->
<view class="icon iconfont icon-zengjia"></view>关注 <!-- 右边 关注图标和文字 -->
</view>
</view>
<view class="index-list2">{{item.title}}</view> <!-- 第二行，标题行，一行 -->
<view class="index-list3 u-f-ajc"> <!-- 第三行 -->
<!-- 图片 默认显示 -->
<image :src="item.titlepic"
mode="widthFix"
lazy-load></image>
<!-- 视频 浮动在图片上 -->
<template v-if="item.type=='video'">
<view class="icon iconfont icon-bofang index-list-play"></view>
<view class="index-list-playinfo">
{{item.playnum}}次播放 {{item.long}}
</view>
</template>
</view>
<view class="index-list4 u-f-ac u-f-jsb"> <!-- 第四行 -->
<view class="u-f-ac"> <!-- 左边 -->
<view class="u-f-ac" :class="{'active':(item.infonum.index==1)}">
<view class="icon iconfont icon-icon_xiaolian-mian"></view>
{{item.infonum.dingnum}}
</view>
<view class="u-f-ac" :class="{'active':(item.infonum.index==2)}">
<view class="icon iconfont icon-kulian"></view>
{{item.infonum.cainum}}
</view>
</view>
<view class="u-f-ac"> <!-- 右边 -->
<view class="u-f-ac">
<view class="icon iconfont icon-pinglun1"></view>
{{item.commentnum}}
</view>
<view class="u-f-ac">
<view class="icon iconfont icon-zhuanfa"></view>
{{item.sharenum}}
</view>
</view>
</view>
</view>
</template>
3. 子组件js代码
<script>
export default {
props:{
item:Object, // 父组件： <block v-for="(item,index) in list" :key="index" ...
index:Number
}
}
</script>
4. 子组件css样式
<style scoped>
.index-list{
padding: 20upx;
border-bottom: 1upx solid #EEEEEE;
}
.index-list1>view:first-child{
color: #999999;
}
.index-list1>view:first-child image{
width: 85upx;
height: 85upx;
border-radius: 100%;
margin-right: 10upx;
}
.index-list1>view:last-child{
background: #F4F4F4;
border-radius:5upx;
padding: 0 10upx;
}
.index-list2{
padding-top: 15upx;
font-size: 32upx;
}
.index-list3{
position: relative;
padding-top: 15upx;
}
.index-list3>image{
width: 100%;
border-radius: 20upx;
}
.index-list4 view{
color: #999999;
}
.index-list4{
padding: 15upx 0;
}
.index-list4>view>view>view,.index-list4>view>view:first-child{
margin-right: 10upx;
}
.index-list-play{
position: absolute;
font-size: 140upx;
color: #FFFFFF;
}
.index-list-playinfo{
position: absolute;
background: rgba(51, 51, 51, 0.72);
color: #FFFFFF;
bottom: 8upx;
right: 8upx;
border-radius: 40upx;
font-size: 22upx;
padding: 0 12upx;
}
.index-list4 .active,.index-list4 .active>view{
color: #C5F61C;
}
</style>
5. 父组件引入
代码：
<template>
<view>
<block v-for="(item,index) in list" :key="index">
<index-list :item="item" :index="index"></index-list>
</block>
</view>
</template>
<script>
import indexList from "../../components/index/index-list.vue";
export default {
components: {
indexList
},
data() {
return {
list:[
{
userpic:"../../static/demo/userpic/12.jpg",
username:"昵称",
isguanzhu:true,
title:"我是标题",
type:"video", // img:图文,video:视频
titlepic:"../../static/demo/datapic/11.jpg",
playnum:"20w",
long:"2:47",
infonum:{
index:1,//0:没有操作，1:顶,2:踩；
dingnum:11,
cainum:11,
},
commentnum:10,
sharenum:10,
},
{
userpic:"../../static/demo/userpic/12.jpg",
username:"昵称",
isguanzhu:false,
title:"我是标题",
type:"img", // img:图文,video:视频
titlepic:"../../static/demo/datapic/11.jpg",
infonum:{
index:0,//0:没有操作，1:顶,2:踩；
dingnum:11,
cainum:11,
},
commentnum:10,
sharenum:10,
},
]
}
},
onLoad() {
},
methods: {
}
}
</script>