图片缩放与价格显示逻辑-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_36258899/article/details/109763176

本文介绍了一个用于动态调整图片尺寸的JavaScript类，并提供了一种根据图片原始尺寸及屏幕尺寸来确定展示尺寸的方法。此外，还展示了如何根据不同条件设置图片的宽高比，以及实现商品价格显示逻辑的两种方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

imageRatio.js 动态设置图片宽高缩放比例

class Ratio{
  static imgZoomH(oW,oH,imgW){
    let imgSize = {};
    if(imgW){
      imgSize.imageWidth = imgW;
      imgSize.imageHeight = ( imgW * oH ) / oW 
    }else{
      wx.getSystemInfo({
        success:(res)=>{
          imgW = res.windowWidth;
          imgSize.imageWidth = imgW;
          imgSize.imageHeight = ( imgW * oH) / oW;
        }
      })
    }
    return imgSize;
  }
  static imgZoomW(oW,oH,imgH){
    let imgSize = {};
    if(imgH){
      imgSize.imageWidth = ( imgH * oW ) / oH;
      imgSize.imageHeight = imgH;
    }else{
      wx.getSystemInfo({
        success: (result) => {
          imgH = result.windowHeight;
          imgSize.imageWidth = ( imgH * oW ) / oH;
          imgSize.imageHeight = imgH;
        },
      })
    }
    return imgSize;
  }
}



export default Ratio;

JS页面

imgLoad:function  (e){
    console.log(e);
    let w = e.detail.width;
    let h = e.detail.height;
    let wh ={}
    if(w>h && h<360){
      console.log(1);
      
      wx.getSystemInfo({
        success:(res)=>{
          wh = Ratio.imgZoomH(w,h, res.windowWidth)
        }
      })
    }else if( h > w || h > 360){
       wh = Ratio.imgZoomW(w,h,180)
    }
    this.setData({
      width: wh.imageWidth,
      height:wh.imageHeight 
    })
  },

WXML

wxss

.top-theme{
  /* width: 100%;
  height:260rpx; */
  display: flex;
  justify-content: center;
  margin :0 auto;
}

二、价格工具

// 折扣价 是业务逻辑思维

// 主价格
function  mainPrice(price, discountPrice){
  if(!discountPrice){
      return price
  }else{
    return discountPrice
  }
}
// 划线价格
function slashedPrice(price, discountPrice){
    if(discountPrice){
      return price
    }else{
      return 
    }
}
module.exports = {
  mainPrice:mainPrice,
  slashedPrice:slashedPrice
}

第二种写法

// 折扣价 是业务逻辑思维

// 主价格
function  mainPrice(price, discountPrice){
  if(!discountPrice){
      return {
        price:price,
        display:true
      }
  }else{
    return {
      display:true,
      price:discountPrice,
    }
  }
}
// 划线价格
function slashedPrice(price, discountPrice){
    if(discountPrice){
      return {
        price:price,
        display:true,
      }
    }else{
      return {
        display:false,
        price:null
      }
    }
}
module.exports = {
  mainPrice:mainPrice,
  slashedPrice:slashedPrice
}

在这里插入图片描述