我们在做小程序页面时常常会需要设置背景,而不同手机的屏幕宽高度并不一样,虽然设置宽度为750rpx来解决宽度自适应的问题,但高度却没有这种方法,下面来简单介绍一下设置高度自适应的方法:

一、750rpx自适应宽度

rpx是小程序自带的衡量尺寸,可以根据屏幕宽度进行自适应,750rpx则设定为手机页面宽度。而不同的手机屏幕大小750rpx对应的px不同,如iphone6的宽度是375px,在iphone6的小程序中750rpx就等于375px。 故一般在wxss中设置

width:750rpx;

即可解决宽度自适应

二、设置自适应高度

1、首先在页面的js中定义变量
let SCREEN_WIDTH = 750
let RATE = wx.getSystemInfoSync().screenHeight /wx.getSystemInfoSync().screenWidth

其中getSystemINofSync()可以让系统返回屏幕高度

2、在js下的page中定义data

Page({
  data: {
    ScreenTotalW: SCREEN_WIDTH,
    ScreenTotalH: SCREEN_WIDTH * RATE,
    },

3、wxml中使用

<view class="container"style="width:{{ScreenTotalW}}rpx;height:{{ScreenTotalH}}rpx" >
  <text>文章轮播图</text>
</view>

三、相关知识及遇到的问题

1、data

(1)data是页面第一次渲染使用的初始数据 (2)数据必须是可以转成JSON的类型:字符串,数字,布尔值,对象,数组 (3)每次使用要给自定义的data加上{{data}}

2、问题

(1)在data中添加语句,添加在前两行就ok,放在原data后面就报错 (2)目前是在wxml中的标签中添加样式来使用,但直接在wxss当中用就会报错 报错信息参考文章

该文章版权属于neti觉得时日不多
摘录自:https://blog.csdn.net/weixin_40807080/article/details/102927023

相关文章:

猜你喜欢
热门标签