小程序 - 处理scroll-view组件的高度问题

在最近的小程序开发项目中有用到scroll-view组件，比较难搞定的是其高度问题，因其scroll-view自带一个高度，且需有高度才能有滑动效果；

1、js 计算高度；

<scroll-view style='height:{{scrollHeight}}px' class='scrollStyle' scroll-y='true'  bindscrolltolower="loadMoreData" lower-threshold="">

js:
onLoad() {
  let scrollHeight = wx.getSystemInfoSync().windowHeight;
  this.setData({
    scrollHeight: scrollHeight
  })
}

scrollHeight 需要减掉页面中其他元素的高度，其实有点麻烦的；
调用wx.getSystemInfoSync()方法来获取视口的高度；

---

2、调用 display: flex; 方法

元素设置 flex: 1， scroll-view 高度设置 100%；

在flex布局下，absolute 和 fiexd 的盒子会失效，相对定位除外；

<view class="g-top-banner form-box">
  //navigator带id ，path 可跳转到指定的小程序页面
  <navigator path="/pages/membercard/detail/index?alias=Y2ody7zfbm9gyh&kdt_id=13284105" target="miniProgram" open-type="navigate" app-id="" class='btn'>小程序</navigator>
  <image mode="widthFix" src="/images/"></image>
</view>

<view class="g-container-box">
  //左盒子
  <view class="m-item-left">
    <view class="item-list">
      <image mode="widthFix" src="/images/"></image>
      <view class="text"><label>龙米<label>稻花香系列<view>
    </view>
    <view class="item-list">
      <image mode="widthFix" src="/images/"></image>
      <view class="text"><label>龙米<label>家家香系列<view>
    </view>
    <view class="item-list">
      <image mode="widthFix" src="/images/"></image>
      <view class="text">下饭神器<view>
    </view>
  <view>
  // 右盒子
  <view class="m-item-right">
     <scroll-view scroll-y="true" bindscrolltolower="lower" class="scroll-view">
        <repeat for='{{list}}' key="index" item="item">
            <image mode="widthFix" src="{{item.img}}"></image>
        </repeat>
     </scroll-view>
  <view>
</view>

page {
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: column;
}
.g-top-banner {
  flex: 1;
  height: 100rpx; //这个高度比较重要，是在page中所占高度比，会影响 g-container-box 最后的高度或可视区域
}
.g-container-box {
  flex: 1;
  height: 100rpx; // 默认高度
}
.scroll-view {
  height: 100%;
}

::-webkit-scrollbar {
  width: 0;   //清除滚动轴
  height: 0;
  color: transparent;
}

3、absolute 绝对定位获得高度：

1)、scroll-view 可以利用scroll-into-view 制作类似于锚点的效果，通过toView 拿到id值进行跳转，这个id可以是动态的，但不能为纯数字；

2)、bindscroll - 滚动时触发 ； bindscrolltoupper - 滚动到顶部触发；- scroll-view组件自带

3)、可以多尝试将动态的文字 和图片一样 都写在data里面，方便管理；

4)、scroll-view 在商品很少的时候，向上滑动时会很快，没有高度，其实可以写一个最小高度撑开距离；

<view class="g-list-box">
<view class="location">

// hidden='{{show}}' srcollFun 控制向上滑动时隐藏的效果
<view class="location-hd" hidden='{{show}}'>
  <view class="g-top-banner form-box">
    //navigator带id ，path 可跳转到指定的小程序页面
    <navigator path="/pages/membercard/detail/index?alias=Y2ody7zfbm9gyh&kdt_id=13284105" target="miniProgram" open-type="navigate" app-id="" class='btn'>小程序</navigator>
    <image mode="widthFix" src="/images/"></image>
  </view>
</view>

