更新记录

1.0.2（2023-12-11） 下载此版本

增加change事件

1.0.1（2023-12-10） 下载此版本

增加首尾衔接参数，即播放到末尾后重新回到开头

1.0.0（2023-12-10） 下载此版本

上传1.0

平台兼容性

niceui-swiper

Props

Events

示例代码

<template>
    <view class="niceui-flex-column">
        <NiceuiSwiper :items="items" :indicatorColor="indicatorColor" :indicatorActiveColor="indicatorActiveColor"
        :circular="circular" @change="changeItem"></NiceuiSwiper>
    </view>
</template>

<script>
    import NiceuiSwiper from '@/components/niceui-swiper.vue' //路径按导入项目真实情况调整
    export default {
        components:{
            NiceuiSwiper
        },
        data() {
            return {
                items:[
                    require('@/static/member3.png'), //路径按导入项目真实情况调整
                    require('@/static/member5.png'), //路径按导入项目真实情况调整
                    require('@/static/member6.png') //路径按导入项目真实情况调整
                ],
                circular:false,
                indicatorDots: true,
                autoplay: false,
                interval: 2000,
                duration: 500,
                indicatorColor:'#888',
                indicatorActiveColor:'red',
                leftRightMargin:'50rpx'
            }
        },
        methods: {
            changeItem(e){
                console.log('current:'+e.detail.current)
            }
        }
    }
</script>

<style>
    @font-face {
        font-family: texticons;
        font-weight: normal;
        font-style: normal;
        src: url('https://at.alicdn.com/t/c/font_4366421_k5i3ya8nfw.ttf?t=1702189086737') format('truetype');
    }

    page,
    view {
        display: flex;
    }

    page {
        background-color: #fff;
    }

    .niceui-flex-column {
        flex-direction: column;
    }
</style>
<style lang="scss" scoped>
    $head-color:#5b8cff;  //5b8cff 4194fc
    $white-color:#fff;
    $radius:5rpx;
    $border-color:#efefef;
    $color-1: #6eacfe;
    $color-2: #52f0cf;
    $color-3: #ffcd46;
    $color-4: #ff727d;
    $list-item-height:100rpx;
    $list-margin:15rpx;
    .swiper{
        width: 100vw;
        padding: 30rpx 0 0;
        height: 420rpx;
        box-sizing: border-box;
    }
    .banner {
        padding: 10rpx 15rpx;

        image{
            width: calc(100vw - 80rpx);
            margin: 0 auto;
            height: 330rpx;
            border-radius: 20rpx;
        }
    }
    .pay-price{
        width: calc(100vw - 80rpx);
        margin: 0rpx auto 10rpx;
        justify-content: space-between;
        .price{
            color:#c16b2d;
            font-weight: bold;
            font-size: 38rpx;
        }
        .pay{
            background-color: #f57b15;
            color:#fff;
            font-weight: bold;
            font-size: 32rpx;
            border-radius: 30rpx;
            padding:8rpx 35rpx;
        }
    }
    .niceui-list {
        background-color: #FFFFFF;
        margin:0 auto 0;
        padding-bottom:$list-margin ;
        width: calc(100vw - 0rpx);
        flex-direction: column;
        border-radius: $radius;
    }

    .niceui-list-title{
        padding:25rpx 40rpx 0rpx;
        font-size:34rpx;
        color:#333;
        font-weight: 400;
    }

    .niceui-list-content{
        box-sizing: border-box;
        padding: 25rpx 40rpx;
        flex-wrap: wrap;
        .niceui-content-item{
            width:33%;
            box-sizing: border-box;
            padding: 25rpx 0rpx;
            align-items: center;
            flex-direction: column;
            .niceui-content-item-icon{
                color:#fff;
                font-size:48rpx;
                font-weight: 500;
                font-family: texticons;
                border-radius: 50%;
                padding: 20rpx;
                margin-bottom: 20rpx;
            }
            .niceui-content-item-text{
                color:#666;
                font-size:32rpx;
                font-weight: 400;
            }
            .niceui-content-item-desc{
                color:#888;
                font-size:24rpx;
                font-weight: 400;
                margin-top: 0rpx;
            }

        }
    }
    .color-1{
        background-image: linear-gradient(#72aefe, #4896ff);
    }
    .color-2{
        background-image: linear-gradient(#5ff9d7, #39debd);
    }
    .color-3{
        background-image: linear-gradient(#ffd155, #ffbc04);
    }
    .color-4{
        background-image: linear-gradient(#ff808b, #ff6872);
    }
</style>