国产色频,国产网站精品,成人在线综合网,精品一区二区三区毛片,亚洲无卡视频,黄色av观看,亚洲福利影视

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

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

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

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

輪播圖，不外乎倆個(gè)要素，跳轉(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 是否自動(dòng)播放

interval 自動(dòng)播放間隔時(shí)間

duration 滑動(dòng)動(dòng)畫(huà)時(shí)間

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

2. 部署到頁(yè)面

找到文件 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 千萬(wàn)不要在外面加上任何標(biāo)簽例如 <view> 之類的，如果加了可能會(huì)導(dǎo)致輪播圖出不來(lái)

3. 添加頁(yè)面樣式

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

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

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

看效果

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

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

我要收藏

個(gè)贊