首页 网络编程 前端制作 数据库 CMS教程 脚本编程 微信开发 小程序开发 服务器

小程序开发

热门: ASP.NET PHP编程 ASP编程 JSP编程

微信小程序幻灯的swiper标签宽和高度自适应

来源:未知 发布时间:2018-05-04

本方案解决微信小程序幻灯的swiper标签宽和高度自适应方案,费话少说直接上代码:

.wxhl中的代码:

 

[html] view plain copy
 
 
  1. <swiper indicator-dots='true' indicator-color='rgba(0,0,0,0.3)' indicator-active-color='#04997C' autoplay='true' interval='5000' class='banner' style='height:{{bannerHeight}}px'>  
  2. <block wx:for="{{imgUrls}}">  
  3.     <swiper-item>  
  4.       <image src="{{item}}" class="slide-image" mode='{{mod[1]}}' bindload='imageLoad'></image>  
  5.     </swiper-item>  
  6.   </block>  
  7. </swiper>  

css代码:

 

[css] view plain copy
 
 
  1. .banner{ width100%heightautodisplayblock;}  
  2. .slide-image{ width100%displayblock;}  

js代码:

 

[html] view plain copy
 
 
  1. data: {  
  2.     imgUrls: [  
  3.       'http://域名/images/banner1.jpg',  
  4.       'http://域名/images/banner3.jpg',  
  5.       'http://域名/images/banner2.jpg'  
  6.     ],  
  7.     mod:[  
  8.       'aspectFit',  
  9.       'widthFix',  
  10.     ]  
  11.   }  
  12. imageLoad: function (e) {  
  13.     var res = wx.getSystemInfoSync();  
  14.     var imgwidth = e.detail.width,  
  15.       imgheight = e.detail.height,      
  16.       ratio = imgwidth / imgheight;  
  17.         this.setData({  
  18.           bannerHeight: res.windowWidth / ratio  
  19.         })  
  20.         
  21.   }  
原理:先高所有的宽为100%,图的mode用"widthFix"让图片高度按宽度等比例缩放,再根据微信给的
[html] view plain copy
 
 
  1. wx.getSystemInfoSync()  
这个函数获取屏幕的宽,然再获取图片的原高和宽,算出比例,用屏幕的宽除上比例就是我所需要现在swiper的高度值。
网络编程 | 前端制作 | 数据库 | CMS教程 | 脚本编程 | 微信开发 | 小程序开发 | 服务器 |

程序员学习网,提供最新的微信开发教程,小程序开发教程,网络编程、php教程、asp.net教程、微信公众平台二次开发教程、脚本编程、网页制作、网页设计、网页特效,为站长与网络编程从业者提供学习资料,凡本网站转载的文章、图片等资料的版权归版权所有人所有,因无法和版权所有者一一联系,如果本网站选取的文/图威胁到您的权益,请您及时和本网站联系。 我们会在第一时间内采取措施,避免给双方造 成不必要的损失。
© 2015-2018 程序员学习网 版权所有,并保留所有权利。

电脑版 | 移动版