更新记录

1.0.0（2023-04-21）

滚动指示器

平台兼容性

jc-scroll-indicator

滚动指示器

支持水平和垂直两个方向，小程序，h5测试通过，其它未测

使用

<script setup>
    import { reactive, ref } from "vue";
    const list = ref(20)
</script>

        <view class="bg-white pb-2 border border-slate-500_30">
            <jc-scroll-indicator>
                <view class="flex p-2 gap-2">
                    <view v-for="d in list" :key="d" class="shrink-0 bg-slate-500 text-white w-14 h-14 rounded-lg flex items-center justify-center">{{d}}</view>
                </view>
            </jc-scroll-indicator>
        </view>

        <view class="bg-white m-2 pb-2 border border-pink-500_30">
            <jc-scroll-indicator>
                <view class="flex p-2 gap-2">
                    <view v-for="d in list" :key="d" class="shrink-0 bg-pink-500 text-white w-14 h-14 rounded-lg flex items-center justify-center">{{d}}</view>
                </view>
            </jc-scroll-indicator>
        </view>
        <view class="px-2 font-bold text-base">反转</view>
        <view class="bg-white m-2 pt-2 border border-indigo-500_30">
            <jc-scroll-indicator :reverse="true" color="RGB(99, 102, 241)">
                <view class="flex p-2 gap-2">
                    <view v-for="d in list" :key="d" class="shrink-0 bg-indigo-500 text-white w-14 h-14 rounded-lg flex items-center justify-center">{{d}}</view>
                </view>
            </jc-scroll-indicator>
        </view>
        <view class="px-2 font-bold text-base">自定义</view>
        <view class="bg-white m-2 pb-2 border border-teal-500_30">
            <jc-scroll-indicator :outWidth="200" :outHeight="20" :width="50" bgColor="lightgreen" color="darkgreen">
                <view class="flex p-2 gap-2">
                    <view v-for="d in list" :key="d" class="shrink-0 bg-teal-500 text-white w-14 h-14 rounded-lg flex items-center justify-center">{{d}}</view>
                </view>
            </jc-scroll-indicator>
        </view>
        <view class="px-2 font-bold text-base">Y轴</view>
        <view class="bg-white m-2 pb-2 border border-cyan-500_30">
            <jc-scroll-indicator :scrollY="true" :gap="20">
                <view class="p-2 space-y-2 h-40">
                    <view v-for="d in list" :key="d" class="bg-cyan-500 text-white h-14 rounded-lg flex items-center justify-center">{{d}}</view>
                </view>
            </jc-scroll-indicator>
        </view>

props

slot

emit