美文网首页iOS程序猿让前端飞WEB前端程序开发
非常简单好用实用的轮播图swiper banner组件

非常简单好用实用的轮播图swiper banner组件

作者: 前端组件分享 | 来源:发表于2023-05-31 16:35 被阅读0次

    非常简单好用实用的轮播图swiper banner组件; 下载完整代码请访问uni-app插件市场地址:https://ext.dcloud.net.cn/plugin?id=12786

    效果图如下:

    实现代码如下:

    # 非常简单好用实用的轮播图swiper banner组件,一行代码即可实现轮播图

    #### 使用方法

    ```使用方法

    <!-- interval:轮播间隔时间  imgList: 轮播图数组  @click:轮播图点击事件-->

    <ccCarouseView interval="2000" :imgList="myImgList" @click="goImgClick"></ccCarouseView>

    ```

    #### HTML代码部分

    ```html

    <template>

    <view class="content">

    <view class="text-area">

    <text class="title">{{title}}</text>

    </view>

    <!-- interval:轮播间隔时间  imgList: 轮播图数组  @click:轮播图点击事件-->

    <ccCarouseView interval="2000" :imgList="myImgList" @click="goImgClick"></ccCarouseView>

    </view>

    </template>

    ```

    #### JS代码 (引入组件 填充数据)

    ```javascript

    <script>

    import ccCarouseView from '../../components/ccCarouseView.vue'

    export default {

    components: {

    ccCarouseView

    },

    data() {

    return {

    title: '使用方法: <ccCarouseView interval="2000" :imgList="myImgList" @click="goImgClick"></ccCarouseView>',

    myImgList: []

    }

    },

    onLoad() {

    // 模拟数据

    this.myImgList = [{

    'name': '图片1',

    'imgUrl': 'https://cdn.pixabay.com/photo/2016/08/15/14/33/rock-towers-1595571_1280.jpg'

    },

    {

    'name': '图片2',

    'imgUrl': 'https://cdn.pixabay.com/photo/2023/05/07/12/14/beetle-7976249_1280.jpg',

    },

    {

    'name': '图片3',

    'imgUrl': 'https://cdn.pixabay.com/photo/2019/12/19/16/48/canton-4706569_1280.jpg',

    },

    {

    'name': '图片4',

    'imgUrl': 'https://cdn.pixabay.com/photo/2022/04/27/12/30/switzerland-7160290_1280.jpg'

    }

    ]

    },

    methods: {

    goImgClick(item){

      uni.showModal({

      title:'温馨提示',

    content: '点击图片带的数据= ' + JSON.stringify(item)

      })

    }

    }

    }

    </script>

    ```

    #### CSS

    ```CSS

    <style>

    .content {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    }

    .text-area {

    display: flex;

    justify-content: center;

    margin: 20px 0px;

    width: calc(100vw - 40px);

    }

    .title {

    font-size: 32rpx;

    color: #161616;

    }

    </style>

    ```

    相关文章

      网友评论

        本文标题:非常简单好用实用的轮播图swiper banner组件

        本文链接:https://www.haomeiwen.com/subject/oouyedtx.html