开始

tab切换和下面的列表。
image.png
tab切换和首页的是类似的。首页的可以左右的滚动。
image.png
我们对首页的tab切换进行二次开发，让它兼容话题详情页的。

列表页也和动态的页面类似的。
image.png

tab切换

首页是引入的这个组件
image.png

image.png

  1. import swiperTabHead from '@/components/index/swiper-tab-head.vue';
  3. swiperTabHead

首页的代码复制过来
image.png

  1. <!-- tabbar切换 -->
  2.         <swiper-tab-head
  3.         :tabBars="tabBars" 
  4.         :tabIndex="tabIndex"
  5.         @tabtap="tabtap">
  6.         </swiper-tab-head>

默认选中第一个tab
image.png

  1. tabBars: [{
  2.                         name: "默认",
  3.                         id: "moren"
  4.                     },
  5.                     {
  6.                         name: "最新",
  7.                         id: "zuixin"
  8.                     },
  9.                 ]

tab切换的事件
image.png

  1. // tabbar点击事件
  2.             tabtap(index) {
  3.                 // console.log(index);
  4.                 this.tabIndex = index;
  5.             },

tab下面有一条线，要删掉，让里面每一个元素占50%。
image.png
单独改组件。swiper-tab-head.vue
image.png

  1. style="border-bottom: 0;"
  3. style="width: 50%;"

image.png
组件内自定义这个style
image.png

  1. <view class="uni-tab-bar">
  2.         <scroll-view scroll-x class="uni-swiper-tab" :style="scrollStyle">
  3.             <block v-for="(tab,index) in tabBars" :key="tab.id">
  4.                 <view class="swiper-tab-list" :class="{'active':tabIndex==index}" @tap="tabtap(index)"
  5.                     :style="scrollItemStyle">
  6.                     {{tab.name}}
  7.                     <view class="swiper-tab-line u-f-ajc">
  8.                         <view class="swiper-tab-line-child"></view>
  9.                     </view>
  10.                 </view>
  11.             </block>
  12.         </scroll-view>
  13.     </view>

定义这两个props属性
image.png

  1. scrollStyle:{
  2.                 type: String,
  3.                 default: ''
  4.             },
  5.             scrollItemStyle:{
  6.                 type: String,
  7.                 default: ''
  8.             }

调用组件的时候传这两个属性
image.png

  1. <swiper-tab-head 
  2.         :tabBars="tabBars" 
  3.         :tabIndex="tabIndex" 
  4.         @tabtap="tabtap"
  5.         scrollStyle="border-bottom:0;"
  6.         scrollItemStyle="width:50%;">
  7.         </swiper-tab-head>

首页tab正常
image.png

话题详情页
image.png

列表

和关注列表页样式相同，所以参考
image.png

image.png
tablist里面有两个对象，分别对应两个tab
image.png
直接复制news页面的
image.png

