頂部滑動導航菜單欄

參考：https://ext.dcloud.net.cn/plugin?id=738

 

• template使用

<template>
    <view class="slidingMenu">
        <haverster-slidingMenu :list="list" :color="color" @changes="getIndex"></haverster-slidingMenu>
        <view class="contentList">
            <image :src="imageList[activeIndex]" mode=""></image>
        </view>
    </view>
</template>

 

• JS

<script>
    import haversterSlidingMenu from '@/components/haverster-slidingMenu/haversterSlidingMenu.vue';
    export default {
        components: { haversterSlidingMenu },
        data() {
            return {
                list: ['男裝', '母嬰', '數碼', '箱包', '生鮮', '食品', '飾品', '女裝'], //默認傳到頂部菜單欄的數據
                activeIndex: '0', ///菜單欄選中狀態的index值
                color: 'white', //設置菜單的背景顏色
                imageList: [
                    'http://pic1.win4000.com/mobile/2018-09-04/5b8dece4e565c.jpg',
                    'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=239553082,2832910159&fm=115&gp=0.jpg',
                    'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2358570013,1985123782&fm=26&gp=0.jpg',
                    'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2914575322,940354749&fm=115&gp=0.jpg',
                    'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3065463705,1034625646&fm=115&gp=0.jpg',
                    'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=577097343,3406258596&fm=26&gp=0.jpg',
                    "http://pic1.win4000.com/mobile/2018-09-04/5b8dece5b9dbe.jpg",
                    "http://pic1.win4000.com/mobile/2018-09-04/5b8dece9ee511.jpg"
                ],//下面圖片顯示
            };
        },
        onLoad() {},
        methods: {
            getIndex(e) {
                this.activeIndex = e;
            }
        }
    };
</script>

 

• CSS

page{
        background-color: #FAFAFA;
    }
    .contentList {
        width: 750upx;
        height: 500px;
        margin-top: 20upx;
    }
    .contentList image {
        width: 100%;
        height: 100%;
    }
    .slidingMenu{
        
    }

 

• 最後附上haversterSlidingMenu.vue

<template>
    <scroll-view class="uni-slidingMenu" scroll-x :style="{background: color}">
        <view  :class="['slidingMenuList',activeIndex==index?'active':'']" v-for="(item, index) in list" :key="index" @click="getActive(index)" v-cloak>{{ item }}</view>
    </scroll-view>
</template>

<script>
export default {
    name: 'uniSlidingMenu',
    props:{
        // 列表菜單
        list:{
            type: Array,
            // default:['首頁1', '首頁2', '首頁3', '首頁4', '首頁4', '首頁4', '首頁4', '首頁4']
        },
        color:{
            type:String,
            default:'#777777'
        }
        
    },
    data() {
        return {
            // list: ['首頁1', '首頁2', '首頁3', '首頁4', '首頁4', '首頁4', '首頁4', '首頁4'],
            activeIndex:"0"
        };
    },
    methods:{
        getActive(index){
            this.activeIndex=index;
            this.$emit("changes",this.activeIndex);
        }
    }
};
</script>

<style>
    page{
        background-color: #fafafa;
    }
/* 滑動菜單欄的總內容區域 */
.uni-slidingMenu {
    width: 100%;
    white-space: nowrap;
    height: 80rpx;
    background-color: #FFFFFF;
}
/* 循環顯示的菜單欄 */
.slidingMenuList {
    height: 80rpx;
    line-height: 80rpx;
    display: inline-block;
    font-size: 24rpx;
    margin-left: 60rpx;
}
.slidingMenuList:last-child{
    margin-right: 60rpx;
}
/* 點擊選中菜單欄時的樣式 */
.active {
    color: pink;
    font-size: 28rpx;
    margin-left: 80rpx;
    border-bottom: 2rpx solid pink;
    box-sizing: border-box;
}
</style>