您当前的位置: 首页 > 解决方案

微信小程序之swiper组件高度自适应

  • 作者: admin
  • 发布于 2018-06-05 13:53:24
  • 来源:  
  • 栏目:解决方案

导语: 微信小程序开发 swiper默认最小高度150 要求:swiper高度自适应 wxml <

 微信小程序开发

swiper默认最小高度150

要求:swiper高度自适应

wxml

 
<view class='swiper'>
    <swiper indicator-dots="{{indicatorDots}}" vertical="{{vertical}}" autoplay="{{autoplay}}" duration="{{duration}}" interval='{{interval}}' bindchange="bindchange"  circular="{{circular}}" style="height:{{imgheights[current]}}rpx;">
    <block wx:for='{{imgList}}' wx:key="{{index}}">
      <swiper-item>
        <image src="{{item}}" data-id='{{index}}' class="slide-image" mode="widthFix" bindload="imageLoad"/>
      </swiper-item>
      </block>
    </swiper>
  </view>
复制代码

wxss

.swiper image {   width: 100%;   height: auto; }

wxjs

 
data: {     //图片地址
    imgList: ['/images/wyh-img_bg.png', '/images/wyh-img8.png', '/images/wyh-img_shop1.png', '/images/wyh-img_bg1.png'],     //是否采用衔接滑动  
    circular: true,     //是否显示画板指示点  
    indicatorDots: false,     //选中点的颜色  
    indicatorcolor: "#000",     //是否竖直  
    vertical: false,     //是否自动切换  
    autoplay: true,     //自动切换的间隔
    interval: 2500,     //滑动动画时长毫秒  
    duration: 100,
  
//所有图片的高度 (必须) imgheights: [], //图片宽度 imgwidth: 750, //默认 (必须) current: 0 }, imageLoad: function (e) {//获取图片真实宽度 var imgwidth = e.detail.width, imgheight = e.detail.height, //宽高比 ratio = imgwidth / imgheight; console.log(imgwidth, imgheight) //计算的高度值 var viewHeight = 750 / ratio; var imgheight = viewHeight; var imgheights = this.data.imgheights; //把每一张图片的对应的高度记录到数组里 imgheights[e.target.dataset.id] = imgheight; this.setData({ imgheights: imgheights }) }, bindchange: function (e) { // console.log(e.detail.current) this.setData({ current: e.detail.current }) },
 



温馨提示:这篇文章没有解决您的问题?欢迎添加微信:18948083295,有微信小程序专业人员,保证有问必答。转载本站文章请注明转自http://www.okeydown.com/(微信小程序网)。

  • 微信扫描二维码关注官方微信
  • ▲长按图片识别二维码
关注我们

微信小程序官方微信

栏目最新
栏目推荐
返回顶部