yinchuan-community-all/mini-program/smart-city-yinchuan-wx/pagesM/comps/dt_scroll_tab.vue

<template>
    <view>
        <scroll-view scroll-x :scroll-into-view="aim" :scroll-with-animation="true" class="dt-tab-scroll-wrap">
            <view class="tab-wrap">
                <block v-for="(item, idx) in dataList" :key="idx">
                    <view :id="'tab'+idx"
                          class="tab-item"
                          :class="{
            'active':current==idx,
            'active-line':conf.isActiveLine && current==idx
          }"
                          :style="{'width':conf.width}"
                          @tap="tapTabItem(idx)">{{item}}
                    </view>
                </block>
            </view>
        </scroll-view>
    </view>
</template>
<script>
    export default {
        props: {
            config: {
                type: Object,
                default: {}
            },
            current: {// 支持 .sync
                type: Number,
                default: 0
            },
            dataList: {
                type: Array,
                default: () => {
                    return [] // ['全部','优惠券','好物券','商品','会员卡']
                }
            }
        },
        data() {
            return {
                conf: {}
            }
        },
        watch: {
            config: {
                deep: true,
                handler: (n, o) => {
                    if (n) {
                        this.conf = Object.assign({
                            width: '20%'
                        }, n)
                    }
                }
            },
        },

        computed: {
            aim() {
                let aimIdx = this.current + 2
                if (this.current <= 2) {
                    return 'tab' + 0
                }
                console.log('aim', 61)
                if (aimIdx > this.dataList.length) {
                    console.log(63, 'tab' + this.dataList.length)
                    return 'tab' + (this.dataList.length - 1)
                }
                console.log(66)
                return 'tab' + (this.current - 2)
            },
        },
        methods: {
            tapTabItem(idx) {
                this.$emit('update:current', idx)
                this.$emit('change', idx)
            },
        },
        created() {
            if (this.config) {
                this.conf = Object.assign({
                    width: '20vw'
                }, this.config)
            }
        },
    }
</script>

<style lang="scss">
    .dt-tab-scroll-wrap {
        width: 100vw;
        background-color: #fff;

        .tab-wrap {
            display: flex;
            width: max-content;
            white-space: nowrap;
            height: 90 upx;
            line-height: 90 upx;
            font-size: 28 upx;

            .tab-item {
                position: relative;
                width: 20vw;
                text-align: center;
                // padding:0 44upx;
            }

            .tab-item.active {
                color: $base;
            }

            .tab-item.active-line:before {
                position: absolute;
                bottom: 0;
                left: 50%;
                transform: translateX(-50%);
                width: 80 upx;
                height: 4 upx;
                border-radius: 2 upx;
                background-color: $base;
                content: '';
            }

            // .tab-item.active:before{
            //   position:absolute;
            //   bottom:0;
            //   content:'';
            // }
        }
    }
</style>