自定义左右箭头操作图片滚动

<script setup>
const leftShow = ref(false);
const prev = () => {
    leftShow.value = !leftShow.value;
    currencyItemsRef.value.scrollLeft -= currencyItemsRef.value.offsetWidth;
}
const next = () => {
    leftShow.value = true;
    currencyItemsRef.value.scrollLeft += currencyItemsRef.value.offsetWidth;
}
</script>
<ul ref="currencyItemsRef" v-if="filterData.tabAction !== 'order'" class="imgulList keding-info__row">
                <li class="li" v-for="(item, index) in imgList">
                    <van-image class="van-image" :src="getImageUrl(item.img)"></van-image>
                    <div class="text-div">{{ item.codenumber }}</div>
                </li>

            </ul>
            <div v-if="arrLength > 3 && leftShow" class="swiper-prev" @click="prev"><van-icon name="arrow-left" /></div>
            <div v-if="arrLength > 3" class="swiper-next" @click="next"><van-icon name="arrow" /></div>