小程序 —— scroll-view 组件高度适配

讲真！写后端的去写前端，像我半吊水的前端能力再去写小程序，有时真的心累。ε=(´ο｀*)))唉！盘他...

wxml 文件

  <view class='home-search-border'>
    <view class='home-search'>
      <input class='home-input' maxlength="20" auto-focus></input>
      <button class='home-search-btn'>搜索</button>
    </view>
  </view>
  <!--内容区 纵向滚动-->
  <scroll-view class='home-scroll' scroll-y style='height:{{scrollHeight}}px'>
    <view class='home-box'>
      <image class='home-box-img' src='/static/image/super.jpg'></image>
      <view  class='home-box-text'>
        <view>这是一个心愿，这是一个信仰！</view>
        <view>你是我的芯，世界变幻，你我同在</view>
        <view>2019-08-01</view>
      </view>
    </view>
    <!--滚动的list内容 将上面<view class='home-box'>的模块复制几份-->
  </scroll-view>

js 文件

 /**
   * 生命周期函数--监听页面加载
   */
  onLoad:function(){
    let that = this;
    //计算 scroll-view 的高度
    that.calculateScrollViewHeight();
  },
  //计算 scroll-view 的高度
  calculateScrollViewHeight() {
    let that = this
    let query = wx.createSelectorQuery().in(this)
    query.select('.home-search-border').boundingClientRect(function (res) {
      //得到搜索外壳的高度
      let searchHeight = res.height
      //获取屏幕可用高度
      let screenHeight = wx.getSystemInfoSync().windowHeight
      //计算 scroll-view 的高度
      let scrollHeight = screenHeight - searchHeight
      that.setData({
        scrollHeight: scrollHeight
      })
    }).exec()
  },

微信文档：wx.createSelectorQuery() 微信文档 

wxss文件

/* 搜索框 */
.home-search-border{padding:20rpx 30rpx;}
.home-search{position:relative;background-color:#F8F8F8;border-radius:12rpx;box-shadow: rgba(0,0,0,0.2) 0px 2px 10rpx 4rpx;}
.home-input{height:60rpx;padding:12rpx 20rpx;margin-right:60px;}
.home-search-btn{line-height: 84rpx;position:absolute;top:0;right:0;}
/* 纵向滚动 */
.home-scroll{width:100%;position:absolute;background-color:#f2f2f2;}
.home-box{padding:30rpx 20rpx;margin: 20rpx 30rpx;background-color:#fff;border-radius:12rpx;display:flex;position: relative;box-shadow: rgba(8,8,8,0.2) 0px 0px 10rpx 4rpx;}
.home-box-img{width:150rpx;height:150rpx;margin-right:30rpx;}
.home-box-text{font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;}

参考文章：https://blog.csdn.net/u010872619/article/details/86156882

https://blog.csdn.net/weixin_41871290/article/details/81103253

星星之火可以燎原！