微信小程序五（創(chuàng)建輪播圖）

2018-03-12 15:55:57 csdn　點(diǎn)擊量：評論 (0)

應(yīng)用中最常見的就是輪播圖了，今兒個就講講微信小程序中輪播圖的使用輪播圖，不外乎倆個要素，跳轉(zhuǎn)鏈接和圖片地址1 設(shè)置數(shù)據(jù)我在 pa

應(yīng)用中最常見的就是輪播圖了，今兒個就講講微信小程序中輪播圖的使用

輪播圖，不外乎倆個要素，跳轉(zhuǎn)鏈接和圖片地址

1. 設(shè)置數(shù)據(jù)

我在 pages/test/test.js中添加如下數(shù)據(jù)

[javascript] view plain copy 
//test.js  
//獲取應(yīng)用實(shí)例  
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');  
  }  
})  

其中 imgUrls 是我們輪播圖中將要用到的圖片地址和跳轉(zhuǎn)鏈接

indicatgorRots 是否出現(xiàn)焦點(diǎn)

autoplay 是否自動播放

interval 自動播放間隔時間

duration 滑動動畫時間

更多樣式編輯請參看文檔 https://mp.weixin.qq.com/debug/wxadoc/dev/component/swiper.html?t=1475052054228

2. 部署到頁面

找到文件 pages/test/test.wxml

[html] view plain copy 
<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="355" height="150"/>  
           </navigator>   
        </swiper-item>  
      </block>  
</swiper>  

注意： swiper 千萬不要在外面加上任何標(biāo)簽例如 <view> 之類的，如果加了可能會導(dǎo)致輪播圖出不來

3. 添加頁面樣式

創(chuàng)建文件 pages/test/test.wxss

[css] view plain copy 
.slide-image{  
    width: 100%;  
}  

加上上面的樣式可以使輪播圖的寬度達(dá)到100% 然后更漂亮點(diǎn)，當(dāng)然可以根據(jù)自己的喜好羅！

看效果

責(zé)任編輯：售電衡衡

免責(zé)聲明：本文僅代表作者個人觀點(diǎn)，與本站無關(guān)。其原創(chuàng)性以及文中陳述文字和內(nèi)容未經(jīng)本站證實(shí)，對本文以及其中全部或者部分內(nèi)容、文字的真實(shí)性、完整性、及時性本站不作任何保證或承諾，請讀者僅作參考，并請自行核實(shí)相關(guān)內(nèi)容。

我要收藏

個贊