zoukankan      html  css  js  c++  java
  • 小程序--解决Swiper 图片高度自适应

     <swiper bindchange="bindchange" style="height:{{imgheights[current]}}rpx;" indicator-dots="{{indicatorDots}}"  autoplay="false" circular ='true' interval="5000" duration="1000">
                        <block wx:for="{{item.images}}" wx:for-item="itemName" wx:key='itemName'>
                          <swiper-item>
                            <image bindload="imageLoad"  data-id='{{index}}' src="{{itemName}}" class="slide-image"  mode="widthFix" style='100%'   />
                          </swiper-item>
                        </block>
    </swiper>
    Page({
       data:{
         imgheights: [],//所有图片的高度  
         current:0
       } ,
      imageLoad(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; console.log('图片的高度:'+imgheights) this.setData({ imgheights: imgheights }) }, bindchange: function (e) {// current 改变时会触发 change 事件
    this.setData({ current: e.detail.current })
      },
    
    })
  • 相关阅读:
    Java synchronized详解
    How to Use Lambda Expressions in a Query
    生活工作记录
    SilverLight中的几何形状 (转)
    用CSS改变鼠标样式
    SCRUM 敏捷开发 基础及失败成功案例分析
    JavaScript Create GUID function
    数据结构排序
    JSON简介
    追逐所求,享受所有
  • 原文地址:https://www.cnblogs.com/mengdiezhuangzhou/p/9699460.html
Copyright © 2011-2022 走看看