<view class="location-ft {{show ? 'topHide' : 'topShow'}}">
<view class="g-container-box">
  //左盒子
  <view class="m-item-left">
    // 切换判断
    <view class="item-list {{status == '0' ? 'active' : ''}}" @tap='findShopProducts' data-index='0' data-id='v{{0}}'>
      <image mode="widthFix" src="/images/"></image>
      <view class="text"><label>龙米<label>稻花香系列<view>
    </view>
    <view class="item-list {{status == '1' ? 'active' : ''}}" @tap='findShopProducts' data-index='1' data-id='v{{1}}'>
      <image mode="widthFix" src="/images/"></image>
      <view class="text"><label>龙米<label>家家香系列<view>
    </view>
    <view class="item-list {{status == '2' ? 'active' : ''}}" @tap='findShopProducts' data-index='2' data-id='v{{2}}'>
      <image mode="widthFix" src="/images/"></image>
      <view class="text">下饭神器<view>
    </view>
  <view>
  // 右盒子
  <view class="m-item-right">
      // toView 拿到id，但不能为纯数字
     <scroll-view scroll-y="true" scroll-into-view="{{toView}}" class="scroll-view" bindscroll="srcollFun" bindscrolltoupper="upperScroll" >
        <repeat for='{{onelist}}' key="index" item="item">
            // 判断index索引值是否为0，是则执行 id = v0 ，这个判断id 其实也可以和title 放在一起执行,wx:if并列
           <view class='m-img-box' id="v{{index == 0 ? 0 : ''}}">
             // wx:if 判断索引值为0/第一个， 则显示
             <view class="title" wx:if="{{index == 0}}">稻花香系列</view>
             <view class="m-img">
               <image mode="widthFix" src="{{item.img}}"></image>
             </view>
           </view>
        </repeat>
        // id 为 v1
        <repeat for='{{twolist}}' key="index" item="item">
           <view class='m-img-box' id="v{{index == 0 ? 1 : ''}}">
             <view class="title" wx:if="{{index == 0}}">家家香系列</view>
             <view class="m-img">
               <image mode="widthFix" src="{{item.img}}"></image>
             </view>
           </view>
        </repeat>
        // id 为 v2
        <repeat for='{{threelist}}' key="index" item="item">
           <view class='m-img-box' id="v{{index == 0 ? 2 : ''}}">
             <view class="title" wx:if="{{index == 0}}">下饭神器</view>
             <view class="m-img">
               <image mode="widthFix" src="{{item.img}}"></image>
             </view>
           </view>
        </repeat>
     </scroll-view>
  <view>
</view>
</view>

</view>
</view>

data= {
  // 默认值
  show: false,
  status: '0',
  toView: "",
  
  // 图片
  oneList: [
    {
      pic: 'https://imgcdn.longmiwang.com/update-img/1.png'
    },
  ],
  twoList: [
    {
      pic: 'https://imgcdn.longmiwang.com/update-img/1.png'
    },
  ],
  threeList: [
    {
      pic: 'https://imgcdn.longmiwang.com/update-img/1.png'
    },
  ],
  
}
methods= {
  findShopProducts(e) {
    var that = this
    //切换
    this.status = e.currentTarget.dataset.index
    // 获取标签元素上自定义的 data-id 属性的值
    this.toView = e.currentTarget.dataset.id
  },
  upperScroll(e) {
    console.log('滑动到顶部');
    this.show = false
  },
  srcollFun(e) {
    console.log('滑动');
    if (e.detail.scrollTop > 50) {
      this.show = true
    }
  }
}

// 布局结构样式
page {
  position: relative;
  min-height: 100%;
}
::-webkit-scrollbar {
 width: 0;
 height: 0;
 color: transparent;
}
image {
  width: 100%;
  height: auto;
}
location-ft.topHide {
  top:0rpx;
}
location-ft.topShow {
  top:400rpx; // 为了撑开和顶部的距离
}
.g-list-box {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  padding-botom: 115rpx;
  .location {
    position: relative;
    height: 100%;
    .location-ft {
       position: absolute;      
       left: 0;
       bottom: 0;
       right: 0;
       transition: all .3s linear;
       .scroll-view {
         height: 100%;
       }
    }
  }
}

效果