开始

把这块封装成一个组件
image.png
封装之前，先把数写成数组的形式。
image.png
评论和分享 数字就可以
image.png
用户点一次就变成黄色。顶和踩 只能是一次。
image.png
顶和踩的数量
image.png
image.png
image.png
播放次数和时长
image.png

  1. list:[
  2.                     {
  3.                         userpic:"../../static/demo/userpic/12.jpg",
  4.                         username:"昵称",
  5.                         isguanzhu:false,
  6.                         title:"我是标题",
  7.                         type:"img", // img:图文,video:视频
  8.                         titlepic:"../../static/demo/datapic/11.jpg",
  9.                         infonum:{
  10.                             index:0,//0:没有操作，1:顶,2:踩；
  11.                             dingnum:11,
  12.                             cainum:11,
  13.                         },
  14.                         commentnum:10,
  15.                         sharenum:10,
  16.                     },
  17.                     {
  18.                         userpic:"../../static/demo/userpic/12.jpg",
  19.                         username:"昵称",
  20.                         isguanzhu:true,
  21.                         title:"我是标题",
  22.                         type:"video", // img:图文,video:视频
  23.                         titlepic:"../../static/demo/datapic/11.jpg",
  24.                         playnum:"20w",
  25.                         long:"2:47",
  26.                         infonum:{
  27.                             index:1,//0:没有操作，1:顶,2:踩；
  28.                             dingnum:11,
  29.                             cainum:11,
  30.                         },
  31.                         commentnum:10,
  32.                         sharenum:10,
  33.                     }
  34.                 ]

剪切放到block块里面。注意最外层还是要套一层view
image.png

  1. <block v-for="(item,index) in list" :key="index">

替换对应的字段
image.png
image.png
是否关注
image.png
标题和主图
image.png
视频用template包裹起来。 判断类型是否是视频。如果是才显示视频。
image.png
顶和踩
image.png
评论数和转发数
image.png
增加一个选中的样式
image.png

image.png

  1. .index-list4 .active,.index-list4 .active>view{
  2.         color: #c5f61c;
  3.     }

image.png
关注改用v-show
image.png

  1. <view class="u-f-ac" v-show="item.isguanzhu">
  2.                         <view class="icon iconfont icon-zengjia"></view>关注
  3.                     </view>

image.png

image.png

image.png

  1. :class="{'active':(item.infonum.index==1)}"
  3. :class="{'active':(item.infonum.index==2)}"

image.png

开始封装组件

新建组件
image.png
把它移动到index目录下
image.png

image.png
把我们之前的代码 复制过来。注意复制的是class=index-list开始的。
image.png
css也复制进来。

然后定义props属性
image.png

  1. <script>
  2.     export default {
  3.         props: {
  4.             item: Object
  5.         }
  6.     }
  7. </script>

引入组件
image.png

  1. import indexList from '@/components/index/index-list.vue';

注册组件
image.png

  1. components: {
  2.             indexList
  3.         },

使用组件
image.png
加一个索引的属性
image.png

  1. <index-list :item="item" :index="index"></index-list>

image.png

image.png
封装的组件完整代码 index-list

css限制作用域

打包后css可能会有重复。
直接scoped表示这个组件内的css只能给当前这个组件使用。
image.png

最终代码

