开始

封装自定义导航组件，除了关注的列表，还有话题页面。如果代码都写在这个页面里面的话，后期不方便管理。
image.png
新建news目录
image.png
image.png

image.png
注意最外层还是套这一个view
image.png

整个样式都复制过去
image.png

image.png

  1. /* .nav-left,.nav-right{
  2.         border: 1upx solid;
  3.         width: 100%;
  4.     } */
  5.     .nav-left {
  6.         /* 这里视频中是左边16upx,实际这里是不需要的 */
  7.         margin-left: 0upx;
  8.     }
  10.     .nav-left>view,
  11.     .nav-right>view {
  12.         font-size: 40upx;
  13.     }
  15.     .nav-left>view {
  16.         color: #FF9619;
  17.     }
  19.     .nav-tab-bar {
  20.         /* 父节点是flex为1的 所以这里100%宽度就可以继承父元素的宽度 */
  21.         width: 100%;
  22.         /* border: 1upx solid; */
  23.         margin-left: -20upx;
  24.         position: relative;
  25.     }
  27.     .nav-tab-bar>view {
  28.         /* border: 1upx solid; */
  29.         font-size: 32upx;
  30.         padding: 0 15upx;
  31.         font-weight: bold;
  32.         color: #969696;
  33.     }
  35.     .active {
  36.         color: #333333 !important;
  37.     }
  39.     .nav-tab-bar-line {
  40.         border-bottom: 14upx solid #FEDE33;
  41.         /* border-top: 7upx solid red; */
  42.         width: 70upx;
  43.         border-radius: 20upx;
  44.         position: absolute;
  45.         bottom: 12upx;
  46.     }

方法也移植过去
image.png
两个方法都剪切过来
image.png

事件，发射
image.png

  1. methods:{
  2.             changeTab(index) {
  3.                 this.$emit('change-tab',index);
  4.             },
  5.             openAdd() {
  6.                 // 打开发布页面
  7.                 uni.navigateTo({
  8.                     url: '../add-input/add-input'
  9.                 })
  10.             }
  11.         }

这个组件也要在子组件内引用
image.png

image.png

props属性定义
image.png

引入组件

image.png

  1. import newsNavBar from '@/components/news/news-nav-bar.vue';
  3. newsNavBar

image.png

  1. <news-nav-bar :tabBars="tabBars" :tabIndex="tabIndex"></news-nav-bar>

父组件。监听事件
image.png

  1. <news-nav-bar :tabBars="tabBars" :tabIndex="tabIndex"
  2.         @change-tab="changeTab"></news-nav-bar>

父组件内事件的监听
image.png

  1. // 点击切换
  2.             changeTab(index) {
  3.                 this.tabIndex = index;
  4.             }

image.png

优化右下角图标

image.png

第四行的第二个view
image.png

image.png
再调大一点 28
image.png

  1. .common-list-r>view:nth-child(4)>view:nth-child(2)>view {
  2.         margin-left: 10upx;
  3.         padding-left: 5upx;
  4.         font-size: 28upx;
  5.     }

image.png
距离图片的间距，增加
image.png
image.png

  1. .common-list-r>view:nth-child(3) {
  2.         position: relative;
  3.         margin-bottom: 10upx;
  4.     }

image.png

导航阴影

image.png

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

image.png

本节代码