image.png

  1. tablist:[
  2.                     {
  3.                         loadtext:"上拉加载更多",
  4.                         list:[
  5.                             // 文字
  6.                             {
  7.                                 userpic:"../../static/demo/userpic/12.jpg",
  8.                                 username:"哈哈",
  9.                                 sex:0, //0 男 1 女
  10.                                 age:25,
  11.                                 isguanzhu:false,
  12.                                 title:"我是标题",
  13.                                 titlepic:"",
  14.                                 video:false,
  15.                                 share:false,
  16.                                 path:"深圳 龙岗",
  17.                                 sharenum:20,
  18.                                 commentnum:30,
  19.                                 goodnum:20
  20.                             },
  21.                             // 图文
  22.                             {
  23.                                 userpic:"../../static/demo/userpic/12.jpg",
  24.                                 username:"哈哈",
  25.                                 sex:0, //0 男 1 女
  26.                                 age:25,
  27.                                 isguanzhu:false,
  28.                                 title:"我是标题",
  29.                                 titlepic:"../../static/demo/datapic/13.jpg",
  30.                                 video:false,
  31.                                 share:false,
  32.                                 path:"深圳 龙岗",
  33.                                 sharenum:20,
  34.                                 commentnum:30,
  35.                                 goodnum:20
  36.                             },
  37.                             // 视频
  38.                             {
  39.                                 userpic:"../../static/demo/userpic/12.jpg",
  40.                                 username:"哈哈",
  41.                                 sex:0, //0 男 1 女
  42.                                 age:25,
  43.                                 isguanzhu:false,
  44.                                 title:"我是标题",
  45.                                 titlepic:"../../static/demo/datapic/13.jpg",
  46.                                 video:{
  47.                                     looknum:"20w",
  48.                                     long:"2:47"
  49.                                 },
  50.                                 share:false,
  51.                                 path:"深圳 龙岗",
  52.                                 sharenum:20,
  53.                                 commentnum:30,
  54.                                 goodnum:20
  55.                             },
  56.                         ]
  57.                     },
  58.                     {
  59.                         loadtext:"上拉加载更多",
  60.                         list:[
  61.                             // 文字
  62.                             {
  63.                                 userpic:"../../static/demo/userpic/12.jpg",
  64.                                 username:"哈哈",
  65.                                 sex:0, //0 男 1 女
  66.                                 age:25,
  67.                                 isguanzhu:false,
  68.                                 title:"我是标题",
  69.                                 titlepic:"",
  70.                                 video:false,
  71.                                 share:false,
  72.                                 path:"深圳 龙岗",
  73.                                 sharenum:20,
  74.                                 commentnum:30,
  75.                                 goodnum:20
  76.                             },
  77.                             // 图文
  78.                             {
  79.                                 userpic:"../../static/demo/userpic/12.jpg",
  80.                                 username:"哈哈",
  81.                                 sex:0, //0 男 1 女
  82.                                 age:25,
  83.                                 isguanzhu:false,
  84.                                 title:"我是标题",
  85.                                 titlepic:"../../static/demo/datapic/13.jpg",
  86.                                 video:false,
  87.                                 share:false,
  88.                                 path:"深圳 龙岗",
  89.                                 sharenum:20,
  90.                                 commentnum:30,
  91.                                 goodnum:20
  92.                             },
  93.                             // 视频
  94.                             {
  95.                                 userpic:"../../static/demo/userpic/12.jpg",
  96.                                 username:"哈哈",
  97.                                 sex:0, //0 男 1 女
  98.                                 age:25,
  99.                                 isguanzhu:false,
  100.                                 title:"我是标题",
  101.                                 titlepic:"../../static/demo/datapic/13.jpg",
  102.                                 video:{
  103.                                     looknum:"20w",
  104.                                     long:"2:47"
  105.                                 },
  106.                                 share:false,
  107.                                 path:"深圳 龙岗",
  108.                                 sharenum:20,
  109.                                 commentnum:30,
  110.                                 goodnum:20
  111.                             },
  112.                         ]
  113.                     },
  114.                 ]

在里面还要循环
引入公共列表的组件。
image.png

image.png

  1. import commonList from '@/components/common/common-list.vue';
  3. components: {
  4.             topicInfo,
  5.             swiperTabHead,
  6.             commonList
  7.         },

image.png

  1. <view class="topic-detail-list">
  2.             <block v-for="(item,index) in tablist" :key="index">
  3.                 <template v-if="tabIndex==index">
  4.                     <block v-for="(list,listindex) in item.list" :key="listindex">
  5.                         <common-list :item="list" :index="listindex"></common-list>
  6.                     </block>
  7.                 </template>
  8.             </block>
  9.         </view>

image.png

最终代码

