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

Question

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

Answer 1

这个很简单 完全可以自己写一个.给你一个自己写的组件参考<!--:tabItems tab项集合，[{name, isActive}...]，name用于显示，isActive表示是否选中，可以自定义其它属性，chang事件触发时会将整个对象抛出:displayProp&nbsp; 自定义显示字段@change&nbsp; &nbsp;事件，当tab项被点击选中时触发，参数：tabItemref.setActive(index)&nbsp; 外部设置选中方法，不会触发change事件ref.setPosition 根据选中项重置位置--><style rel="stylesheet/less">&nbsp; &nbsp; @checked-color: #4179FF;&nbsp; &nbsp; @text-color: #3B435A;&nbsp; &nbsp; .slide-tab {&nbsp; &nbsp; &nbsp; &nbsp; width: auto;&nbsp; &nbsp; &nbsp; &nbsp; white-space: nowrap;&nbsp; &nbsp; &nbsp; &nbsp; background: #FFFFFF;&nbsp; &nbsp; &nbsp; &nbsp; box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.10);&nbsp; &nbsp; &nbsp; &nbsp; overflow-x: scroll;&nbsp; &nbsp; &nbsp; &nbsp; overflow-y: hidden;&nbsp; &nbsp; &nbsp; &nbsp; &::-webkit-scrollbar {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; display: none;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; .slide-item {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; display: inline-block;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; position: relative;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; padding: 15px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; font-size: 16px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; color: @text-color;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; .item-checked{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; color: @checked-color;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; .slide-check {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; position: absolute;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; bottom: 0;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; left: 50%;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height: 3px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: 0;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; transform: translateX(-50%);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; color: @checked-color;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background: @checked-color;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; transition: all .2s;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; .is-check {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: 20px;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }</style><template>&nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="slide-tab" ref="slideTab">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="slide-item" :class="{'item-checked': index === activeIndex}" v-for="(item,index) in tabItems" @click="slide(index)">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {{item}}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="slide-check" :class="{'is-check': index === activeIndex}"></div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div></template><script>&nbsp; &nbsp; export default {&nbsp; &nbsp; &nbsp; &nbsp; props: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; tabItems: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type: Array,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; default(){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return ['标题一', '标题二', '标题三', '标题四', '标题五', '标题六']&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; data() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; activeIndex: 0&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; methods: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; slide(index){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.activeIndex = index;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; let activeDom = document.getElementsByClassName('slide-item')[index];&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.$refs.slideTab.scrollLeft = activeDom.offsetLeft;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.$emit('on-change', index);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; mounted() {&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }</script>

Answer 2

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