移动端 顶部滑动条怎么实现？或者有没有好用的插件推荐？

Question

类似于头条顶部那样的滑动条怎么实现？ 用了一个MUI好难用啊，有没有其他的可以推荐的

Answer 1

这个很简单 完全可以自己写一个.

给你一个自己写的组件参考

<!--

:tabItems tab项集合，[{name, isActive}...]，name用于显示，isActive表示是否选中，可以自定义其它属性，chang事件触发时会将整个对象抛出

:displayProp  自定义显示字段

@change   事件，当tab项被点击选中时触发，参数：tabItem

ref.setActive(index)  外部设置选中方法，不会触发change事件

ref.setPosition 根据选中项重置位置

-->

<style rel="stylesheet/less">

    @checked-color: #4179FF;

    @text-color: #3B435A;

    .slide-tab {

        width: auto;

        white-space: nowrap;

        background: #FFFFFF;

        box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.10);

        overflow-x: scroll;

        overflow-y: hidden;

        &::-webkit-scrollbar {

            display: none;

        }

        .slide-item {

            display: inline-block;

            position: relative;

            padding: 15px;

            font-size: 16px;

            color: @text-color;

        }

        .item-checked{

            color: @checked-color;

        }

        .slide-check {

            position: absolute;

            bottom: 0;

            left: 50%;

            height: 3px;

            width: 0;

            transform: translateX(-50%);

            color: @checked-color;

            background: @checked-color;

            transition: all .2s;

        }

        .is-check {

            width: 20px;

        }

    }

</style>

<template>

    <div>

        <div class="slide-tab" ref="slideTab">

            <div class="slide-item" :class="{'item-checked': index === activeIndex}" v-for="(item,index) in tabItems" @click="slide(index)">

                {{item}}

                <div class="slide-check" :class="{'is-check': index === activeIndex}"></div>

            </div>

        </div>

    </div>

</template>

<script>

    export default {

        props: {

            tabItems: {

                type: Array,

                default(){

                    return ['标题一', '标题二', '标题三', '标题四', '标题五', '标题六']

                }

            }

        },

        data() {

            return {

                activeIndex: 0

            }

        },

        methods: {

            slide(index){

                this.activeIndex = index;

                let activeDom = document.getElementsByClassName('slide-item')[index];

                this.$refs.slideTab.scrollLeft = activeDom.offsetLeft;

                this.$emit('on-change', index);

            }

        },

        mounted() {

        }

    }

</script>

Answer 2

为什么我复制你的代码报错了,我自己加了一个 js,less,cdn链接