小程序轮播图

test.js js样式 直接复制

var app = getApp()  
Page({  
  data: {  
      imgUrls: [  
       {  
          link:'/pages/index/index',  
          url:'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg'   
       },{  
          link:'/pages/logs/logs',  
          url:'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg'   
       },{  
          link:'/pages/test/test',  
          url:'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'   
       }   
    ],  
    indicatorDots: true,  
    autoplay: true,  
    interval: 5000,  
    duration: 1000,  
    userInfo: {}  
  },  
  onLoad: function () {  
    console.log('onLoad test');  
  }  
}) 

test.json 配置

{
    "navigationBarTitleText": "贲海龙"
}

test.wxml 页面

    <swiper indicator-dots="{{indicatorDots}}"  
            autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">  
          <block wx:for="{{imgUrls}}">  
            <swiper-item>  
               <navigator url="{{item.link}}" hover-class="navigator-hover">  
                <image src="{{item.url}}" class="slide-image" width="400" height="150"/>  
               </navigator>   
            </swiper-item>  
          </block>  
    </swiper> 

test.wxss 全局样式

.slide-image{  
    width: 100%;  
}  

发表评论

发表评论