更新记录

1.0.1（2024-01-22）

新增slot插槽 新增一个属性、两个回调事件： s_style 设置轮播样式 @bindChange： current改变时会触发该事件 @bindItem： 点击触发，会返回当前数据 注：本次更新去掉了navigator跳转，开发者可以通过@bindItem进行路由操作 开发者可以通过@bindChange结合页面渲染达到预期效果

1.0.0（2021-06-22）

swiper也可以3D展示

平台兼容性

Vue2 Vue3
√ ×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.1.0 app-vue app-nvue √ √ √ √ √ √
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
√ √ √ √ √ √ √ √ √

hongren-swiper

介绍1.0.1 新增slot插槽

<template>
    <view class="content">
        <view class="swiperItem">
            <HR_swiper s_type="swiper1" s_style="height:500rpx" :s_list="swiper1List" @bindChange="change1" @bindItem="bindItem1">
                <div @click.stop="swiperSlotTap">自定义插槽</div>
            </HR_swiper>
        </view>
        <view class="swiperItem">
            <HR_swiper s_type="swiper2" s_style="height:600rpx" :s_list="swiper2List" @bindChange="change2" @bindItem="bindItem2">
                <div @click.stop="swiperSlotTap">自定义插槽</div></HR_swiper>
        </view>
        <view class="swiperItem">
            <HR_swiper s_type="swiper3" s_style="height:400rpx" :s_list="swiper3List" @bindChange="change3" @bindItem="bindItem3">
                <div @click.stop="swiperSlotTap">自定义插槽</div></HR_swiper>
        </view>
    </view>
</template>

<script>
    import HR_swiper from "@/uni_modules/hongren-swiper/components/hongren-swiper/hongren-swiper.vue";
    export default {
        components:{
            HR_swiper
        },
        data() {
            return {
                swiper1List:[
                    {id:1,path:"/pages/index/index",image:"https://img.pic88.com/preview/2020/08/05/15966349221445562.jpg!s640?imageView2/1/sharpen/1"},
                    {id:2,path:"",image:"https://img.pic88.com/preview/2020/08/05/15966322231466713.jpg!s640?imageView2/1/sharpen/1"},
                    {id:3,path:"",image:"https://img.pic88.com/preview/2020/09/02/1599053319841862.jpg!t640?imageView2/1/sharpen/1"},
                    {id:4,path:"",image:"https://img.pic88.com/16056483700345.jpg?imageMogr2/quality/90!/thumbnail/640/sharpen/1/"},
                    {id:5,path:"",image:"https://img.pic88.com/preview/2020/09/02/1599055345799664.jpg!t640?imageView2/1/sharpen/1"}
                ],
                swiper2List:[
                    {id:7,path:"",image:"https://img.pic88.com/preview/2020/09/03/1599068527521176.jpg!t640?imageView2/1/sharpen/1"},
                    {id:1,path:"/pages/index/index",image:"https://img.pic88.com/preview/2020/08/05/15966330471460246.jpg!s640?imageView2/1/sharpen/1"},
                    {id:2,path:"",image:"https://img.pic88.com/16056878326348.jpg?imageMogr2/quality/90!/thumbnail/640/sharpen/1/"},
                    {id:3,path:"",image:"https://img.pic88.com/preview/2020/09/02/1599053970826270.jpg!t640?imageView2/1/sharpen/1"},
                    {id:4,path:"",image:"https://img.pic88.com/16056541538809.jpg?imageMogr2/quality/90!/thumbnail/640/sharpen/1/"},
                    {id:5,path:"",image:"https://img.pic88.com/preview/2020/09/03/1599068296522672.jpg!t640?imageView2/1/sharpen/1"},
                    {id:6,path:"",image:"https://img.pic88.com/preview/2020/09/02/1599054110825720.jpg!t640?imageView2/1/sharpen/1"}
                ],
                swiper3List:[
                    {id:1,path:"/pages/index/index",image:"https://img.pic88.com/preview/2020/08/05/15966335151455887.jpg!s640?imageView2/1/sharpen/1"},
                    {id:2,path:"",image:"https://img.pic88.com/preview/2020/08/31/15988419695f4c6471d8f94.jpg!s640?imageView2/1/sharpen/1"},
                    {id:3,path:"",image:"https://img.pic88.com/preview/2020/08/02/1596407329317339.jpg!s640?imageView2/1/sharpen/1"},
                    {id:4,path:"",image:"https://img.pic88.com/preview/2020/08/02/1596407366316871.jpg!s640?imageView2/1/sharpen/1"},
                    {id:5,path:"",image:"https://img.pic88.com/preview/2020/08/27/15985369545f47bcfadd1da.jpg!s640?imageView2/1/sharpen/1"},
                    {id:6,path:"",image:"https://img.pic88.com/preview/2020/08/31/15988435565f4c6aa48f798.jpg!s640?imageView2/1/sharpen/1"},
                    {id:7,path:"",image:"https://img.pic88.com/preview/2020/08/02/1596332785734561.jpg!s640?imageView2/1/sharpen/1"},
                    {id:8,path:"",image:"https://img.pic88.com/preview/2020/08/01/15962891251131599.jpg!s640?imageView2/1/sharpen/1"},
                ],
            }
        },
        onLoad() {

        },
        methods: {
            swiperSlotTap(){
                console.log('插槽事件: ');
            },
            change1(e){
                let {current}=e.detail
                console.log('change1: ',current);
            },
            change2(e){
                let {current}=e.detail
                console.log('change2: ',current);
            },
            change3(e){
                let {current}=e.detail
                console.log('change3: ',current);
            },
            bindItem1(evt){
                let {item}=evt.currentTarget.dataset
                console.log('bindItem1: ',item);
            },
            bindItem2(evt){
                let {item}=evt.currentTarget.dataset
                console.log('bindItem2: ',item);
            },
            bindItem3(evt){
                let {item}=evt.currentTarget.dataset
                console.log('bindItem3: ',item);
            }
        }
    }
