Are you still frustrated by the scroll view height adaptive problem? Still scratching your head over swiper height adaptive? Next, follow my lead and jerk them off!

Introduction to the

As we all know, Scroll view and swiper are two very commonly used components of wechat. Of course, they are also very easy to use, but the premise of easy to use is that you have to set a fixed height for them first. Let’s see what the official website says:

course

As shown in the figure above, it is clearly stated on the official website that the scrollview needs to set a fixed height.

Set the fixed high

Let’s set the height of the scroll view:

<view> <view class="top"> </view> < scrollview class="center" style="height:1100rpx" scrolly ="true"> <block wx:for="{{100}}" wx:key="*this"> <view style="height:100rpx; Border: 2 the RPX "> {{item}} < / view > < block > < / scroll - view > < the view class =" bottom "> next < / view > < / view >Copy the code
.top {
    height: 200rpx;
    line-height: 200rpx;
    text-align: center;
    font-size: 32rpx;
    color: white;
    background-color: lightgreen;
}

.center {
text-align: center;
}

Copy the code
.bottom {
height: 200rpx;
line-height: 200rpx;
text-align: center;
font-size: 32rpx;
color: white;
background-color: lightsalmon;
}

Fixed height

The effect is shown below:

Fixed high

As you can see, we originally wanted the top and bottom to be fixed and the middle to scroll, and now we’re scrolling to the bottom, which is not what we wanted.

The main reason for this is that we set a dead height, which is higher than the height of the phone’s screen, causing the bottom part to be crowded.

Get phone height

First of all, different phone screens have different sizes and therefore different heights. If we set the height of the screen as written above, the effect is not what we want. To solve this problem, we can:

// Get the available screen height
let screenHeight = wx.getSystemInfoSync().windowHeight;
Copy the code

Get the height of the screen, and then get the height of the Scrollview by subtracting the fixed height of the other blocks of the scrollView (which is what I did in the beginning).

Page({
  data: {
    height: 0.  },

 onLoad: function () {  let screenHeight = wx.getSystemInfoSync().windowHeight;   this.setData({  height: screenHeight - 200. });  }, }); Copy the code
<view>
  <view class="top">on</view>
  <scroll-view class="center" style="height:{{2*height}}rpx" scroll-y="true">
    中
    <block wx:for="{{100}}" wx:key="*this">
 <view style="height:100rpx; border:2rpx">{{item}}</view>  </block>  </scroll-view>  <view class="bottom">Under the</view> </view> Copy the code
.top {
  height: 200rpx;
  line-height: 200rpx;
  text-align: center;
  font-size: 32rpx;
 color: white;  background-color: lightgreen; }  .center {  text-align: center; }  .bottom {  height: 200rpx;  line-height: 200rpx;  text-align: center;  font-size: 32rpx;  color: white;  background-color: lightsalmon; } Copy the code

The effect is shown below:

To obtain high

Flex layout

Perhaps the above method can achieve what we want, but an adaptive, incredibly through JS, CSS, and manual calculation, is not the pursuit of excellence of the siege lion can tolerate, more often we hope that the Scroll view can be adaptive.

Last but not least, Flex, which is a bit of a disappointment. Everyone knows about Flex, but have you ever used Flex layout to solve the height adaptation problem of scroll view and swiper? Or do you have a better way to do it than calculate the height? If not, just follow me, and maybe, after you read it, you’ll think, oh, it smells good, and mom won’t have to worry about me getting product approval anymore. I won’t go into details about Flex layout, but if you don’t know it, you can go to Google first.

Maybe, I think the statement on the website that we need to give the scrollview a fixed height needs to be changed to that we need to give the scrollview a fixed height, in other words, we don’t have to have a fixed height, we need to give a height, not a fixed value, haha, I’m sure many of you have guessed, The scrollview needs to be adaptive, so if you set the hight to 100%, you’re going to be half right, so we’re going to make the height of the scrollview 100% of the parent element. But we haven’t finished yet, we need to wrap a view around the ScrollView, and the view needs to set Flex :1 to adapt itself between the top and bottom. Also, wrap the upper, middle and lower views, and start the Flex layout. That’s half the job. Let’s start with the code:

<view class="con">
  <view class="top">on</view>
  <view class="scroll">
    <scroll-view class="center" scroll-y="true">
      中
 <block wx:for="{{100}}" wx:key="*this">  <view style="height:100rpx; border:2rpx">{{item}}</view>  </block>  </scroll-view>  </view>  <view class="bottom">Under the</view> </view> Copy the code
page {
  height: 100%;
}

.con {
 height: 100%;  display: flex;  flex-direction: column; }  .top {  height: 200rpx;  line-height: 200rpx;  text-align: center;  font-size: 32rpx;  color: white;  background-color: lightgreen; }  .scroll {  flex: 1;  overflow: scroll; }  .center {  text-align: center;  height: 100%; }  .bottom {  height: 200rpx;  line-height: 200rpx;  text-align: center;  font-size: 32rpx;  color: white;  background-color: lightsalmon; } Copy the code

The effect is shown below:

flex

Perfect! Need to be sure to note here, package 3 element if there is no specific height, so to set up a relatively high, the above code is 100%, so he has to set up the height at the next higher level, if no specific height the same set of 100% at the next higher level, back up, if until the page is not found a fixed height, So set page to 100%, which is the height of the phone.


❤️ Love triple punch

1. Please click “Watching” to support me when you see here. Your “watching” is the motivation for my creation.

2. Pay attention to the public number front-end dreamers, “learn front-end together”!

3. Add wechat [QDW1370336125] to pull you into the technical exchange group to learn together.

This article is formatted using MDNICE