Swiper 轮播图自定义指示器代码data缺少变量current和currentNum

[mreasonchan24]

版本

2.0.38

转载链接

https://www.uviewui.com/components/swiper.html

重现步骤

直接复制官方示例会导致当前指示器没有选中的样式，添加代码

@change="change"，
current: 0,
change(e) {
                this.current = e.current;
            }

后正常，请验证改正。

期望的结果是什么？

指示器选中样式正常显示

实际的结果是什么？

指示器没选中样式显示

---

附上修改后代码

<template>
    <view class="u-demo-block">
        <text class="u-demo-block__title">自定义指示器</text>
        <u-swiper
                :list="list5"
                @change="change"
                :autoplay="false"
        >
            <view
                    slot="indicator"
                    class="indicator"
            >
                <view
                        class="indicator__dot"
                        v-for="(item, index) in list5"
                        :key="index"
                        :class="[index === current && 'indicator__dot--active']"
                >
                </view>
            </view>
        </u-swiper>
        <u-gap
                bgColor="transparent"
                height="15"
        ></u-gap>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                list5: [
                    'https://cdn.uviewui.com/uview/swiper/swiper3.png',
                    'https://cdn.uviewui.com/uview/swiper/swiper2.png',
                    'https://cdn.uviewui.com/uview/swiper/swiper1.png',
                ],
                current: 0,
            }
        },
        methods: {
            change(e) {
                this.current = e.current;
            }
        },
    }
</script>

<style lang="scss">
    .indicator {
        @include flex(row);
        justify-content: center;

        &__dot {
             height: 6px;
             width: 6px;
             border-radius: 100px;
             background-color: rgba(255, 255, 255, 0.35);
             margin: 0 5px;
             transition: background-color 0.3s;
    
            &--active {
                 background-color: #ffffff;
             }
        }
    }

</style>