微信小程序中使元素占满整个屏幕高度实现方法

在微信小程序中，使元素占满整个屏幕高度实现方法可以使用Flex布局或者通过计算屏幕高度设置元素高度实现。下面将详细阐述这两种方法的实现步骤。

使用Flex布局

Flex布局是CSS3新增的一种布局方式，可以轻松实现元素的垂直居中、流动布局等等。使用Flex布局实现元素占满整个屏幕高度的方法如下：

1. 设置相对定位

.container {
  position: relative;
}

1. 设置元素为Flex布局

.container {
  display: flex;
}

1. 设置Flex项目填充整个屏幕高度

.item {
  flex: 1;
}

完整的代码示例：

<view class="container">
  <view class="item">Item1</view>
  <view class="item">Item2</view>
  <view class="item">Item3</view>
</view>

.container {
  position: relative;
  display: flex;
  height: 100vh;
}

.item {
  flex: 1;
}

计算屏幕高度

如果你不想使用Flex布局，还可以通过计算屏幕高度来设置元素高度实现元素占满整个屏幕高度。具体步骤如下：

1. 获取屏幕可用高度

wx.getSystemInfo({
  success: function (res) {
    var screenHeight = res.screenHeight;
  }
})

1. 设置元素高度为屏幕可用高度

.item {
  height: screenHeight + 'px';
}

完整的代码示例：

<view class="container">
  <view class="item">Item1</view>
  <view class="item">Item2</view>
  <view class="item">Item3</view>
</view>

.item {
  height: 100vh;
}

wx.getSystemInfo({
  success: function(res) {
    var screenHeight = res.screenHeight;
    $('.item').css('height', screenHeight + 'px');
  }
})

以上就是使用Flex布局和计算屏幕高度两种方法实现微信小程序中使元素占满整个屏幕高度的完整攻略，希望对你有所帮助。