uniapp 轮播图

明日之后

[JavaScript] 纯文本查看 复制代码

<swiper
indicator-dots          是否添加圆点指示器
circular   是否可以循环滑动
autoplay  自动轮播
interval=3000  轮播间隔
@change=改变回调(e){event.detail.current 可获取当前轮播索引}
>
        <swiper-item>轮播的数据</swiper-item>
</swiper>

代码示例:

[JavaScript] 纯文本查看 复制代码

<template>
        <view class="content">
                <view class='home'>
                        <swiper
                        indicator-dots         
                        circular
                        autoplay
                        interval=3000
                        >
                                <swiper-item v-for="(item,index) in swipers" :key="index">
                                        <image :src="item"></image>
                                </swiper-item>
                                <swiper-item>2</swiper-item>
                        </swiper>
                </view>
        </view>
</template>

<script>
        export default {
                data() {
                        return {
                                title: 'Hello',
                                swipers:[]
                        }
                },
                onLoad() {
                        //模拟ajax获取数据，uni.request({...});注意回调的this指向
                        this.swipers=['https://app-file.beitaichufang.com/img/H5/web/banner/banner20.jpg',
                        "https://app-file.beitaichufang.com/img/H5/web/banner/banner21.jpg",
                        "https://app-file.beitaichufang.com/img/H5/web/banner/banner22.jpg",
                        "https://app-file.beitaichufang.com/img/H5/web/banner/banner23.jpg"
                        ];
                        
                },
                methods: {

                }
        }
</script>

<style lang="scss">
        .home{
                swiper{
                        width: 750rpx;
                }
                image{
                        width: 100%;
                        height: 100%;
                }
        }
</style>