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

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" lang="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链接