开始

把数据写在data里面
image.png

image.png
分别做视频和分享的 两份数据
image.png

image.png
分享
image.png

列表json数据最终

  1. list:[
  2.                     // 文字
  3.                     {
  4.                         userpic:"../../static/demo/userpic/12.jpg",
  5.                         username:"哈哈",
  6.                         sex:0, //0 男 1 女
  7.                         age:25,
  8.                         isguanzhu:false,
  9.                         title:"我是标题",
  10.                         titlepic:"",
  11.                         video:false,
  12.                         share:false,
  13.                         path:"深圳 龙岗",
  14.                         sharenum:20,
  15.                         commentnum:30,
  16.                         goodnum:20
  17.                     },
  18.                     // 图文
  19.                     {
  20.                         userpic:"../../static/demo/userpic/12.jpg",
  21.                         username:"哈哈",
  22.                         sex:0, //0 男 1 女
  23.                         age:25,
  24.                         isguanzhu:false,
  25.                         title:"我是标题",
  26.                         titlepic:"../../static/demo/datapic/13.jpg",
  27.                         video:false,
  28.                         share:false,
  29.                         path:"深圳 龙岗",
  30.                         sharenum:20,
  31.                         commentnum:30,
  32.                         goodnum:20
  33.                     },
  34.                     // 视频
  35.                     {
  36.                         userpic:"../../static/demo/userpic/12.jpg",
  37.                         username:"哈哈",
  38.                         sex:0, //0 男 1 女
  39.                         age:25,
  40.                         isguanzhu:false,
  41.                         title:"我是标题",
  42.                         titlepic:"../../static/demo/datapic/13.jpg",
  43.                         video:{
  44.                             looknum:"20w",
  45.                             long:"2:47"
  46.                         },
  47.                         share:false,
  48.                         path:"深圳 龙岗",
  49.                         sharenum:20,
  50.                         commentnum:30,
  51.                         goodnum:20
  52.                     },
  53.                     // 分享
  54.                     {
  55.                         userpic:"../../static/demo/userpic/12.jpg",
  56.                         username:"哈哈",
  57.                         sex:0, //0 男 1 女
  58.                         age:25,
  59.                         isguanzhu:false,
  60.                         title:"我是标题",
  61.                         titlepic:"",
  62.                         video:false,
  63.                         share:{
  64.                             title:"我是分享的标题",
  65.                             titlepic:"../../static/demo/datapic/14.jpg"
  66.                         },
  67.                         path:"深圳 龙岗",
  68.                         sharenum:20,
  69.                         commentnum:30,
  70.                         goodnum:20
  71.                     },
  72.                 ]

对列表进行循环

block来循环。下面的内容复制到上面
image.png

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

替换里面的参数
image.png
image.png
是否关注。如果没有关注才显示。
image.png
标题。
image.png

image.png
视频部分整个放在template里，用v-if去判断。
image.png

  1. <template v-if="item.video">
  2.                             <view class="common-list-play icon iconfont icon-bofang"></view>
  3.                             <view class="common-list-playinfo">
  4.                                 {{item.video.looknum}} 次播放 {{item.video.long}}
  5.                             </view>
  6.                         </template>

分享
image.png

  1. <!-- 分享 -->
  2.                         <view v-if="item.share" class="common-list-share u-f-ac">
  3.                             <image :src="item.share.titlepic" mode="widthFix" lazy-load="true">
  4.                             </image>
  5.                             <view class="">{{item.share.title}}</view>
  6.                         </view>

image.png

  1. <view class="u-f-ajc u-f-jsb">
  2.                         <view class="">{{item.path}}</view>
  3.                         <view class="u-f-ac">
  4.                             <view class="icon iconfont icon-zhuanfa">
  5.                                 {{item.sharenum}}
  6.                             </view>
  7.                             <view class="icon iconfont icon-pinglun1">
  8.                                 {{item.commentnum}}
  9.                             </view>
  10.                             <view class="icon iconfont icon-dianzan1">
  11.                                 {{item.goodnum}}
  12.                             </view>
  13.                         </view>
  14.                     </view>

image.png

  1. <view v-if="item.share" class="common-list-share u-f-ac">
  2.                             <image :src="item.share.titlepic" mode="widthFix" lazy-load="true">
  3.                             </image>
  4.                             <view class="">{{item.share.title}}</view>
  5.                         </view>

性别的判断

image.png

image.png

  1. <view class="tag-sex icon iconfont icon-nan"
  2.                             :class="[item.sex==0?'icon-nan':'icon-nv']">

顶部导航栏没有固定住。
image.png
顶部导航栏固定
image.png

  1. <uni-nav-bar :fixed="true" :statusBar="true" @clickRight="openAdd">

顶部是固定的了
image.png

结束