电力供求市场信息    
毕水兴能源通道
大云网 新技术电力软件 正文

微信小程序五（创建轮播图）

2018-03-12 15:55:57 csdn　 点击量： 评论 (0)
应用中最常见的就是轮播图了，今儿个就讲讲微信小程序中轮播图的使用轮播图，不外乎俩个要素，跳转链接 和 图片地址1 设置数据我在 pa

应用中最常见的就是轮播图了，今儿个就讲讲微信小程序中轮播图的使用

轮播图，不外乎俩个要素，跳转链接 和 图片地址

1. 设置数据

我在 pages/test/test.js中添加如下数据

 

[javascript] view plain copy
 
  1. //test.js  
  2. //获取应用实例  
  3. var app = getApp()  
  4. Page({  
  5.   data: {  
  6.       imgUrls: [  
  7.        {  
  8.           link:'/pages/index/index',  
  9.           url:'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg'   
  10.        },{  
  11.           link:'/pages/logs/logs',  
  12.           url:'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg'   
  13.        },{  
  14.           link:'/pages/test/test',  
  15.           url:'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'   
  16.        }   
  17.     ],  
  18.     indicatorDots: true,  
  19.     autoplay: true,  
  20.     interval: 5000,  
  21.     duration: 1000,  
  22.     userInfo: {}  
  23.   },  
  24.   onLoad: function () {  
  25.     console.log('onLoad test');  
  26.   }  
  27. })  


其中 imgUrls 是我们轮播图中将要用到的 图片地址和 跳转链接

 

indicatgorRots 是否出现焦点

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
 
  1. <swiper indicator-dots="{{indicatorDots}}"  
  2.         autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">  
  3.       <block wx:for="{{imgUrls}}">  
  4.         <swiper-item>  
  5.            <navigator url="{{item.link}}" hover-class="navigator-hover">  
  6.             <image src="{{item.url}}" class="slide-image" width="355" height="150"/>  
  7.            </navigator>   
  8.         </swiper-item>  
  9.       </block>  
  10. </swiper>  


注意： swiper 千万不要在外面  加上任何标签 例如 <view> 之类的 ，如果加了可能会导致轮播图出不来

 

3. 添加页面样式

创建文件 pages/test/test.wxss

 

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


加上上面的样式可以使 轮播图的宽度达到100% 然后更漂亮点，当然可以根据自己的喜好罗！

 

 

看效果

大云网官方微信售电那点事儿

责任编辑：售电衡衡

免责声明：本文仅代表作者个人观点，与本站无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
分享到微博分享到微信
我要收藏
个赞
微信小程 轮播图