hitap-chat/components/scroll-nav.vue

<template>
    <!-- 滚动容器 -->
    <scroll-view class="scroll_navs" :scroll-into-view="nav_id" scroll-x scroll-with-animation>
        <!-- 最左边用来定位的导航 -->
        <view id="nav0"></view>
        <!-- 正常的导航按钮 -->
        <view class="ul box" :style="'border-color:'+color+';'">
            <block v-for="(item,index) in list" :key="index">
                <!-- 判断nav的id是否相同添加类型active     通过index给nav添加id -->
                <view class="li" :class="[nav.id==item.id?'active':'']" :id="'nav'+(index+1)" @click="change_fun(item,index)">
                    <view class="li_section dis_f_c_c">
                        <text>{{item[item_key]}}</text>
                    </view>
                </view>
            </block>
        </view>
    </scroll-view>
</template>

<script>
    export default {
        props: {
            // nav的列表数据
            list: {
                type: Array,
                default: null,
            },
            // 当前nav
            nav: {
                type: Object,
                default: "",
            },
            // item的key值
            item_key: {
                type: String,
                default: "name",
            },
            // 滚动时，当前导航前面的可视导航数量
            num: {
                type: [String, Number],
                default: 1,
            },
            // 下边框的颜色
            color: {
                type: String,
                default: "transparent",
            },
        },
        data() {
            return {
                // 公用的js
                $: this.$,

                // 当前nav的下标
                index: 0,
                // 当前nav的下标
            }
        },
        created() {
            // 获取当前nav的下标
            this.get_index_fun();
        },
        methods: {
            // 获取当前nav的下标
            get_index_fun() {
                // nav的列表数据
                let list = this.list;
                // 循环匹配当前nav的下标index
                for (var i = 0; i < list.length; i++) {
                    let obj = list[i];
                    if (this.nav.id == obj.id) {
                        this.index = i;
                        break;
                    }
                }
            },
            // nav改变时触发，更新下标，把点击的nav传给父组件
            change_fun(item, index) {
                this.index = index;
                this.$emit('change', item);
            },
        },
        computed: {
            // 计算当前的nav_id
            nav_id() {
                // 当前nav的下标
                let index = this.index - 0;
                let nav_id = "";
                // 如果下标是正数
                if (index > 0) {
                    nav_id = "nav" + (index - this.num + 1);
                } else {
                    nav_id = "nav0";
                }
                return nav_id;
            }
        },
        watch: {
            // 当nav改变时，更新下标
            nav(e) {
                // 获取当前nav的下标
                this.get_index_fun();
            }
        }
    }
</script>

<style lang="scss" scoped>
    /* 滚动导航部分 */
    .scroll_navs {
        background: #fff;
        white-space: nowrap;
        width: 100%;
        height: 100%;

        .ul {
            display: inline-block;
            height: 100%;
            padding: 0 5rpx;
            vertical-align: top;
            border-bottom: 1px solid transparent;

            .li {
                display: inline-block;
                height: 100%;
                padding: 0 20rpx;
                margin: 0 15rpx;
                position: relative;
                font-size: 32rpx;
                color: #323232;
                transition: color 0.4s;

                .li_section {
                    height: 100%;
                }
            }

            .li:after {
                content: "";
                position: absolute;
                left: 0;
                right: 0;
                bottom: 0px;
                margin: auto;
                width: 0;
                transition: width 0.4s;
                border-bottom: 2px solid #00BD9A;
                box-sizing: border-box;
            }

            .li.active {
                color: #00BD9A;
            }

            .li.active:after {
                width: 76%;
            }
        }
    }
</style>