更新记录

1.0.0（2025-10-24） 下载此版本

长期支持版本，有问题及时反馈就行。

平台兼容性

uni-app(3.7.12)

d-swiper

可以自定义轮播盒子里的内容

长期支持版本

<template>
    <view>
        <d-navbar title="自定义卡片式轮播" :isBack="true" bg="transparent" tmpStyle="2"></d-navbar>

        <view class="w-full">
            <d-swiper :list="bannerList" @change="onChangeSwiper" >

                <!-- 具名插槽 -->
                <template #footer="{ dataItem , dataIndex }" >

                    <view class="w-full bg-white " style="background: #ccc;" @click="onBannerItem(dataItem,dataIndex)">
                        <view style="width: 100%;height: 150px;background: #9d9d9d;color: #fff;">
                            {{dataItem.title}}
                        </view>
                    </view>

                </template>

            </d-swiper>
        </view>

        <view style="width: 100%;height: 50px;background: #ccc;"></view>
    </view>
</template>

<script>
    export default {
        computed:{
        },
        data() {
            return {
                bannerList:[
                    {
                        title:'111',
                        type:1,
                        path:'/all/pagesdeng/test/index'
                    },
                    {
                        title:'222',
                        type:1,
                        path:'/all/pagesdeng/avatar/index'
                    }
                ]
            };
        },

        //  页面加载
        onLoad(options) {
            console.log(options)
        },
        //  页面显示
        onShow() {
        },
        //  页面隐藏
        onHide() {

        },
        //  页面卸载
        onUnload() {

        },
        //  页面下拉刷新
        onPullDownRefresh() {
            setTimeout(function() {
                uni.stopPullDownRefresh();
            }, 500);

        },
        //  点击分享
        // onShareAppMessage() {

        // },
        //  监听页面滚动  页面在垂直方向已滚动的距离（单位px）
        onPageScroll() {

        },
        //  监听页面返回
        onBackPress(options) {

        },
        /**
         * 上拉加载
         */
        onReachBottom() {
            console.log('上拉加载')

        },
        methods: {
            onChangeSwiper(e) {
                console.log(e,'eeeee')
            },
            onBannerItem(e,index) {
                console.log(e,index)
            }
        }
    }
</script>

<style>
.w-full {
    width:100%;
}
</style>