微信小程序小案例-----轮播图

 

wxml：
<view class="page ">
    <swiper indicator-dots="{{indicatorDots}}"  autoplay="{{true}}"  interval="{{interval}}" duration="{{duration}}">
        <block wx:for="{{images}}">
            <swiper-item>
                    <image src="{{item}}"   height="130rpx"/>
            </swiper-item>
        </block>
        
    </swiper>

</view>

js：
Page({
    data:{
        indicatorDots:true,
        interval:4000,
        duration:1000,
        images:[
            '/images/1.jpg',
            '/images/7.jpg',
            '/images/9.jpg',
            '/images/20.jpg',

        ]
    },
    onLoad:function(options){
        
    },
    onReady:function(){
        
    },
    onShow:function(){
        
    },
    onHide:function(){
        
    },
    onUnload:function(){
        
    },
    onPullDownRefresh:function(){
        
    },
    onReachBottom:function(){
        
    }
})        

wxss：
image{
    width:750rpx;
}

 效果图：

转载于:https://www.cnblogs.com/jyxlj/p/7530504.html