全屏轮播宽度100%动态获取图片高度并居中显示

太过爱你忘了你带给我的痛 2021-07-24 20:47 281阅读 0赞

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMjQxNTA0_size_16_color_FFFFFF_t_70][]

xml :

<view class="showNone show" >
        <view class="dian" style="margin-top:{
       {list[tabIndex].top}}px ">
          <swiper class='dianswiper' style="height:{
       {list[tabIndex].imageHeight}}px;" current="{
       {tabIndex}}" bindchange='diannum'>
            
            <block wx:for='{
       {list}}' wx:key='item'>
              <swiper-item>
                <image bindload="imageLoad"  data-index="{
       {index}}" style="height:{
       {item.imageHeight}}px;" src='{
       {item.img}}' mode="widthFix" class='dianswiper_img'></image>
              </swiper-item>
            </block>
          </swiper>
        </view>
        <view class="dianswiperNum">{
       {tabIndex+1}}/{
       {list.length}}</view>
         <view class="fanhui" catchtap="none">退出</view>
      </view>

Page({
    
      /**
       * 页面的初始数据
       */
      data: {
        list: [{
          img: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1573931235567&di=0b33821d5791ec6d0a65a1931c5aa196&imgtype=0&src=http%3A%2F%2Fwww.leawo.cn%2Fattachment%2F201408%2F22%2F1723875_1408671905O1v3.jpg',
        }, {
          img: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1573931235566&di=1fda270746b36fdfabea581c96b1c4e2&imgtype=0&src=http%3A%2F%2Fpic71.nipic.com%2Ffile%2F20150710%2F9448607_105753090000_2.jpg',
        }, {
          img: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1573931235561&di=caec517ef63fe205448ce9a60505c3e0&imgtype=0&src=http%3A%2F%2Fimg.mp.itc.cn%2Fupload%2F20160321%2Fc7ba8709c71e4adfac4c3c973424e3ef_th.jpg'
        }, {
          img: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1573931235560&di=bd829737e847836524cf676d2de1b85a&imgtype=0&src=http%3A%2F%2Fpic49.nipic.com%2Ffile%2F20140929%2F9448607_180233775000_2.jpg',
        }, {
          img: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1573931235559&di=ad5c2e7876f2880e399a6104187b5ef5&imgtype=0&src=http%3A%2F%2Fimg.pconline.com.cn%2Fimages%2Fupload%2Fupc%2Ftx%2Fitbbs%2F1412%2F12%2Fc7%2F577115_1418395060436_mthumb.jpg',
        }, {
          img: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1573931235558&di=dcfa20ae7f64132978e3faa9377df844&imgtype=0&src=http%3A%2F%2Fpic29.nipic.com%2F20130527%2F9331768_163938364000_2.jpg',
        }, {
          img: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1573931235556&di=d20d0da971a41856ffe2caa5188880fa&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fblog%2F201312%2F09%2F20131209151602_evtcw.jpeg',
        }, {
          img: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1573931351789&di=8a1a2a9c1e066dae4d22ab7158bbd14d&imgtype=0&src=http%3A%2F%2Fpic20.nipic.com%2F20120418%2F7923697_111949859000_2.jpg',
        }, {
          img: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1573931351788&di=c061e8aed4f8e35c2f0d57812962ff06&imgtype=0&src=http%3A%2F%2Fattach.bbs.miui.com%2Fforum%2F201310%2F16%2F224046ups8zp1jg31uz82g.jpg',
        }, ],
      
        // 详情的图片下表
        tabIndex: 0
      },
      onLoad: function(options) {},
    
      // 动态计算图片等比缩放后的高度
      imageLoad: function(e) {
        // console.log(e)
        //获取图片的原始宽度和高度
        let originalWidth = e.detail.width / 375;
        // console.log(1111, originalWidth)
        let originalHeight = parseInt(e.detail.height / originalWidth);
        let top = (667 - originalHeight) / 2
        let index = parseInt(e.currentTarget.dataset.index)
        // console.log(originalHeight)
        let aa = "list[" + index + "].imageHeight";
        let bb = "list[" + index + "].top";
        this.setData({
          [aa]: originalHeight,
          [bb]: top
        })
      },
    //切换图片
      diannum(e) {
        console.log(e)
        this.setData({
          tabIndex: e.detail.current
        })
      },
    })

xss

.show {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      background: #000;
      width: 100%;
    }
    
    .dian {
      position: relative;
      width: 100%;
    }
    
    .dian .dianswiper {
      width: 100%;
    }
    
    .dianswiper_img {
      width: 100%;
    }
    
    .dianswiperNum {
      padding: 10rpx 30rpx;
      position: absolute;
      top: 10rpx;
      left: 50%;
      margin-left: -28rpx;
      border-radius: 60rpx;
      color: #fff;
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMjQxNTA0_size_16_color_FFFFFF_t_70]: /images/20210724/f14f79bfd11f4f7cbae6f78b8eaf62d2.png