组件代码

  1. <template>
  2.     <view class="index-list">
  3.         <view class="index-list1 u-f-ac u-f-jsb">
  4.             <view class="u-f-ac">
  5.                 <image :src="item.userpic" mode="widthFix" lazy-load></image>
  6.                 {{item.username}}
  7.             </view>
  8.             <view class="u-f-ac" v-show="item.isguanzhu">
  9.                 <view class="icon iconfont icon-zengjia"></view>关注
  10.             </view>
  11.         </view>
  12.         <view class="index-list2">{{item.title}}</view>
  13.         <view class="index-list3 u-f-ajc">
  14.             <!-- 图片 -->
  15.             <image :src="item.titlepic" mode="widthFix" lazy-load>
  16.             </image>
  17.             <!-- 视频 -->
  18.             <template v-if="item.type=='video'">
  19.                 <view class="index-list-play icon iconfont icon-bofang"></view>
  20.                 <view class="index-list-playinfo">
  21.                     {{item.playnum}}播放 {{item.long}}
  22.                 </view>
  23.             </template>
  24.         </view>
  25.         <view class="index-list4 u-f-ac u-f-jsb">
  26.             <view class="u-f-ac">
  27.                 <view class="u-f-ac" :class="{'active':(item.infonum.index==1)}">
  28.                     <view class="icon iconfont icon-icon_xiaolian-mian"></view>
  29.                     {{item.infonum.dingnum}}
  30.                 </view>
  31.                 <view class="u-f-ac" :class="{'active':(item.infonum.index==2)}">
  32.                     <view class="icon iconfont icon-kulian"></view>
  33.                     {{item.infonum.cainum}}
  34.                 </view>
  35.             </view>
  36.             <view class="u-f-ac">
  37.                 <view class="u-f-ac">
  38.                     <view class="icon iconfont icon-pinglun1"></view>
  39.                     {{item.commentnum}}
  40.                 </view>
  41.                 <view class="u-f-ac">
  42.                     <view class="icon iconfont icon-zhuanfa"></view>
  43.                     {{item.sharenum}}
  44.                 </view>
  45.             </view>
  46.         </view>
  47.     </view>
  48. </template>
  50. <script>
  51.     export default {
  52.         props: {
  53.             item: Object,
  54.             index: Number
  55.         }
  56.     }
  57. </script>
  59. <style scoped>
  60.     .index-list {
  61.         padding: 20upx;
  62.         border-bottom: 1upx solid #EEEEEE;
  63.     }
  65.     .index-list1 {
  66.         /* display: flex; */
  67.         /* justify-content: space-between; */
  68.         /* align-items: center; */
  69.     }
  71.     .index-list1>view:first-child {
  72.         /* display: flex;
  73.         align-items: center; */
  74.         color: #999999;
  75.     }
  77.     .index-list1>view:first-child image {
  78.         width: 95upx;
  79.         height: 90upx;
  80.         border-radius: 100%;
  81.         margin-right: 10upx;
  82.     }
  84.     .index-list1>view:last-child {
  85.         /* display: flex;
  86.         align-items: center; */
  87.         background: #F4F4F4;
  88.         border-radius: 5upx;
  89.         padding: 0 10upx;
  90.     }
  92.     .index-list2 {
  93.         padding-top: 15upx;
  94.         font-size: 32upx;
  95.     }
  97.     .index-list3 {
  98.         position: relative;
  99.         padding-top: 15upx;
  100.     }
  102.     .index-list3>image {
  103.         width: 100%;
  104.         border-radius: 20upx;
  105.     }
  107.     .index-list-play {
  108.         position: absolute;
  109.         font-size: 140upx;
  110.         color: #FFFFFF;
  111.     }
  113.     .index-list-playinfo {
  114.         position: absolute;
  115.         background: rgba(51, 51, 51, 0.72);
  116.         color: #FFFFFF;
  117.         bottom: 8upx;
  118.         right: 8upx;
  119.         border-radius: 40upx;
  120.         font-size: 22upx;
  121.         padding: 0 12upx;
  122.     }
  124.     .index-list4 {
  125.         padding: 15upx 0;
  126.         /* display: flex; */
  127.         /* justify-content: space-between; */
  128.         /* align-items: center; */
  129.     }
  131.     .index-list4 view {
  132.         color: #999999;
  133.     }
  135.     .index-list4>view:first-child {
  136.         /* display: flex;
  137.         align-items: center; */
  138.     }
  140.     .index-list4>view:last-child {
  141.         /* display: flex;
  142.         align-items: center; */
  143.     }
  145.     .index-list4>view>view {
  146.         /* display: flex;
  147.         align-items: center; */
  148.     }
  150.     .index-list4>view>view>view,
  151.     .index-list4>view>view:first-child {
  152.         margin-right: 10upx;
  153.     }
  154.     .index-list4 .active,.index-list4 .active>view{
  155.         color: #c5f61c;
  156.     }
  157. </style>

首页代码

  1. <template>
  2.     <view>
  4.         <block v-for="(item,index) in list" :key="index">
  5.             <index-list :item="item" :index="index"></index-list>
  6.         </block>
  8.     </view>
  9. </template>
  11. <script>
  12.     import indexList from '@/components/index/index-list.vue';
  13.     export default {
  14.         components: {
  15.             indexList
  16.         },
  17.         data() {
  18.             return {
  19.                 list: [{
  20.                         userpic: "../../static/demo/userpic/12.jpg",
  21.                         username: "昵称",
  22.                         isguanzhu: false,
  23.                         title: "我是标题",
  24.                         type: "img", // img:图文,video:视频
  25.                         titlepic: "../../static/demo/datapic/11.jpg",
  26.                         infonum: {
  27.                             index: 0, //0:没有操作，1:顶,2:踩；
  28.                             dingnum: 11,
  29.                             cainum: 11,
  30.                         },
  31.                         commentnum: 10,
  32.                         sharenum: 10,
  33.                     },
  34.                     {
  35.                         userpic: "../../static/demo/userpic/12.jpg",
  36.                         username: "昵称",
  37.                         isguanzhu: true,
  38.                         title: "我是标题",
  39.                         type: "video", // img:图文,video:视频
  40.                         titlepic: "../../static/demo/datapic/11.jpg",
  41.                         playnum: "20w",
  42.                         long: "2:47",
  43.                         infonum: {
  44.                             index: 1, //0:没有操作，1:顶,2:踩；
  45.                             dingnum: 11,
  46.                             cainum: 11,
  47.                         },
  48.                         commentnum: 10,
  49.                         sharenum: 10,
  50.                     }
  51.                 ]
  52.             }
  53.         },
  54.         onLoad() {
  56.         },
  57.         methods: {
  59.         }
  60.     }
  61. </script>
  63. <style>
  64. </style>

结束