news-nav-bar.vue

  1. <template>
  2.     <view>
  3.         <!-- 自定义导航栏 -->
  4.         <uni-nav-bar :fixed="true" :border="false" :statusBar="true" @clickRight="openAdd">
  5.             <!-- 左边 -->
  6.             <block slot="left">
  7.                 <view class="nav-left">
  8.                     <view class="icon iconfont icon-qiandao"></view>
  9.                 </view>
  10.             </block>
  11.             <!-- 中间 -->
  12.             <view class="nav-tab-bar u-f-ajc">
  13.                 <block v-for="(tab,index) in tabBars" :key="tab.id">
  14.                     <view class="u-f-ajc" :class="{'active':tabIndex==index}" @tap="changeTab(index)">
  15.                         {{tab.name}}
  16.                         <view v-if="(tabIndex==index)" class="nav-tab-bar-line"></view>
  17.                     </view>
  18.                 </block>
  19.             </view>
  20.             <!-- 右边 -->
  21.             <block slot="right">
  22.                 <view class="nav-right u-f-ajc">
  23.                     <view class="icon iconfont icon-bianji1"></view>
  24.                 </view>
  25.             </block>
  26.         </uni-nav-bar>
  27.     </view>
  28. </template>
  30. <script>
  31.     export default {
  32.         props: {
  33.             tabBars: Array,
  34.             tabIndex: Number
  35.         },
  36.         methods: {
  37.             changeTab(index) {
  38.                 this.$emit('change-tab', index);
  39.             },
  40.             openAdd() {
  41.                 // 打开发布页面
  42.                 uni.navigateTo({
  43.                     url: '../add-input/add-input'
  44.                 })
  45.             }
  46.         }
  47.     }
  48. </script>
  50. <style scoped>
  51.     /* .nav-left,.nav-right{
  52.         border: 1upx solid;
  53.         width: 100%;
  54.     } */
  55.     .nav-left {
  56.         /* 这里视频中是左边16upx,实际这里是不需要的 */
  57.         margin-left: 0upx;
  58.     }
  60.     .nav-left>view,
  61.     .nav-right>view {
  62.         font-size: 40upx;
  63.     }
  65.     .nav-left>view {
  66.         color: #FF9619;
  67.     }
  69.     .nav-tab-bar {
  70.         /* 父节点是flex为1的 所以这里100%宽度就可以继承父元素的宽度 */
  71.         width: 100%;
  72.         /* border: 1upx solid; */
  73.         margin-left: -20upx;
  74.         position: relative;
  75.     }
  77.     .nav-tab-bar>view {
  78.         /* border: 1upx solid; */
  79.         font-size: 32upx;
  80.         padding: 0 15upx;
  81.         font-weight: bold;
  82.         color: #969696;
  83.     }
  85.     .active {
  86.         color: #333333 !important;
  87.     }
  89.     .nav-tab-bar-line {
  90.         border-bottom: 14upx solid #FEDE33;
  91.         /* border-top: 7upx solid red; */
  92.         width: 70upx;
  93.         border-radius: 20upx;
  94.         position: absolute;
  95.         bottom: 12upx;
  96.     }
  97. </style>

common-list.vue修改45节课的问题

上节课最下面的黑线 自己没有做出来。
image.png
现在知道是哪里的原因了。 边框线加错了地方，。
应该把边框加载右侧的最外层的view上面
image.png

  1. .common-list-r {
  2.         flex: 1;
  3.         margin-left: 15upx;
  4.         border-bottom: 1upx solid #EEEEEE;
  5.         padding-bottom: 10upx;
  6.     }

