uni-app使用scrollview+swiper实现滑动切换页面功能

效果图：

一、创建自定义组件 scrollbar.vue

<template>
    <view class=”uni-tab-bar”>
        <scroll-view class=”uni-swiper-tab” scroll-x=”true”>
            <block v-for=”(tab,index) in tabBars” :style=”scrollStyle”>
                <view class=”swiper-tab-list” :class=”{‘active’ : tabIndex==index}” @tap=”tabtap(index)”
                    :style=”scrollItemStyle”>
                    {{tab.name}} {{tab.num?tab.num:””}}
                    <view class=”swiper-tab-line”></view>
                </view>
            </block>
        </scroll-view>
    </view>
</template>

<script>
    export default {
        props: {
            tabBars: Array,
            tabIndex: Number,
            scrollStyle: {
                type: String,
                default: “”
            },
            scrollItemStyle: {
                type: String,
                default: “”
            }
        },
        methods: {
            //点击切换导航
            tabtap(index) {
                // this.tabIndex = index;
                this.$emit(‘tabtap’, index)
            }
        }
    }
</script>　

<style scoped>
    scroll-view ::-webkit-scrollbar {
        display: none;
    }

    .uni-swiper-tab {
        /* 设置scroll-view容器为 宽度为100% */
        width: 100%;
        height: 68rpx;
        /* 设置scroll-view容器内元素不换行，这样才能实现横向滑动 */
        white-space: nowrap;
    }

    .swiper-tab-list {
        display: inline-block;
        color: #9B9B9B;
        font-weight: bold;
        padding-left: 20rpx;
        padding-right: 20rpx;
        padding-top: 10rpx;
    }

    .uni-tab-bar .active {
        color: #00aaff;
    }

    .active .swiper-tab-line {
        border-bottom: 6upx solid #00aaff;
        width: 70upx;
        margin: auto;
        border-top: 10rpx solid #00000000;
    }
</style>

说明：scroll-view在template标签中实现左右滑动效果

scroll-x：左右滑动

要想达到数据多并添加页面之外，这两个样式必须添加，否则会出现换行与显示不全问题

二、创建页面 tabActivity.vue

<template>
    <view class=”content”>
        <!– toolbar –>
        <swiperTabHead :tabBars=”tabBars” :tabIndex=”tabIndex” @tabtap=”tabtap”></swiperTabHead>
        <!– 页面–>
        <swiper class=”swiper-content” :style=”{height:swiperheight+’rpx’}” :current=”tabIndex” @change=”swiperChange”>
            <swiper-item class=”itemswiper”:key=”index2″ v-for=”(newItem ,index2) in tabBars” >
                <view class=”viewat”>
                    {{newItem.id}} {{newItem.name}}
                </view>
            </swiper-item>
        </swiper>
    </view>

</template>

<script>
    import swiperTabHead from “../../scrollbar.vue”
    export default {
        components: {
            swiperTabHead
        },
        data() {
            return {
                swiperheight: 0,
                tabIndex: 0, // 选中的
                tabBars: [{
                        name: “关注”,
                        id: “guanzhu”
                    },
                    {
                        name: “推荐”,
                        id: “tuijian”
                    },
                    {
                        name: “体育”,
                        id: “tiyu”
                    },
                    {
                        name: “热点咨询”,
                        id: “redian”
                    },
                    {
                        name: “财经”,
                        id: “caijing”
                    },
                    {
                        name: “娱乐”,
                        id: “yule”
                    },
                    {
                        name: “社会”,
                        id: “yule”
                    },
                    {
                        name: “自然”,
                        id: “yule”
                    },
                    {
                        name: “币圈”,
                        id: “yule”
                    },
                    {
                        name: “国家体育”,
                        id: “yule”
                    },
                ]
            }
        },
        onLoad() {
            var _this = this
            uni.getSystemInfo({
                success(res) {
                    console.log(“屏幕高度 HH = ” + res.windowHeight)
                    console.log(“屏幕高度 HH222 = ” + res.windowHeight * 2)
                    _this.swiperheight = res.windowHeight * 2 – 68
                }
            })
        },
        methods: {
            //接受子组件传过来的值点击切换导航
            tabtap(index) {
                var _this = this
                _this.tabIndex = index;
            },
            // 滑动切换导航
            swiperChange:function(e){
                var _this = this
                _this.tabIndex = e.detail.current
            }
        }
    }
</script>

<style>
    .itemswiper {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .swiper-content {
        width: 100%;
    }

    .content {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;
    }

    page {
        background-color: #FFFFFF;
    }
</style>
说明：

1.第一步在script中引用外部组件

2.注册组件

 3.在template中引用新注册的组件

4. 滑动的页面

当然页面可以根据上方菜单的不同，页面请求的数据发生变化，这样效果就达到了，唯一不足的地方就是底部页面滑动，上面菜单到页面外菜单时顶部菜单没有自动滑动到当前选中的菜单项，如果哪位大神补充完整，可以加我QQ410593315，大家一起交流下 。

 资源：scrollswiper.zip-其它文档类资源-CSDN下载

下一篇：uni-app 自定义组件之菜单左右滑动并点击切换选中居中显示_yyxhzdm的博客-CSDN博客

最后是交流公众号，大家可以关注一下