全网整合营销服务商

营销型网站+SEO优化+关键词快排=一站式服务

免费咨询热线:15959292472

[通辽seo公司优选久澳]微信小程序内轮播图怎样设置成自适应高度

  这次给大家带来微信小程序内轮播图怎样设置成自适应高度△■,微信小程序内轮播图怎设置成自适应高度的注意事项有哪些,下面就是实战案例,一起来看一下。

  我的思路是:获取屏幕宽度,获取图片的宽高▪▪•,然后等比设置当前屏幕宽度下swiper的高度•-…。

  1.结构

  


 

  

<▽-△…;swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="…◁■•;{{interval}}" duration="•▽◇;{{duration}}"☆▲★☆; indicator-active-color="{{bg}}" style='height■●○▪:{{Height}}'>▲○••;
 <block wx:for="{{imgUrls}}">
 <swiper-item>
 <image src="◆●;{{item}}" class="=△…○;slide-image"○▲◁; mode="○•★;widthFix" bindload='imgHeight'■◁;/> //bindload是绑定图片加载的事件=◇=,记得给image加上mode=“widthFix”这个属性哦,还有就是设置这个image 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的高度▪-。[通辽seo公司优选久澳] 即 屏幕宽度 / swiper高度 = 图片宽度 / 图片高度 ==》swiper高度 = 屏幕宽度 * 图片高度 / 图片宽度
 this.setData({
 Height:swiperH//设置高度
 })
},

 

  总结:获取当前屏幕宽度: wx.getSystemInfoSync()▷▼▲.windowWidth
 

  在小程序里动态设置属性,只有通过setData({ })来设置•◁◁◆,23 2020.10 [湛江seo公司选久澳]如何对微信公众号基本配置 本篇文章主要讲述了如何对微信公众号进行基本的配置,具有一定的参考价值,想要搭建微信公众号的朋友可以了解一下,希望对你有所帮助▪☆。 这个是微信公众平台上的配置■▲▪和js中直接操作css样式有一点类似

  注意:image如果外层有个容器装,然后image设置width为100%之后,距离装它的容器底部有一点距离,那是因为image是默认设置的display▲△:inline-block属性,这个属性会产生间隙▼▷☆。如果要撑满容器,设置为display▽★□▼:block就可以了。
 

  相信看了本文案例你已经掌握了方法,更多精彩请关注久澳传媒编程栏目其它相关文章!百色市小程序开发哪家好

  推荐阅读

  JS门面模式使用案例详解

  JS的try-catch语句与错误类型使用
 

  

 

  以上就是微信小程序内轮播图怎样设置成自适应高度的详细内容,更多请关注久澳传媒编程栏目其它相关文章!

[通辽seo公司优选久澳]微信小程序内轮播图怎样设置成自适应高度

您的项目需求

*请认真填写需求信息,我们会在24小时内与您取得联系。