开始

封装这个组件。在后面的话题分类也会用到这个组件。
image.png
swiper-tab-head
image.png
image.png
输入default
image.png
之前写的内容整个的复制过来
image.png

  1. <view class="uni-tab-bar">
  2.         <scroll-view scroll-x class="uni-swiper-tab">
  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.                     {{tab.name}}
  6.                     <view class="swiper-tab-line"></view>
  7.                 </view>
  9.             </block>
  10.         </scroll-view>
  11.     </view>

复制点击事件
image.png

image.png

  1. methods:{
  2.             // tabbar点击事件
  3.             tabtap(index) {
  4.                 this.tabIndex = index;
  5.             }
  7.         }

所有的css都复制过来

定义props传入的数据
image.png

  1. props:{
  2.             tabBars: Array,
  3.             tabIndex: Number            
  4.         },

父子组件的通讯

引入组件
image.png

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

注册一下这个组件
image.png

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

使用组件
image.png

  1. <swiper-tab-head :tabBars="tabBars" :tabIndex="tabIndex"></swiper-tab-head>

当前索引传递给父组件。
image.png

  1. tabtap(index) {
  2.                 this.$emit('tabtap',index);
  3.             }

父组件监听事件
image.png

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

image.png

  1. tabtap(index){
  2.                 console.log(index);
  3.                 this.tabIndex=index;
  4.             }

image.png

本节代码

swiper-tab-head组件

  1. <template>
  2.     <view class="uni-tab-bar">
  3.         <scroll-view scroll-x class="uni-swiper-tab">
  4.             <block v-for="(tab,index) in tabBars" :key="tab.id">
  5.                 <view class="swiper-tab-list" :class="{'active':tabIndex==index}" @tap="tabtap(index)">
  6.                     {{tab.name}}
  7.                     <view class="swiper-tab-line"></view>
  8.                 </view>
  9.             </block>
  10.         </scroll-view>
  11.     </view>
  12. </template>
  14. <script>
  15.     export default {
  16.         props:{
  17.             tabBars: Array,
  18.             tabIndex: Number            
  19.         },
  20.         methods:{
  21.             // tabbar点击事件
  22.             tabtap(index) {
  23.                 console.log('点击事件');
  24.                 this.$emit('tabtap',index);
  25.             }
  27.         }
  28.     }
  29. </script>
  31. <style scoped>
  32.     .uni-swiper-tab {
  33.         border-bottom: 1upx solid #EEEEEE;
  34.     }
  36.     .swiper-tab-list {
  37.         color: #969696;
  38.         font-weight: bold;
  39.     }
  41.     .uni-tab-bar .active {
  42.         color: #343434;
  43.     }
  45.     .active .swiper-tab-line {
  46.         /* border-bottom: 6upx solid #FEDE33; */
  47.         width: 70upx;
  48.         margin-top: -30upx;
  49.         /* margin: auto; */
  50.         margin-left: 40upx;
  51.         border-top: 12upx solid #FEDE33;
  52.         border-radius: 20upx;
  53.     }
  54. </style>

