uni-app 小程序 分割线与滚动。uni-app 中占满剩下高度，并且在剩下高度里边滚动 电脑版发表于：2024/7/10 14:16 [TOC] ### 常用分割线 标签: ``` <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; } } ``` 这个就根据不同的情况减去不同的高度即可，根据实际的需求来
