开始

先完善下面内容的切换。

首先来看官方给的模板是怎么切换的。下面用的是swiper
image.png
先来看下官方给的组件
https://uniapp.dcloud.io/component/swiper.html
image.png
image.png
里面嵌套的就是scroll-view
image.png
image.png
生成这一堆
image.png
滚动的时候 ，底部的点 滚动到第几个了。
image.png
这里我们就设置为false，然后自动播放也设置为false

image.png
都是默认false的 所以就取消掉了。
image.png

  1. <swiper>
  2.             <swiper-item>
  3.                 <view class="swiper-item"></view>
  4.             </swiper-item>
  5.             <swiper-item>
  6.                 <view class="swiper-item"></view>
  7.             </swiper-item>
  8.         </swiper>

里面就嵌套scroll-view
image.png
把官方例子的class复制过来。
image.png

image.png
连就放我们的列表数据
image.png

  1. <swiper class="swiper-box">
  2.             <swiper-item>
  3.                 <scroll-view scroll-y class="list">
  4.                     <block v-for="(item,index) in list" :key="index">
  5.                         <index-list :item="item" :index="index"></index-list>
  6.                     </block>
  7.                 </scroll-view>
  8.             </swiper-item>
  9.         </swiper>

有多少个tab就写多少个list数据
image.png
有几个tab就造几个list对象
image.png

image.png

  1. <swiper class="swiper-box">
  2.             <swiper-item v-for="(items,index) in newslist" :key="index">
  3.                 <scroll-view scroll-y class="list">
  4.                     <block v-for="(item,index1) in items.list" :key="index1">
  5.                         <index-list :item="item" :index="index1"></index-list>
  6.                     </block>
  7.                 </scroll-view>
  8.             </swiper-item>
  9.         </swiper>

显示不全，样式有问题。
image.png
官方默认的样式
image.png
外层嵌套一个view
image.png

  1. <view class="uni-tab-bar">
  2.             <swiper class="swiper-box">
  3.                 <swiper-item v-for="(items,index) in newslist" :key="index">
  4.                     <scroll-view scroll-y class="list">
  5.                         <block v-for="(item,index1) in items.list" :key="index1">
  6.                             <index-list :item="item" :index="index1"></index-list>
  7.                         </block>
  8.                     </scroll-view>
  9.                 </swiper-item>
  10.             </swiper>
  11.         </view>

直接啥也不显示了。肯定就是我们的高度没有起效果。
image.png
整个窗口的可视区域减去tabbar的高度
image.png
搜索到tab的高度
image.png
用uni-app提供的接口获取窗口的高度，减去tab的高度。
先来给box随便设置一个高度试试。
image.png
有效果，但是高度不足，空白部分，高度没有到这里，所以我们要把高度赋值给swiper-box
image.png
设置高度的变量。
image.png

  1. swiperheight:500,

这里为什么用px呢？
image.png

  1. <swiper class="swiper-box" :style="{height: swiperheight+'px'}">

image.png
直接在dom元素上写style的高度智能用px ，不支持upx
image.png
image.png
获取手机的可视窗口https://uniapp.dcloud.io/api/system/info.html#getsysteminfo
image.png

image.png

image.png
复制代码
image.png

  1. uni.getSystemInfo({
  2.     success: function (res) {
  3.         console.log(res.model);
  4.         console.log(res.pixelRatio);
  5.         console.log(res.windowWidth);
  6.         console.log(res.windowHeight);
  7.         console.log(res.language);
  8.         console.log(res.version);
  9.         console.log(res.platform);
  10.     }
  11. });

image.png
改成es6写法，箭头函数
image.png

image.png

image.png

  1. onLoad() {
  2.             uni.getSystemInfo({
  3.                 success: (res) => {
  4.                     console.log('当前window高度和窗口高度');
  5.                     console.log(res.windowHeight);
  6.                     console.log(res.screenHeight);
  7.                 }
  8.             });
  9.         },

516才是我们想要的。
image.png
减去tab的高度100
image.png

  1. onLoad() {
  2.             uni.getSystemInfo({
  3.                 success: (res) => {
  4.                     console.log('当前window高度和窗口高度');
  5.                     console.log(res.windowHeight);
  6.                     console.log(res.screenHeight);
  7.                     let height = res.windowHeight - uni.upx2px(100)
  8.                     this.swiperheight = height+100;
  9.                 }
  10.             });
  11.         },

得到468
image.png
计算出来的高度赋值给变量。
image.png
我本机在H5上测试，这里如果减去了100 最后一条数据无法显示全，所以我在最后又加上了100.这样2条数据正好显示出来了。 带滚动条的。
image.png
这个时候高度就刚刚好了
image.png

tab数据切换

第二个tab也造上数据。还有第三个
image.png
当前选中的
image.png

image.png
滚动了
image.png

image.png
当左右滑动的时候，上面不会变
image.png

增加一个监听事件

image.png

image.png

  1. <swiper class="swiper-box" 
  2.             :style="{height: swiperheight+'px'}"
  3.             :current="tabIndex"
  4.             :change="tabChange">

image.png
image.png

image.png

image.png

image.png

image.png

最终效果

向左滑动 切换了tab
image.png

本节最终代码

这里的class=”swiper-box” 我没有嵌套在带uni-tab-bar的view下面，如果嵌套了页面数据会全都不显示。自己在做的时候发现和视频中不一样

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

结束