common-list.vue最终

  1. <template>
  2.     <view class="common-list u-f animated fadeInLeft faster">
  3.         <view class="common-list-l">
  4.             <image :src="item.userpic" mode="widthFix" lazy-load="true"></image>
  5.         </view>
  6.         <view class="common-list-r">
  7.             <view class="u-f-ac u-f-jsb">
  8.                 <view class="u-f-ac">
  9.                     {{item.username}}
  10.                     <view class="tag-sex icon iconfont icon-nan"
  11.                     :class="[item.sex==0?'icon-nan':'icon-nv']">{{item.age}}</view>
  12.                 </view>
  13.                 <view v-show="!isguanzhu" class="icon iconfont icon-zengjia" @tap="guanzhu">关注</view>
  14.             </view>
  15.             <view class="">{{item.title}}</view>
  16.             <view class="u-f-ajc">
  17.                 <!-- 图片 -->
  18.                 <image v-if="item.titlepic" :src="item.titlepic" mode="widthFix" lazy-load="true">
  19.                 </image>
  20.                 <!-- 视频 -->
  21.                 <template v-if="item.video">
  22.                     <view class="common-list-play icon iconfont icon-bofang"></view>
  23.                     <view class="common-list-playinfo">
  24.                         {{item.video.looknum}} 次播放 {{item.video.long}}
  25.                     </view>
  26.                 </template>
  27.                 <!-- 分享 -->
  28.                 <view v-if="item.share" class="common-list-share u-f-ac">
  29.                     <image :src="item.share.titlepic" mode="widthFix" lazy-load="true">
  30.                     </image>
  31.                     <view class="">{{item.share.title}}</view>
  32.                 </view>
  33.             </view>
  34.             <view class="u-f-ajc u-f-jsb">
  35.                 <view class="">{{item.path}}</view>
  36.                 <view class="u-f-ac">
  37.                     <view class="icon iconfont icon-zhuanfa">
  38.                         {{item.sharenum}}
  39.                     </view>
  40.                     <view class="icon iconfont icon-pinglun1">
  41.                         {{item.commentnum}}
  42.                     </view>
  43.                     <view class="icon iconfont icon-dianzan1">
  44.                         {{item.goodnum}}
  45.                     </view>
  46.                 </view>
  47.             </view>
  48.         </view>
  49.     </view>
  50. </template>
  52. <script>
  53.     export default {
  54.             props:{
  55.                 item:Object,
  56.                 index:Number
  57.             },
  58.             data() {
  59.                 return {
  60.                     isguanzhu: this.item.isguanzhu
  61.                 }
  62.             },
  63.             methods:{
  64.                 guanzhu(){
  65.                     this.isguanzhu=true;
  66.                     uni.showToast({
  67.                         title: '关注成功',
  68.                     });
  69.                 }
  70.             }
  71.         }
  72. </script>
  74. <style scoped>
  75.     .common-list {
  76.         padding: 20upx;
  77.     }
  79.     .common-list-l {
  80.         flex-shrink: 0;
  81.     }
  83.     .common-list-l image {
  84.         width: 90upx;
  85.         height: 90upx;
  86.         border-radius: 100%;
  87.     }
  89.     .common-list-r {
  90.         flex: 1;
  91.         margin-left: 15upx;
  92.         border-bottom: 1upx solid #EEEEEE;
  93.         padding-bottom: 10upx;
  94.     }
  96.     .common-list-r>view:nth-child(3)>image {
  97.         width: 100%;
  98.         border-radius: 10upx;
  99.     }
  101.     .common-list-r>view:nth-child(1)>view:first-child {
  102.         color: #999999;
  103.         color: 30upx;
  104.     }
  106.     .common-list-r>view:nth-child(1)>view:last-child {
  107.         background: #EEEEEEE;
  108.         padding: 0 10upx;
  109.         font-size: 32upx;
  110.     }
  112.     .tag-sex {
  113.         background: #007AFF;
  114.         color: #FFFFFF;
  115.         font-size: 23upx;
  116.         padding: 5upx 10upx;
  117.         margin-left: 10upx;
  118.         border-radius: 20upx;
  119.         line-height: 22upx;
  120.     }
  122.     .common-list-r>view:nth-child(2) {
  123.         font-size: 32upx;
  124.         padding: 12upx 0;
  125.     }
  127.     .common-list-r>view:nth-child(3) {
  128.         position: relative;
  129.         margin-bottom: 10upx;
  130.     }
  132.     .common-list-play,
  133.     .common-list-playinfo {
  134.         position: absolute;
  135.         color: #FFFFFF;
  136.     }
  138.     .common-list-play {
  139.         font-size: 130upx;
  140.     }
  142.     .common-list-playinfo {
  143.         right: 10upx;
  144.         bottom: 10upx;
  145.         background: rgba(51, 51, 51, 0.73);
  146.         border-radius: 20upx;
  147.         padding: 0 20upx;
  148.         font-size: 26upx;
  149.     }
  151.     .common-list-r>view:nth-child(4)>view {
  152.         color: #AAAAAA;
  153.     }
  155.     .common-list-r>view:nth-child(4)>view:nth-child(2)>view {
  156.         margin-left: 10upx;
  157.         padding-left: 5upx;
  158.         font-size: 28upx;
  159.     }
  161.     .common-list-share {
  162.         background: #EEEEEE;
  163.         /* border: 1upx solid; */
  164.         width: 100%;
  165.         padding: 10upx;
  166.         border-radius: 10upx;
  167.     }
  169.     .common-list-share>image {
  170.         width: 200upx;
  171.         height: 150upx;
  172.         margin-right: 10upx;
  173.     }
  174. </style>

结束