</script>

<style lang="scss">
    .swiperItem{
        position: relative;
        width: 100%;
        min-height: 300rpx;
        margin-bottom: 30rpx;
    }
</style>

介绍1.0.0

<template>
    <view class="content">
        <view class="swiperItem">
            <HR_swiper s_type="swiper3" :s_list="swiper3List" :s_current="6"></HR_swiper>
        </view>
        <view class="swiperItem">
            <HR_swiper s_type="swiper2" :s_list="swiper2List"></HR_swiper>
        </view>
        <view class="swiperItem">
            <HR_swiper s_type="swiper1" :s_list="swiper1List"></HR_swiper>
        </view>
    </view>
</template>

<script>
    import HR_swiper from "@/uni_modules/hongren-swiper/components/hongren-swiper/hongren-swiper.vue";
    export default {
        components:{
            HR_swiper
        },
        data() {
            return {
                swiper1List:[
                    {id:1,path:"/pages/index/index",image:"https://img.pic88.com/preview/2020/08/05/15966349221445562.jpg!s640?imageView2/1/sharpen/1"},
                    {id:2,path:"",image:"https://img.pic88.com/preview/2020/08/05/15966322231466713.jpg!s640?imageView2/1/sharpen/1"},
                    {id:3,path:"",image:"https://img.pic88.com/preview/2020/09/02/1599053319841862.jpg!t640?imageView2/1/sharpen/1"},
                    {id:4,path:"",image:"https://img.pic88.com/16056483700345.jpg?imageMogr2/quality/90!/thumbnail/640/sharpen/1/"},
                    {id:5,path:"",image:"https://img.pic88.com/preview/2020/09/02/1599055345799664.jpg!t640?imageView2/1/sharpen/1"}
                ],
                swiper2List:[
                    {id:7,path:"",image:"https://img.pic88.com/preview/2020/09/03/1599068527521176.jpg!t640?imageView2/1/sharpen/1"},
                    {id:1,path:"/pages/index/index",image:"https://img.pic88.com/preview/2020/08/05/15966330471460246.jpg!s640?imageView2/1/sharpen/1"},
                    {id:2,path:"",image:"https://img.pic88.com/16056878326348.jpg?imageMogr2/quality/90!/thumbnail/640/sharpen/1/"},
                    {id:3,path:"",image:"https://img.pic88.com/preview/2020/09/02/1599053970826270.jpg!t640?imageView2/1/sharpen/1"},
                    {id:4,path:"",image:"https://img.pic88.com/16056541538809.jpg?imageMogr2/quality/90!/thumbnail/640/sharpen/1/"},
                    {id:5,path:"",image:"https://img.pic88.com/preview/2020/09/03/1599068296522672.jpg!t640?imageView2/1/sharpen/1"},
                    {id:6,path:"",image:"https://img.pic88.com/preview/2020/09/02/1599054110825720.jpg!t640?imageView2/1/sharpen/1"}
                ],
                swiper3List:[
                    {id:1,path:"/pages/index/index",image:"https://img.pic88.com/preview/2020/08/05/15966335151455887.jpg!s640?imageView2/1/sharpen/1"},
                    {id:2,path:"",image:"https://img.pic88.com/preview/2020/08/31/15988419695f4c6471d8f94.jpg!s640?imageView2/1/sharpen/1"},
                    {id:3,path:"",image:"https://img.pic88.com/preview/2020/08/02/1596407329317339.jpg!s640?imageView2/1/sharpen/1"},
                    {id:4,path:"",image:"https://img.pic88.com/preview/2020/08/02/1596407366316871.jpg!s640?imageView2/1/sharpen/1"},
                    {id:5,path:"",image:"https://img.pic88.com/preview/2020/08/27/15985369545f47bcfadd1da.jpg!s640?imageView2/1/sharpen/1"},
                    {id:6,path:"",image:"https://img.pic88.com/preview/2020/08/31/15988435565f4c6aa48f798.jpg!s640?imageView2/1/sharpen/1"},
                    {id:7,path:"",image:"https://img.pic88.com/preview/2020/08/02/1596332785734561.jpg!s640?imageView2/1/sharpen/1"},
                    {id:8,path:"",image:"https://img.pic88.com/preview/2020/08/01/15962891251131599.jpg!s640?imageView2/1/sharpen/1"},
                ],
            }
        },
        onLoad() {

        },
        methods: {

        }
    }
</script>

<style lang="scss">
    .swiperItem{
        position: relative;
        width: 100%;
        min-height: 300rpx;
        margin-bottom: 30rpx;
    }
</style>

觉得对你有帮助记得给个红心加收藏,楼主会持续更新

隐私、权限声明

1. 本插件需要申请的系统权限列表：

无

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明：

无

3. 本插件是否包含广告，如包含需详细说明广告表达方式、展示频率：

无

许可协议

MIT协议
评论列表 撰写评论
加载更多...
插件问答 我要提问

使用中有什么不明白的地方，就向插件作者提问吧~ 我要提问

加载更多...