index.vue

  1. <template>
  2.     <view>
  3.         <swiper-tab-head 
  4.         :tabBars="tabBars" 
  5.         :tabIndex="tabIndex"
  6.         @tabtap="tabtap">
  7.         </swiper-tab-head>
  8.          <!-- class="uni-tab-bar" -->
  9.         <view>
  10.             <swiper class="swiper-box" 
  11.             :style="{height: swiperheight+'px'}"
  12.             :current="tabIndex"
  13.             :change="tabChange">
  14.                 <swiper-item v-for="(items,index) in newslist" :key="index">
  15.                     <scroll-view scroll-y class="list">
  16.                         <block v-for="(item,index1) in items.list" :key="index1">
  17.                             <index-list :item="item" :index="index1"></index-list>
  18.                         </block>
  19.                     </scroll-view>
  20.                 </swiper-item>
  21.             </swiper>
  22.         </view>
  25.     </view>
  26. </template>
  28. <script>
  29.     import indexList from '@/components/index/index-list.vue';
  30.     import swiperTabHead from '@/components/index/swiper-tab-head.vue';
  31.     export default {
  32.         components: {
  33.             indexList,
  34.             swiperTabHead
  35.         },
  36.         data() {
  37.             return {
  38.                 swiperheight:500,
  39.                 tabIndex: 0,
  40.                 tabBars: [{
  41.                         name: "关注",
  42.                         id: "guanzhu"
  43.                     },
  44.                     {
  45.                         name: "推荐",
  46.                         id: "tuijian"
  47.                     },
  48.                     {
  49.                         name: "体育",
  50.                         id: "tiyu"
  51.                     },
  52.                     {
  53.                         name: "热点",
  54.                         id: "redian"
  55.                     },
  56.                     {
  57.                         name: "财经",
  58.                         id: "caijing"
  59.                     },
  60.                     {
  61.                         name: "娱乐",
  62.                         id: "yule"
  63.                     },
  64.                 ],
  65.                 newslist: [{
  66.                         list: [{
  67.                                 userpic: "../../static/demo/userpic/12.jpg",
  68.                                 username: "昵称",
  69.                                 isguanzhu: false,
  70.                                 title: "我是标题",
  71.                                 type: "img", // img:图文,video:视频
  72.                                 titlepic: "../../static/demo/datapic/11.jpg",
  73.                                 infonum: {
  74.                                     index: 0, //0:没有操作，1:顶,2:踩；
  75.                                     dingnum: 11,
  76.                                     cainum: 11,
  77.                                 },
  78.                                 commentnum: 10,
  79.                                 sharenum: 10,
  80.                             },
  81.                             {
  82.                                 userpic: "../../static/demo/userpic/12.jpg",
  83.                                 username: "昵称",
  84.                                 isguanzhu: true,
  85.                                 title: "我是标题",
  86.                                 type: "video", // img:图文,video:视频
  87.                                 titlepic: "../../static/demo/datapic/11.jpg",
  88.                                 playnum: "20w",
  89.                                 long: "2:47",
  90.                                 infonum: {
  91.                                     index: 1, //0:没有操作，1:顶,2:踩；
  92.                                     dingnum: 11,
  93.                                     cainum: 11,
  94.                                 },
  95.                                 commentnum: 10,
  96.                                 sharenum: 10,
  97.                             }
  98.                         ]
  99.                     },
  100.                     {
  101.                         list: [{
  102.                                 userpic: "../../static/demo/userpic/12.jpg",
  103.                                 username: "昵称",
  104.                                 isguanzhu: false,
  105.                                 title: "我是标题",
  106.                                 type: "img", // img:图文,video:视频
  107.                                 titlepic: "../../static/demo/datapic/11.jpg",
  108.                                 infonum: {
  109.                                     index: 0, //0:没有操作，1:顶,2:踩；
  110.                                     dingnum: 11,
  111.                                     cainum: 11,
  112.                                 },
  113.                                 commentnum: 10,
  114.                                 sharenum: 10,
  115.                             },
  116.                             {
  117.                                 userpic: "../../static/demo/userpic/12.jpg",
  118.                                 username: "昵称",
  119.                                 isguanzhu: true,
  120.                                 title: "我是标题",
  121.                                 type: "video", // img:图文,video:视频
  122.                                 titlepic: "../../static/demo/datapic/11.jpg",
  123.                                 playnum: "20w",
  124.                                 long: "2:47",
  125.                                 infonum: {
  126.                                     index: 1, //0:没有操作，1:顶,2:踩；
  127.                                     dingnum: 11,
  128.                                     cainum: 11,
  129.                                 },
  130.                                 commentnum: 10,
  131.                                 sharenum: 10,
  132.                             },
  133.                             {
  134.                                 userpic: "../../static/demo/userpic/12.jpg",
  135.                                 username: "昵称",
  136.                                 isguanzhu: false,
  137.                                 title: "我是标题",
  138.                                 type: "img", // img:图文,video:视频
  139.                                 titlepic: "../../static/demo/datapic/11.jpg",
  140.                                 infonum: {
  141.                                     index: 0, //0:没有操作，1:顶,2:踩；
  142.                                     dingnum: 11,
  143.                                     cainum: 11,
  144.                                 },
  145.                                 commentnum: 10,
  146.                                 sharenum: 10,
  147.                             },
  148.                             {
  149.                                 userpic: "../../static/demo/userpic/12.jpg",
  150.                                 username: "昵称",
  151.                                 isguanzhu: true,
  152.                                 title: "我是标题",
  153.                                 type: "video", // img:图文,video:视频
  154.                                 titlepic: "../../static/demo/datapic/11.jpg",
  155.                                 playnum: "20w",
  156.                                 long: "2:47",
  157.                                 infonum: {
  158.                                     index: 1, //0:没有操作，1:顶,2:踩；
  159.                                     dingnum: 11,
  160.                                     cainum: 11,
  161.                                 },
  162.                                 commentnum: 10,
  163.                                 sharenum: 10,
  164.                             }
  165.                         ]
  166.                     },
  167.                     {
  168.                         list: [{
  169.                                 userpic: "../../static/demo/userpic/12.jpg",
  170.                                 username: "昵称",
  171.                                 isguanzhu: false,
  172.                                 title: "我是标题",
  173.                                 type: "img", // img:图文,video:视频
  174.                                 titlepic: "../../static/demo/datapic/11.jpg",
  175.                                 infonum: {
  176.                                     index: 0, //0:没有操作，1:顶,2:踩；
  177.                                     dingnum: 11,
  178.                                     cainum: 11,
  179.                                 },
  180.                                 commentnum: 10,
  181.                                 sharenum: 10,
  182.                             },
  183.                             {
  184.                                 userpic: "../../static/demo/userpic/12.jpg",
  185.                                 username: "昵称",
  186.                                 isguanzhu: true,
  187.                                 title: "我是标题",
  188.                                 type: "video", // img:图文,video:视频
  189.                                 titlepic: "../../static/demo/datapic/11.jpg",
  190.                                 playnum: "20w",
  191.                                 long: "2:47",
  192.                                 infonum: {
  193.                                     index: 1, //0:没有操作，1:顶,2:踩；
  194.                                     dingnum: 11,
  195.                                     cainum: 11,
  196.                                 },
  197.                                 commentnum: 10,
  198.                                 sharenum: 10,
  199.                             },
  200.                             {
  201.                                 userpic: "../../static/demo/userpic/12.jpg",
  202.                                 username: "昵称",
  203.                                 isguanzhu: false,
  204.                                 title: "我是标题",
  205.                                 type: "img", // img:图文,video:视频
  206.                                 titlepic: "../../static/demo/datapic/11.jpg",
  207.                                 infonum: {
  208.                                     index: 0, //0:没有操作，1:顶,2:踩；
  209.                                     dingnum: 11,
  210.                                     cainum: 11,
  211.                                 },
  212.                                 commentnum: 10,
  213.                                 sharenum: 10,
  214.                             },
  215.                             {
  216.                                 userpic: "../../static/demo/userpic/12.jpg",
  217.                                 username: "昵称",
  218.                                 isguanzhu: true,
  219.                                 title: "我是标题",
  220.                                 type: "video", // img:图文,video:视频
  221.                                 titlepic: "../../static/demo/datapic/11.jpg",
  222.                                 playnum: "20w",
  223.                                 long: "2:47",
  224.                                 infonum: {
  225.                                     index: 1, //0:没有操作，1:顶,2:踩；
  226.                                     dingnum: 11,
  227.                                     cainum: 11,
  228.                                 },
  229.                                 commentnum: 10,
  230.                                 sharenum: 10,
  231.                             }
  232.                         ]
  233.                     },
  234.                     {
  235.                         list: []
  236.                     },
  237.                     {
  238.                         list: []
  239.                     },
  240.                     {
  241.                         list: []
  242.                     }
  243.                 ]
  244.             }
  245.         },
  246.         onLoad() {
  247.             uni.getSystemInfo({
  248.                 success: (res) => {
  249.                     console.log('当前window高度和窗口高度');
  250.                     console.log(res.windowHeight);
  251.                     console.log(res.screenHeight);
  252.                     let height = res.windowHeight - uni.upx2px(100)
  253.                     this.swiperheight = height+100;
  254.                 }
  255.             });
  256.         },
  257.         methods: {
  258.             // 滑动事件
  259.             tabChange(e) {
  260.                 this.tabIndex = e.details.current
  261.             },
  262.             tabtap(index){
  263.                 console.log(index);
  264.                 this.tabIndex=index;
  265.             }
  266.         }
  267.     }
  268. </script>
  270. <style>
  272.     /* .swiper-box{
  273.         height: 700upx!important;
  274.     } */
  275. </style>

结束