微信公众号开发

一招搞定微信小程序ScrollView等组件高度自适应

本文主要是介绍一招搞定微信小程序ScrollView等组件高度自适应,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

你还在为 scroll-view 高度自适应问题而惆怅吗?你还在为 swiper 高度自适应而挠头吗?接下来,跟着我一招撸了他们!

简介

众所周知,scroll-viewswiper 是微信自带的两个非常常用的两个组件,当然也非常好用,但是好用的前提是你得先给他们设置固定的高度,我们来看看官网是怎么说的:

课程
课程

如上图所示,官网明确提出了,scroll-view 是需要设置固定高度的。

设置定高

按照官网的提示,我们来给scroll-view设置高度:

<view>
  <view class="top">上</view>
  <scroll-view class="center" style="height:1100rpx" scroll-y="true">
    中
    <block wx:for="{{100}}" wx:key="*this">
      <view style="height:100rpx;border:2rpx">{{item}}</view>
    </block>
  </scroll-view>
  <view class="bottom">下</view>
</view>
复制代码
.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;
}
复制代码

固定高度
固定高度

效果如下图:

定高
定高

我们可以看到,我们初衷是希望上下两个固定,中间滚动,而现在是滚动到最下面,现在的效果并不是我们想要的。

这主要的原因在于我们设置了一个死的高度,这个高度超过了手机屏幕的高度,导致最下面的被挤占了。

获取手机高度

首先,不同的手机屏幕的尺寸不同,因此其高度不同,如果我们按照上面的写法,设置了死的高度,效果并不是我们想要的。为了解决这个问题,我们可以通过:

//获取屏幕可用高度
let screenHeight = wx.getSystemInfoSync().windowHeight;
复制代码

先去获取屏幕的高度,然后通过减去除去scroll-view的其他块的固定高度,得到scroll-view的高度(刚开始我就是这么做的)。

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

  onLoad: function () {
    let screenHeight = wx.getSystemInfoSync().windowHeight;

    this.setData({
      height: screenHeight - 200,
    });
  },
});
复制代码
<view>
  <view class="top">上</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">下</view>
</view>
复制代码
.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;
}
复制代码

效果如下图所示:

获取高度
获取高度

Flex 布局

或许上面的方法可以实现我们想要的,但是一个自适应,居然要通过jscss一起实现,还需要手动计算,并不是我们这种追求卓越的攻城狮可以忍受的,更多的时候我们希望scroll-view可以自适应。

最后请出我们的大杀器Flex,呃呃呃,看到这里会不会有点失望,谁还不知道flex呀,搞得神神秘秘的,我相信,所有人都用过flex,但是你用过flex布局解决过scroll-viewswiper的高度自适应的问题吗?或者你有除了计算高度外其他更好的办法吗?没有的话就跟着我,说不定,你看完会觉得,真香啊,妈妈再也不用担心我被产品批了。flex布局我就不细讲了,如果不了解的,可以先去google学习一下。

或许,我觉得官网的需要给 scroll-view 一个固定高度这句话需要改成需要给 scroll-view 设置高度,也就是说,我们不一定是固定的高度,而是需要给一个高度,而不是固定值,哈哈,我相信很多人已经猜到了,scroll-view需要自适应,是不是把hight设置 100% 就好了尼,是的,恭喜你答对了一半,也就是说,我们让scroll-view的高度是父元素的 100%。但是还没完成,我们需要给scroll-view包裹一个view,这个view需要设置flex:1,让他在和上下两块中进行自适应。同时,包裹上中下的view,需要启动flex布局。这样就完成了一半了。我们先来看代码:

<view class="con">
  <view class="top">上</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">下</view>
</view>
复制代码
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;
}
复制代码

效果如下图所示:

flex
flex

完美!这里需要千万注意一点,包裹的上中下的元素如果没有设置具体的高度,那么要设置一个相对高度,如上代码为100%,那么他的上一级也要设置高度,如果上一级没有具体的高度那么同样设置100%,向上追溯,如果直到page,都没有找到一个固定的高度,那么就把page设置100%,也就是手机的高度。

❤️ 爱心三连击

1.看到这里了就点个在看支持下吧,你的「在看」是我创作的动力。

2.关注公众号前端梦想家,「一起学前端」!

3.添加微信【qdw1370336125】,拉你进技术交流群一起学习。

本文使用 mdnice 排版

这篇关于一招搞定微信小程序ScrollView等组件高度自适应的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!