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

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

wxml 文件

  
    
      
      搜索
    
  
  
  
    
      
      
        这是一个心愿，这是一个信仰！
        你是我的芯，世界变幻，你我同在
        2019-08-01
      
    
    
  

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

星星之火可以燎原！