uni-app 小程序 分割线与滚动。uni-app 中占满剩下高度，并且在剩下高度里边滚动

常用分割线

标签:

<view class="di-task-spline"></view>

样式：

.di-task-spline {
  height: 1rpx;
  background: #000000;
  opacity: 0.1;
  margin-top: 20rpx;
  margin-left: 20rpx;
  margin-right: 20rpx;
}

滚动

滚动用的组件是scroll-view,支持横向和纵向滚动。

横向核心代码：

<scroll-view  scroll-x="true" >
</scroll-view>

纵向核心代码：

<scroll-view  scroll-y="true">
</scroll-view>

uni-app（开发微信小程序）中占满剩下高度，并且在剩下高度里边滚动

其实要占满剩下高度这种可以利用flex:1来实现，但是要在剩下高度里边滚动这种就不行了，他会随着内容的高度变高而变高。

所以应该使用整个屏幕的高度减去上方固定的高度

height:calc(100vh - 160rpx);

100vh 表示一屏幕的高度，后面的160rpx，就是上方固定的高度，这个根据实际情况调整即可。

然后要在剩下高度里边滚动就比较简单了

在scroll-view里边去增加内容就行了

<scroll-view scroll-y="true" style="height:calc(100vh - 160rpx);">
  <view class="do-item-wrap">
    <view class="do-item" v-for="(initem, index) in 13" :key="index">
      <view class="di-task-desc">
        <view class="di-td-index">{{ index + 1 }}</view>
        <view class="di-td-title">体能测试—跑步（女子800米/男子1000米）</view>
      </view>
    </view>
  </view>
</scroll-view>

uni-app（开发微信小程序）在剩下高度里边滚动,且剩下的高度是动态的

比如我这里有一个需求，就是在打开选择框的时候，在下方会多两个操作按钮，会占一部分高度，所以还要多减一点，就会有两种情况。

由于剩下的高度是动态的，所以就不能直接写一个固定的值了，应该动态的来计算，就可以绑定一个动态的样式，用一个方法来处理。

<scroll-view scroll-y="true" :style="methods.calDynamicHeight()">
.............需要滚动的内容............
</scroll-view>

处理的方法如下：

const methods = {
  allChoise() {
    state.isChoiseAll = true;
    console.log("点击了全选");
    state.title = "全不选";
  },
  calDynamicHeight() {
    let dynamicHeight = {};
    // 当显示全选的时候，由于会多两个操作按钮，会占一部分高度，所以还要多减一点
    if (state.isChoiseAll) {
      dynamicHeight["height"] = "calc(100vh - 299rpx)";
    }
    else{
      dynamicHeight["height"] = "calc(100vh - 229rpx)";
    }
    // dynamicHeight["background"] = "#ffabcd";
    console.log("看看动态样式", dynamicHeight);
    return dynamicHeight;
  }
}

这个就根据不同的情况减去不同的高度即可，根据实际的需求来