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