uni-app顶部选项卡非原生，以及列表左右滚动

1.在手机上打开统一应用软件，找到底部列表（实例），然后选择顶部模板

下来就能看见顶部选项卡

2.打开HBuilder软件 ，创建项目，把hello-uni-app 创建好。 里面集合了很多组件。

在里面找到pages.json ，这个可以找到我们想要的模板路径

3.找路径，D:/uniapp学习/uni-app/pages/template/tabbar/tabbar.nvue

4.在index.vue   里面根据3的代码结构进行创建。

<style>
       .uni-swiper-tab{
           border-bottom: 1upx solid #EEEEEE;
       }
       .swiper-tab-list{
           color: #969696;
           font-weight: bold;
       }
       .uni-tab-bar .active{
           color: #343434;
       }
       .active .swiper-tab-line{
           border-bottom: 6upx solid #FEDE33;
           width: 70upx;
           margin:auto;
           border-top: 6upx solid #FEDE33;
           border-radius:20upx;
       }
</style>

<!-- 顶部tab选项卡 -->
        <view class="uni-tab-bar">
            <scroll-view scroll-x class="uni-swiper-tab">
                <block v-for="(tab,index) in tabBars" :key="tab.id">
                    <view class="swiper-tab-list" 
                    :class="{'active':tabIndex==index}"
                    @tap="tabtap(index)">
                        {{tab.name}}
                        <view class="swiper-tab-line"></view>
                    </view>
                </block>
            </scroll-view>
        </view>
    
        <!-- 顶部tab选项卡 -->

<script>
    //7.引入组件,选择第3个,from 后面选择组件库  ,前面命名下组件列表（index-list ），要用驼峰命名，不能有‘ - ’，分号结尾 
    import indexList from "@/components/index/index-list.vue";
    export default {
        
        //7.1 把数据接收过来。
        components:{
            indexList:indexList
        },
        data() {
            return {
                tabIndex: 0,
                tabBars: [{
                    name: '关注1',
                    id: 'guanzhu'
                }, {
                    name: '推荐',
                    id: 'tuijian'
                }, {
                    name: '体育',
                    id: 'tiyu'
                }, {
                    name: '热点',
                    id: 'redian'
                }, {
                    name: '财经',
                    id: 'caijing'
                }, {
                    name: '娱乐',
                    id: 'yule'
                }, {
                    name: '军事',
                    id: 'junshi'
                }, {
                    name: '历史',
                    id: 'lishi'
                }, {
                    name: '本地',
                    id: 'bendi'
                }],
                //1.渲染数据
                list:[
                    {
                    userpic:"../../static/demo/userpic/2.jpg",
                    username:"鲁大师",
                    isguanzhu:false,
                    title:"走出去，才发现你跟比人查的不是一点半点",
                    type:"img", //img:图文，video：视频
                    titlepic:"../../static/demo/datapic/1.jpg",
                    infomsg:{
                        index:2, //0:默认,1:顶，2:踩
                        ding:11,
                        cai:12
                    },
                    commentnum:10,
                    sharenum:10
                },
                {
                    userpic:"../../static/demo/userpic/3.jpg",
                    username:"大宝贝",
                    isguanzhu:true,
                    title:"走出去，才发现你跟比人查的不是一点半点",
                    type:"video", //img:图文，video：视频
                    titlepic:"../../static/demo/datapic/2.jpg",
                    play:"20w",
                    long:"2:47",
                    infomsg:{
                        index:1, //0:默认,1:顶，2:踩
                        ding:11,
                        cai:12
                    },
                    commentnum:10,
                    sharenum:10
                }
                
                ]
            }
        },
        onLoad() {

        },
        methods: {
            tabtap(index){
                this.tabIndex = index;
            }
        },
    }
</script>

 列表左右滚动

    <view class="uni-tab-bar">
        <swiper class="swiper-box">
            <swiper-item v-for="(items,index) in newsList" :key="index">
                <scroll-view scroll-y="true" >  <!--scrv -->
                    <block v-for="(item,index1) in items.list" :key="index1">
                        <index-list :item="item" :index="index1"></index-list>
                    </block>
                </scroll-view>
            </swiper-item>
            
        </swiper>
        </view>

