[wx·part]微信小程序解决scroll-view自适应手机高度问题

前言：

今天又遇到了scroll-view控件自适应手机高度问题，之前不久遇到了同样的问题，那个时候也是到处碰壁，才解决了问题。当时心想着自己通过这次实践，应该是会了，结果还是······。哈哈哈！！！，所以今天还是把解决问题步骤记录下来。

一、页面内容：

wtml页面代码：

<!--pages/newWords/newWords.wxml-->

<view class="body">

  <!-- 头部内容 -->
  <view class="tipBody">
    <image class="newWordsImg" src="../source/image/newWordsImg.jpg"></image>
    <text class="tipText">生词列表</text>
    <image class="showMeanImg"></image>
    <text class="showMean" bindtap="showMean">{{showMeanTip}}</text>  
  </view>

  <!-- 滑块内容scrollView -->

  <view class="scrollviewBody">

    <scroll-view class="scroll-view"  scroll-y="true">
      <view class="scrollviewItems" wx:for="{{scrollviewArray}}">
        {{index}}: {{item.message}}
      </view>
    </scroll-view>

  </view>

</view>

wcss代码：

/* pages/newWords/newWords.wxss */

page {                         /*这里的page是手机页面的高度，为适应scrollview自适应手机高度*/
  height: 100%;
}

.body{
  height: 100%;
  display: flex;
  flex-direction: column;       /*子元素对齐方向为竖直方向*/
  
}

.tipBody{
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 70rpx;
  width: 100%;
  box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0,0,0,0.2);
}

.newWordsImg{
  height: 50rpx;
  width: 50rpx;
  margin-left: 5%;
  /* background: chartreuse; */
}

.tipText{
  color: #000000;
  font-size: 40rpx;
  letter-spacing: 3rpx;
  /* font-weight: bold; */
  margin-left: 2%;
}
.showMeanImg{
  height: 10rpx;
  width: 10rpx;
  margin-left:40%;
  border-radius: 5rpx;
  background:#b5b1b0;
}
.showMean{
  color: #b5b1b0;
  font-size: 30rpx;
  margin-left: 2%;

}



.scrollviewBody{                  
  /*全为scrollview自适应手机高度*/
  overflow: auto;             
  /*visible 元素将被剪接      
  hidden  元素将被剪接，溢出内容不可见                               √             
  scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。      √
  auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。        √
  inherit	规定应该从父元素继承 overflow 属性的值。
  */
}

.scroll-view{
  text-align: center;
  height: 100%;
}

.scrollviewItems{
  display: flex;              /*启用flex布局*/
  flex-direction: row;        /*盒子元素排列方式为row水平方式，主轴方向为水平方向*/
  /* justify-content: center; */  /*元素在主轴方向上的对齐方式*/
  align-items: center;        /*元素在垂直主轴上的对齐方式*/
  height: 180rpx;
  width: 100%;
  border: #b5b1b0;         
  border-bottom-style:solid;   /*只显示边框的底边，solid为实体边框*/
  border-width: 2rpx;
}

二、解决步骤：

wcss代码中的page设置height:100%很重要，这是获取手机页面高度的的重要代码，之后是将整个页面内容包裹在一个大的view中，通过body修饰，里面开始盒子布局，并设置高度占比为100%，子元素排列方向为竖直方向。==后面是重点：==页面分为scroll-view控件占比区域，和其他控件占比区域。1区为其他控件，2区为scroll-view控件占比区域。其他控件高度自由安排，留给scroll-view控件的空间必须用view包裹，让他成为scroll-view空间的父级对象。里面只需要设置overflow属性，后对scroll-view控件修饰时，设置height为100%就行，即指定了scroll-view控件必要的高度属性，也由父级对象自适应了手机高度。

三、效果：