小程序工具库

本文介绍了一个用于动态调整图片尺寸的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
}

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值