newsList:[
                    {list:[
                        {
                            userpic:"../../static/demo/userpic/2.jpg",
                            username:"鲁大师111",
                            isguanzhu:false,
                            title:"走出去，才发现你跟比人查的不是一点半点",
                            type:"img", //img:图文，video：视频
                            titlepic:"../../static/demo/datapic/1.jpg",
                            infomsg:{
                                index:2, //0:默认,1:顶，2:踩
                                ding:11,
                                cai:12
                            },
                            commentnum:10,
                            sharenum:10
                        },
                        {
                            userpic:"../../static/demo/userpic/3.jpg",
                            username:"大宝贝",
                            isguanzhu:true,
                            title:"走出去，才发现你跟比人查的不是一点半点",
                            type:"video", //img:图文，video：视频
                            titlepic:"../../static/demo/datapic/2.jpg",
                            play:"20w",
                            long:"2:47",
                            infomsg:{
                                index:1, //0:默认,1:顶，2:踩
                                ding:11,
                                cai:12
                            },
                            commentnum:10,
                            sharenum:10
                        },
                        {
                            userpic:"../../static/demo/userpic/2.jpg",
                            username:"鲁大师",
                            isguanzhu:false,
                            title:"走出去，才发现你跟比人查的不是一点半点",
                            type:"img", //img:图文，video：视频
                            titlepic:"../../static/demo/datapic/1.jpg",
                            infomsg:{
                                index:2, //0:默认,1:顶，2:踩
                                ding:11,
                                cai:12
                            },
                            commentnum:10,
                            sharenum:10
                        },
                        {
                            userpic:"../../static/demo/userpic/3.jpg",
                            username:"大宝贝",
                            isguanzhu:true,
                            title:"走出去，才发现你跟比人查的不是一点半点",
                            type:"video", //img:图文，video：视频
                            titlepic:"../../static/demo/datapic/2.jpg",
                            play:"20w",
                            long:"2:47",
                            infomsg:{
                                index:1, //0:默认,1:顶，2:踩
                                ding:11,
                                cai:12
                            },
                            commentnum:10,
                            sharenum:10
                        }
                    ]},
                    {list:[
                        {
                            userpic:"../../static/demo/userpic/2.jpg",
                            username:"鲁大师222",
                            isguanzhu:false,
                            title:"走出去，才发现你跟比人查的不是一点半点",
                            type:"img", //img:图文，video：视频
                            titlepic:"../../static/demo/datapic/1.jpg",
                            infomsg:{
                                index:2, //0:默认,1:顶，2:踩
                                ding:11,
                                cai:12
                            },
                            commentnum:10,
                            sharenum:10
                        },
                        {
                            userpic:"../../static/demo/userpic/3.jpg",
                            username:"大宝贝",
                            isguanzhu:true,
                            title:"走出去，才发现你跟比人查的不是一点半点",
                            type:"video", //img:图文，video：视频
                            titlepic:"../../static/demo/datapic/2.jpg",
                            play:"20w",
                            long:"2:47",
                            infomsg:{
                                index:1, //0:默认,1:顶，2:踩
                                ding:11,
                                cai:12
                            },
                            commentnum:10,
                            sharenum:10
                        },
                        {
                            userpic:"../../static/demo/userpic/2.jpg",
                            username:"鲁大师",
                            isguanzhu:false,
                            title:"走出去，才发现你跟比人查的不是一点半点",
                            type:"img", //img:图文，video：视频
                            titlepic:"../../static/demo/datapic/1.jpg",
                            infomsg:{
                                index:2, //0:默认,1:顶，2:踩
                                ding:11,
                                cai:12
                            },
                            commentnum:10,
                            sharenum:10
                        },
                        {
                            userpic:"../../static/demo/userpic/3.jpg",
                            username:"大宝贝",
                            isguanzhu:true,
                            title:"走出去，才发现你跟比人查的不是一点半点",
                            type:"video", //img:图文，video：视频
                            titlepic:"../../static/demo/datapic/2.jpg",
                            play:"20w",
                            long:"2:47",
                            infomsg:{
                                index:1, //0:默认,1:顶，2:踩
                                ding:11,
                                cai:12
                            },
                            commentnum:10,
                            sharenum:10
                        }
                    ]},
                    {list:[
                        {
                            userpic:"../../static/demo/userpic/2.jpg",
                            username:"鲁大师333",
                            isguanzhu:false,
                            title:"走出去，才发现你跟比人查的不是一点半点",
                            type:"img", //img:图文，video：视频
                            titlepic:"../../static/demo/datapic/1.jpg",
                            infomsg:{
                                index:2, //0:默认,1:顶，2:踩
                                ding:11,
                                cai:12
                            },
                            commentnum:10,
                            sharenum:10
                        },
                        {
                            userpic:"../../static/demo/userpic/3.jpg",
                            username:"大宝贝",
                            isguanzhu:true,
                            title:"走出去，才发现你跟比人查的不是一点半点",
                            type:"video", //img:图文，video：视频
                            titlepic:"../../static/demo/datapic/2.jpg",
                            play:"20w",
                            long:"2:47",
                            infomsg:{
                                index:1, //0:默认,1:顶，2:踩
                                ding:11,
                                cai:12
                            },
                            commentnum:10,
                            sharenum:10
                        },
                        {
                            userpic:"../../static/demo/userpic/2.jpg",
                            username:"鲁大师",
                            isguanzhu:false,
                            title:"走出去，才发现你跟比人查的不是一点半点",
                            type:"img", //img:图文，video：视频
                            titlepic:"../../static/demo/datapic/1.jpg",
                            infomsg:{
                                index:2, //0:默认,1:顶，2:踩
                                ding:11,
                                cai:12
                            },
                            commentnum:10,
                            sharenum:10
                        },
                        {
                            userpic:"../../static/demo/userpic/3.jpg",
                            username:"大宝贝",
                            isguanzhu:true,
                            title:"走出去，才发现你跟比人查的不是一点半点",
                            type:"video", //img:图文，video：视频
                            titlepic:"../../static/demo/datapic/2.jpg",
                            play:"20w",
                            long:"2:47",
                            infomsg:{
                                index:1, //0:默认,1:顶，2:踩
                                ding:11,
                                cai:12
                            },
                            commentnum:10,
                            sharenum:10
                        }
                    ]},
                ],

此事列表数据消失，是因为高度没有了。 

可以通过添加高度方式知道给哪个view设置高度。

 

 

 

通过uniapp  里面 接口 ，api  ，设备， 系统信息  ，添加加载时候获取视口高度

uni.getSystemInfo({
                //es6 写法,success: (res) =>
                success: (res) => {
                    
                 //可使用窗口宽度    
                    let height = res.windowHeight-uni.upx2px(100)
                    console.log(height);
                    this.swiperheight = height
                
                }
            });

 

左右滑动切换数据

    <swiper class="swiper-box" :style="{height:swiperheight+'px'}" :current="tabIndex" @change="tabChange">
//current="tabIndex" //点击顶部按钮切换列表左右移动
//@change = "tabChange"  滑动切换触发。


//methods
methods: {
            tabtap(index){
                this.tabIndex = index;
            },
            //@chang  当数据发生改变时候触发
            tabChange(e){
                console.log(JSON.stringify(e.detail));
                this.tabIndex = e.detail.current;
            }
        },