组件swiper-tab-header.vue

  1. <template>
  2.     <view class="uni-tab-bar">
  3.         <scroll-view scroll-x class="uni-swiper-tab" :style="scrollStyle">
  4.             <block v-for="(tab,index) in tabBars" :key="tab.id">
  5.                 <view class="swiper-tab-list" :class="{'active':tabIndex==index}" 
  6.                 @tap="tabtap(index)"
  7.                 :style="scrollItemStyle">
  8.                     {{tab.name}}
  9.                     <view class="swiper-tab-line u-f-ajc">
  10.                         <view class="swiper-tab-line-child"></view>
  11.                     </view>
  12.                 </view>
  13.             </block>
  14.         </scroll-view>
  15.     </view>
  16. </template>
  18. <script>
  19.     export default {
  20.         props: {
  21.             tabBars: Array,
  22.             tabIndex: Number,
  23.             scrollStyle:{
  24.                 type: String,
  25.                 default: ''
  26.             },
  27.             scrollItemStyle:{
  28.                 type: String,
  29.                 default: ''
  30.             }
  31.         },
  32.         methods: {
  33.             // tabbar点击事件
  34.             tabtap(index) {
  35.                 console.log('点击事件');
  36.                 this.$emit('tabtap', index);
  37.             }
  39.         }
  40.     }
  41. </script>
  43. <style scoped>
  44.     .uni-swiper-tab {
  45.         border-bottom: 1upx solid #EEEEEE;
  46.     }
  48.     .swiper-tab-list {
  49.         color: #969696;
  50.         font-weight: bold;
  51.     }
  53.     .uni-tab-bar .active {
  54.         color: #343434;
  55.     }
  57.     .active .swiper-tab-line {
  58.         /* border-bottom: 6upx solid #FEDE33; */
  59.         /* width: 70upx;
  60.         margin-top: -30upx;
  61.         margin: auto;
  62.         margin-left: 40upx;
  63.         border-top: 12upx solid #FEDE33;
  64.         border-radius: 20upx;*/
  65.         /* 用相对定位,子元素用绝对定位再定位于一下 */
  66.         position: relative;
  67.     }
  68.     .swiper-tab-line-child{
  69.         width: 80upx;
  70.         border-top: 15upx solid #FEDE33;
  71.         border-radius: 20upx;
  72.         position: absolute;
  73.         top:-28upx;
  74.     }
  75. </style>

