【小程序】轮播图swiper的实例

2022/1/17 17:04:49

本文主要是介绍【小程序】轮播图swiper的实例,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

 1、swiper.wxml

<view>

    <swiper class="banner" indicator-dots="true" indicator-color="0,0,0,0.8"
    indicator-active-color="white"
    autoplay="true"
    interval="1500"
    circular="true" >
        <swiper-item>
            <image src="/pages/images/b1.jpg"></image>
        </swiper-item>
        <swiper-item>
            <image src="/pages/images/b2.jpg"></image>
        </swiper-item>
        <swiper-item>
            <image src="/pages/images/b3.jpg"></image>
        </swiper-item>
        <swiper-item>
            <image src="/pages/images/b4.jpg"></image>
        </swiper-item>
    </swiper>
</view>

2、swiper.wxss

/* pages/index/swiper.wxss */
.banner {
    width:100%;
    height:156px;
}
.banner image{
width:100%;
height:100%;
}



这篇关于【小程序】轮播图swiper的实例的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程