微信小程序之swiper轮播图中的图片自适应高度的方法.pdfVIP

微信小程序之swiper轮播图中的图片自适应高度的方法.pdf

  1. 1、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。。
  2. 2、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载
  3. 3、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
  4. 4、该文档为VIP文档,如果想要下载,成为VIP会员后,下载免费。
  5. 5、成为VIP后,下载本文档将扣除1次下载权益。下载后,不支持退款、换文档。如有疑问请联系我们
  6. 6、成为VIP后,您将拥有八大权益,权益包括:VIP文档下载权益、阅读免打扰、文档格式转换、高级专利检索、专属身份标志、高级客服、多端互通、版权登记。
  7. 7、VIP文档为合作方或网友上传,每下载1次, 网站将根据用户上传文档的质量评分、类型等,对文档贡献者给予高额补贴、流量扶持。如果你也想贡献VIP文档。上传文档
查看更多
微信⼩程序之swiper轮播图中的图⽚⾃适应⾼度的⽅法 ⼩程序中的轮播图很简单,官⽅都有例⼦的,但是唯⼀的缺陷就是swiper是固定死的150px⾼度,这样如果传⼊的图⽚⼤于这个⾼度就会被隐藏。辣么,怎样让图⽚⾃适 应不同分辨率捏。 我的思路是:获取屏幕宽度,获取图⽚的宽⾼,然后等⽐设置当前屏幕宽度下swiper的⾼度。 1.结构 block wx:for={{imgUrls}} swiper-item image src={{item}} class=slide-image mode=widthFix bindload=imgHeight/是绑定图⽚加载的事件,记得给image加上mode=“widthFix”这个属性哦,还有就是设置这个//bindloadimage 100%宽度哟 /swiper-item /block /swiper swiper的各个属性在官⽅⽂档中都有,这⾥就不说明了。最主要的是: style=height:{{Height}} //动态设置swiper的⾼度 2.在page⾥⾯: data: { imgUrls: [ ../img/goodsDetail/goods.png, ../img/goodsDetail/goods.png, ../img/goodsDetail/goods.png ], indicatorDots: true, autoplay: true, interval: 5000, duration: 1300, bg: #C79C77, Height:这是swiper要动态设置的⾼度属性// }, imgHeight:function(e){ var winWid = wx.getSystemInfoSync().windowWidth; //获取当前屏幕的宽度 var imgh=e.detail.height;//图⽚⾼度 var imgw=e.detail.width;//图⽚宽度 var swiperH=winWid*imgh/imgw + px//等⽐设置swiper的⾼度。即屏幕宽度 / swiper⾼度 =图⽚宽度 /图⽚⾼度 》==swiper⾼度 =屏幕宽度 *图⽚⾼度 /图⽚宽度 this.setData({ Height:swiperH//设置⾼度 }) }, 总结:获取当前屏幕宽度: wx.getSystemInfoSync().windowWidth 在⼩程序⾥动态设置属性,只有通过setData({ })来设置,和js中直接操作css样式有⼀点类似 注意:image如果外层有个容器装,然后image设置width为100%之后,距离装它的容器底部有⼀点距离,那是因为image是默认设置的display:inline-block属性,这个属 性会产⽣间隙。如果要撑满容器,设置为display:block就可以了。 以上就是本⽂的全部内容,希望对⼤家的学习有所帮助,也希望⼤家多多⽀持。

文档评论(0)

166****9220 + 关注
实名认证
文档贡献者

该用户很懒,什么也没介绍

1亿VIP精品文档

相关文档