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> ```
