nvue开发中像素单位封装使用

官网注意点

注意点

这里我需要提醒的注意点有：
1、只支持flex布局，默认是纵向，需要设置则添加上flex-direction: row;
2、不支持%、vh、vw单位，支持rpx和px，推荐使用px
3、如果需要书写类名css，不能重叠，只能单独开辟一个类出来设置style

缘由

由于开发时候设计搞可能是以rpx为设置的单位，这个时候我们就需要通过计算占比来获取px的大小

封装一个获取px的方法

注意：高度请根据设计搞给于的高度进行设置，宽度rpx默认是750

export default {
	data(){
		return {
			screenHeight:0,
			screenWidth:0
		}
	},
  	onLoad() {
	    this.screenHeight = uni.getStorageSync('screenHeight');
	    this.screenWidth = uni.getStorageSync('screenWidth');
  	},
  	methods:{
	    /**
	     * @param {Number} num是设置的宽度值
	     */
	    getWidth(num) {
	      const width = this.screenWidth;
	      const a = num / 750; //计算rpx占比
	      const b = a * width; //通过px计算百分百的宽度
	      return b + 'px';
	    },
	    /**
	     * @param {Number} num是设置的高度值,最大421
	     */
	    getHeight(num) {
	      const height = this.screenHeight;
	      const a = num / 421; //这里我们设计搞事421rpx
	      const b = a * height;
	      return b + 'px';
	    },
	    /**
	     * 同事设置宽度和高度
	     * @param w是设置的宽度,h是设置的高度，如果都不填则默认是百分百
	     */
	    setWidthAndHeight(w, h) {
	      w = w ? this.getWidth(w) : this.screenWidth + 'px';
	      h = h ? this.getHeight(h) : this.screenHeight + 'px';
	      // console.log('测试====', h);
	      return {
	        width: w,
	        height: h
	      };
	    },
	}
}

使用

<!--宽高度百分百-->
<view class="container" :style="setWidthAndHeight()">
</view>

<!--高度百分百,宽度自行设置-->
<view class="left_bg" :style="{ width: getWidth(251), height: getHeight(421) }">

<!--left和right都是使用getWidth()-->
<!--top和bottom都是使用getHeight()-->
</view>