1.轮播图(直接用)

wxml.<!-- 首页的轮播图 -->
<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}"     interval="{{interval}}"duration="{{duration}}">
    <block wx:for="{{imgUrls}}" wx:key="{{imgUrls}}">
        <swiper-item>
            <image src="{{item}}" class="slide-image" />
        </swiper-item>
    </block>
</swiper>

 

Js.

首页的轮播图
imgUrls:["/images/shouye/lunbotu7.jpg",
         "/images/shouye/lunbotu6.jpg",
         "/images/shouye/lunbotu3.png",
         "/images/shouye/lunbotu2.png",
        ],
indicatorDots: true, //是否显示面板指示点
autoplay: true, //是否自动切换
interval: 3000, //自动切换时间间隔
duration: 1000, //滑动动画时长
inputShowed: false,
inputVal: "",

 

wxss.

/* 首页的轮播图 */
.swiper {
    height: 400rpx;
    width: 100%;
}
.swiper-image {
    height: 100%;
    width: 100%;
}
.slide-image{
    height: 100%;
    width: 100%;
}

 


版权声明:本文为weixin_37910098原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
原文链接:https://blog.csdn.net/weixin_37910098/article/details/86629149