TNBLOG
首页
博客
视频
资源
问答
猿趣
手机
关于
搜索
收藏
便签
笔记
消息
创作
登录
忆点点
情不知从何起,一往而情深
博主信息
排名
6
文章
6
粉丝
16
评论
8
文章类别
.net
35篇
.net core
15篇
cdn
1篇
云服务
1篇
前端
74篇
后端
6篇
随笔
19篇
架构
1篇
linux
6篇
git
3篇
virtualbox
1篇
app
1篇
英语
4篇
redis
4篇
docker
4篇
更多
mysql
6篇
sqlsugar
4篇
uni_app
4篇
数据库
1篇
最新文章
最新评价
{{item.articleTitle}}
{{item.blogName}}
:
{{item.content}}
关于我们
ICP备案 :
渝ICP备18016597号-1
网站信息:
2018-2024
TNBLOG.NET
技术交流:
群号656732739
联系我们:
contact@tnblog.net
欢迎加群
欢迎加群交流技术
原
uni-app 小程序 分割线与滚动。uni-app 中占满剩下高度,并且在剩下高度里边滚动
311
人阅读
2024/7/10 14:16
总访问:
907775
评论:
0
收藏:
0
手机
分类:
前端
[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> ```
欢迎加群讨论技术,1群:677373950(满了,可以加,但通过不了),2群:656732739
👈{{preArticle.title}}
👉{{nextArticle.title}}
评价
{{titleitem}}
{{titleitem}}
{{item.content}}
{{titleitem}}
{{titleitem}}
{{item.content}}