topic-detail.vue页面

  1. <template>
  2.     <view>
  3.         <!-- 话题介绍 -->
  4.         <topic-info :item="topicInfo"></topic-info>
  5.         <!-- tabbar切换 -->
  6.         <swiper-tab-head :tabBars="tabBars" :tabIndex="tabIndex" @tabtap="tabtap" scrollStyle="border-bottom:0;"
  7.             scrollItemStyle="width:50%;">
  8.         </swiper-tab-head>
  9.         <view class="topic-detail-list">
  10.             <block v-for="(item,index) in tablist" :key="index">
  11.                 <template v-if="tabIndex==index">
  12.                     <block v-for="(list,listindex) in item.list" :key="listindex">
  13.                         <common-list :item="list" :index="listindex"></common-list>
  14.                     </block>
  15.                 </template>
  16.             </block>
  17.         </view>
  18.     </view>
  19. </template>
  21. <script>
  22.     import topicInfo from '@/components/topic/topic-info.vue';
  23.     import swiperTabHead from '@/components/index/swiper-tab-head.vue';
  24.     import commonList from '@/components/common/common-list.vue';
  25.     export default {
  26.         components: {
  27.             topicInfo,
  28.             swiperTabHead,
  29.             commonList
  30.         },
  31.         data() {
  32.             return {
  33.                 topicInfo: {
  34.                     titlepic: "../../static/demo/topicpic/13.jpeg",
  35.                     title: "忆往事，敬余生",
  36.                     desc: "我是描述",
  37.                     totalnum: 1000,
  38.                     todaynum: 1000,
  39.                 },
  40.                 tabIndex: 0,
  41.                 tabBars: [{
  42.                         name: "默认",
  43.                         id: "moren"
  44.                     },
  45.                     {
  46.                         name: "最新",
  47.                         id: "zuixin"
  48.                     },
  49.                 ],
  50.                 tablist: [{
  51.                         loadtext: "上拉加载更多",
  52.                         list: [
  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: false,
  64.                                 path: "深圳 龙岗",
  65.                                 sharenum: 20,
  66.                                 commentnum: 30,
  67.                                 goodnum: 20
  68.                             },
  69.                             // 图文
  70.                             {
  71.                                 userpic: "../../static/demo/userpic/12.jpg",
  72.                                 username: "哈哈",
  73.                                 sex: 0, //0 男 1 女
  74.                                 age: 25,
  75.                                 isguanzhu: false,
  76.                                 title: "我是标题",
  77.                                 titlepic: "../../static/demo/datapic/13.jpg",
  78.                                 video: false,
  79.                                 share: false,
  80.                                 path: "深圳 龙岗",
  81.                                 sharenum: 20,
  82.                                 commentnum: 30,
  83.                                 goodnum: 20
  84.                             },
  85.                             // 视频
  86.                             {
  87.                                 userpic: "../../static/demo/userpic/12.jpg",
  88.                                 username: "哈哈",
  89.                                 sex: 0, //0 男 1 女
  90.                                 age: 25,
  91.                                 isguanzhu: false,
  92.                                 title: "我是标题",
  93.                                 titlepic: "../../static/demo/datapic/13.jpg",
  94.                                 video: {
  95.                                     looknum: "20w",
  96.                                     long: "2:47"
  97.                                 },
  98.                                 share: false,
  99.                                 path: "深圳 龙岗",
  100.                                 sharenum: 20,
  101.                                 commentnum: 30,
  102.                                 goodnum: 20
  103.                             },
  104.                         ]
  105.                     },
  106.                     {
  107.                         loadtext: "上拉加载更多",
  108.                         list: [
  109.                             // 文字
  110.                             {
  111.                                 userpic: "../../static/demo/userpic/12.jpg",
  112.                                 username: "哈哈",
  113.                                 sex: 0, //0 男 1 女
  114.                                 age: 25,
  115.                                 isguanzhu: false,
  116.                                 title: "我是标题",
  117.                                 titlepic: "",
  118.                                 video: false,
  119.                                 share: false,
  120.                                 path: "深圳 龙岗",
  121.                                 sharenum: 20,
  122.                                 commentnum: 30,
  123.                                 goodnum: 20
  124.                             },
  125.                             // 图文
  126.                             {
  127.                                 userpic: "../../static/demo/userpic/12.jpg",
  128.                                 username: "哈哈",
  129.                                 sex: 0, //0 男 1 女
  130.                                 age: 25,
  131.                                 isguanzhu: false,
  132.                                 title: "我是标题",
  133.                                 titlepic: "../../static/demo/datapic/13.jpg",
  134.                                 video: false,
  135.                                 share: false,
  136.                                 path: "深圳 龙岗",
  137.                                 sharenum: 20,
  138.                                 commentnum: 30,
  139.                                 goodnum: 20
  140.                             },
  141.                             // 视频
  142.                             {
  143.                                 userpic: "../../static/demo/userpic/12.jpg",
  144.                                 username: "哈哈",
  145.                                 sex: 0, //0 男 1 女
  146.                                 age: 25,
  147.                                 isguanzhu: false,
  148.                                 title: "我是标题",
  149.                                 titlepic: "../../static/demo/datapic/13.jpg",
  150.                                 video: {
  151.                                     looknum: "20w",
  152.                                     long: "2:47"
  153.                                 },
  154.                                 share: false,
  155.                                 path: "深圳 龙岗",
  156.                                 sharenum: 20,
  157.                                 commentnum: 30,
  158.                                 goodnum: 20
  159.                             },
  160.                         ]
  161.                     },
  162.                 ]
  163.             }
  164.         },
  165.         methods: {
  166.             // tabbar点击事件
  167.             tabtap(index) {
  168.                 // console.log(index);
  169.                 this.tabIndex = index;
  170.             }
  171.         }
  172.     }
  173. </script>
  175. <style>
  177. </style>

结束