更新记录

1.0.1（2024-06-25）

新增clickItem

1.0.0（2024-06-25）

第一版

平台兼容性

swiper/banner

组件支持插槽，需要依赖 scss 插件, 或自己去手动修改css样式（很简单）

属性 Props

说明

通过 scale、offsetMargin 调整滑块间距

swiperConfig

插槽 --- 不支持小程序

方法 Events

示例

<template>
    <view class="index">
        <view class="group">
            <view class="title">组件 示例</view>
            <wyh-swiper-demo1 
            :height="height"
            :items="banner" 
            :swiperConfig="swiperConfig" 
            :scale="scale" 
            :offsetMargin="offsetMargin+'rpx'" 
            :showBg="showBg" 
            @change="swiperChange"
            />
            <view class="p">
                <view class="l">显示背景(showBg)</view>
                <view class="r">
                    <switch :checked="showBg" @change="onShowBg"/>
                </view>
            </view>
            <view class="p">
                <view class="l">缩放大小(scale)</view>
                <view class="r" style="width: 70%;">
                    <slider :min="70" :show-value="true" block-size="18" :value="scale*100" @changing="changScale"/>
                </view>
            </view>
            <view class="p">
                <view class="l">偏移量(offsetMargin)</view>
                <view class="r" style="width: 30%;">
                    <uni-easyinput type="number" v-model="offsetMargin" placeholder="0" />
                </view>
            </view>
        </view>
        <view class="group">
            <view class="title">slot 示例</view>
            <wyh-swiper-demo1 :items="banner" :height="height" :swiperConfig="swiperConfig" :scale="scale" :offsetMargin="offsetMargin+'rpx'">
                <template v-slot="slotProps">
                    <image class="img" :style="{height: height}" :src="slotProps.data.path" mode="aspectFill"></image>
                    <view class="path">{{slotProps.index}}: {{slotProps.data.path}}</view>
                </template>
            </wyh-swiper-demo1>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                banner: [],
                height: '350rpx',
                swiperConfig: {
                    indicatorDots: false,
                    indicatorColor: 'rgba(255, 255, 255, .4)',
                    indicatorActiveColor: 'rgba(255, 255, 255, 1)',
                    autoplay: false,
                    interval: 3000,
                    duration: 300,
                    circular: true,
                    previousMargin: '100rpx',
                    nextMargin: '100rpx'
                },
                showBg: false,
                scale: 0.9,
                offsetMargin: 0
            }
        },
        methods: {
            // current 改变时会触发
            swiperChange (e) {
                console.log('change', e)
            },
            onShowBg(ret) {
                this.showBg = ret.detail.value;
            },
            changScale(ret) {
                this.scale = ret.detail.value/100;
            },
            getBanner() {
                setTimeout(() => {
                    this.banner = [{
                        path: 'https://picsum.photos/id/110/600/300'
                    },{
                        path: 'https://picsum.photos/id/210/600/300'
                    },{
                        path: 'https://picsum.photos/id/310/600/300'
                    },{
                        path: 'https://picsum.photos/id/410/600/300'
                    },{
                        path: 'https://picsum.photos/id/510/600/300'
                    }]
                }, 300)
            }
        },
        onLoad() {
            this.getBanner()
        }
    }
</script>

<style lang="scss" scoped>
    .index {
        min-height: calc(100vh - var(--window-top));
        .group {
            padding: 30rpx 0;
            .title {
                text-align: center;
                font-size: 32rpx;
                font-weight: bold;
                color: #333;
                padding: 20rpx;
            }
            .p {
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                padding: 20rpx;
            }
        }
        /deep/ .wyh_swiper {
            .scale_box {
                position: relative;
            }
            .img {
                display: block;
                width: 100%;
            }
            .path {
                position: absolute;
                bottom: 0;
                left: 0;
                width: 100%;
                box-sizing: border-box;
                padding: 10rpx 20rpx;
                background: rgba(255,255,255,0.9);
                color: #000;
                font-weight: bold;
                font-size: 24rpx;
            }
        }
    }
</style>