zoukankan      html  css  js  c++  java
  • 小程序swiper的高随里面的图片高自适应

     <view class='index-bg' wx:if="{{dataInfo.img_src.length}}">
          <swiper indicator-dots="true" autoplay="{{autoplay}}" circular="{{circular}}" interval="{{interval}}"
             duration="{{duration}}" indicator-color="rgba(255,255,255,0.6)" indicator-active-color="#fff" bindchange="bindchange" style="height:{{imgheights[current]}}rpx;">
             <block wx:if="{{dataInfo.img_src.length>0}}" wx:for="{{dataInfo.img_src}}" wx:key='index'>
                <swiper-item bindtap="yulanImg" data-index="{{index}}">
                   <view class='slide-navigator acea-row row-between-wrapper' hover-class='none'>
                      <image src="{{item}}" class="slide-image" mode="widthFix"  data-id='{{index}}' mode="widthFix" bindload="imageLoad"/>
                   </view>
                </swiper-item>
             </block>
          </swiper>
       </view>
    .index-bg image {
      width: 100%;
      height: auto;
    }
     data: {
        indicatorDots: false,
        circular: true,
        autoplay: true,
        interval: 3000,
        duration: 500,
        dataInfo: {
          img_src: []
        }, //详情页数据
         //所有图片的高度  
         imgheights: [],
         //图片宽度 
         img 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 })
      },

    以上的笔记亲测有效!!

    非常感谢博主梦幻飞雪的笔记,转载于:https://www.cnblogs.com/wangyihong/p/8610956.html

  • 相关阅读:
    算法导论--2.2分析算法
    C++对象模型
    算法导论--插入排序
    记一次Chrome冒充QQ浏览器领取奖励之行
    eclipse做界面开发
    eclipse jad 反编译 插件安装
    eclipse下web开发中缓存问题
    eclipse缓存问题
    No more “busy and acquire with NOWAIT”
    ora-00054:resource busy and acquire with nowait specified解决方法
  • 原文地址:https://www.cnblogs.com/liuqingxia/p/15718676.html
Copyright © 2011-2022 走看看