小程序模板網(wǎng)

微信小程序開發(fā)輪播圖

發(fā)布時間:2021-06-03 10:41 所屬欄目:小程序開發(fā)教程
在前端工程師的工作中,banner是必不可少的,那缺少了DOM的小程序是如何實現(xiàn)banner圖的呢?如同其他的框架封裝了不同的banner圖的方法,小程序也封裝了banner的方法。
主要代碼如下:
<!--index.wxml-->  
    <swiper class="swiper" indicator-dots="true" autoplay="true" interval="5000" duration="1000">  
      <block wx:for="{{movies}}" wx:for-index="index">  
        <swiper-item>  
          <image src="{{item.url}}" class="slide-image" mode="aspectFill"/>  
        </swiper-item>  
      </block>  
    </swiper>

swiper說明:
 
JS代碼:

//index.js  
//獲取應(yīng)用實例  
var app = getApp()  
Page({  
  data: {  
    movies:[  
    {url:'http://img04.tooopen.com/images/20130712/tooopen_17270713.jpg'} ,  
    {url:'http://img04.tooopen.com/images/20130617/tooopen_21241404.jpg'} ,  
    {url:'http://img04.tooopen.com/images/20130701/tooopen_20083555.jpg'} ,  
    {url:'http://img02.tooopen.com/images/20141231/sy_78327074576.jpg'}   
    ]  
  },  
  onLoad: function () {  
  }  
})  

wxss代碼:
.swiper {
  height: 400rpx;
  width: 100%;
}
.swiper image {
  height: 100%;
  width: 100%;
}


易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開源 碼云倉庫:starfork
本文地址:http://22321a.com/wxmini/doc/course/26052.html 復(fù)制鏈接 如需定制請聯(lián)系易優(yōu)客服咨詢:800182392 點(diǎn)擊咨詢
QQ在線咨詢