[uni-app] scroll-view中吸顶的简单做法 - overflow-y: auto；

9月前作者：iOSTianNan 分类：Toy博客阅读(41) 违法举报

这篇具有很好参考价值的文章主要介绍了[uni-app] scroll-view中吸顶的简单做法 - overflow-y: auto；。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

记录一个css技巧

overflow-y: auto;

效果

	<scroll-view scroll-y="true">
	<view class="top">这是吸顶view</view>
	<view class="content">这是滚动view</view>
	</scroll-view>

要实现scroll内部 , .top吸顶 , .content内容上下滚动的效果,

只要在
.content添加 overflow-y: auto;

.content{
		overflow-y: auto;
		}

overflow-y官网描述文章来源地址https://www.toymoban.com/news/detail-702826.html

到了这里，关于[uni-app] scroll-view中吸顶的简单做法 - overflow-y: auto；的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：

领支付宝红包赞助服务器费用

微信小程序使用scroll-view导致吸顶无效或vant-sticky吸顶无效

我们先清楚为什么要使用scroll-view？在做回到顶部时，需要拿到实时的滚动距离，这时候就得使用上scroll-view了记录一次在做微信小程序开发时，在没有使用scroll-view的时候，我们使用vant-sticky做吸顶效果的时候可以正常使用。但是当我们使用scroll-view时，突然发现吸顶失效

2024年02月09日
浏览(50)
【uni-app】uni-app中scroll-into-view的使用

在使用的时候需要注意: 需要给sroll-view组件设置宽或者高(根据横纵情况) white-space:nowrap 这行代码让组件能够滑动(之前自己写的时候踩的坑) 使用 scroll-into-view ,需要开启动画效果,并且动态绑定的值必须是字符串并且子组件的上绑定一个id值用于定位以上就是今天要讲的内容，

2024年02月11日
浏览(46)
小程序-uni-app：实现锚点连接/锚点跳转(uni.pageScrollTo、scroll-into-view)

Uniapp支持锚点连接，可以通过以下步骤实现锚点连接一、在需要设置锚点的页面，为需要跳转的部分设置id属性。例如，设置一个id为“section1”的元素：二、在需要跳转到锚点的页面，使用 uni.navigateTo 或 uni.redirectTo 方法，搭配URL参数的方式实现跳转。例如，跳转到id为“

2024年02月14日
浏览(55)
uniapp 小程序端使用uni-popup组件时，页面用了scroll-view滚动组件，uni-popup组件也使用了scroll-view滚动出现组件滚动导致页面也滚动的解决方案

在 uni-popup上给一个禁止滚动 @touchmove.stop.prevent=\\\"\\\" 和一个样式height: 100vh;

2024年02月10日
浏览(57)
[uniapp] scroll-view 简单实现 u-tabbar效果

效果图方案官方scroll-view 进行封装配合属性 scroll-left Number/String 设置横向滚动条位置即可 scroll-into-view 属性尝试过,方案较难实现踩坑 1.scroll-view 横向失败安装官网的解释使用竖向滚动时，需要给 scroll-view 一个固定高度，通过 css 设置 height；使用横向滚动时，需要给scr

2024年02月11日
浏览(33)
uniapp实战仿写网易云音乐(三)—视频页面（scroll-view组件实现横线滑动，mescroll-uni实现视频列表，向下滑动刷新当前页面）

接着上篇文章继续完成剩下的部分，本篇文章是完成第二个页面——视频页面的部分，视频还是没有做播放的效果，主要是做展示效果。下面附上两篇文章链接，没看过的同学可以回头看看： uniapp实战仿写网易云音乐(一)—底部工具栏以及首页轮播图swiper的实现 uniapp实战仿写

2023年04月25日
浏览(44)
微信小程序常用组件的简单使用 view，scroll-view，swiper，swiper-item，text，rich-text，button，image

view组件就类似于html中的div标签 list.wxml list.wxss scroll-view组件就是滚动的视窗，使用scroll-view组件时，要想横向滚动或者纵向滚动时，需要在scroll-view组件上添加对应的属性 scroll-x 或 scroll-y,然后需要注意的是，纵向滚动需要给scroll-view组件限定高度，横向滚动则需要给scroll-vi

2024年02月15日
浏览(137)
uniapp scroll-view横向滚动无效，scroll-view子元素flex布局不生效

要素排查： 1.scroll-x属性需要开启，官方类型是Boolean，实际字符串也行。 2scroll-view标签需要给予一个固定宽度，可以是百分百也可以是固定宽度或者100vw。 3.子元素需要设置display: inline-block（行内块元素）属性，scroll-view需要设置white-space: nowrap（不换行）当使用scroll

2024年02月12日
浏览(44)
scroll-view不能滚动问题

js 确定你想实现的滑动方向，检查一下scroll-x或者scroll-y有没有写(scroll-x:true 支持横向滑动 scroll-y:true 支持竖向滑动) 检查一下是不是没有给scroll-view设置一个固定的高度，我就是之前没有设置固定高度导致无法滑动的(注意设置的高度不要超过父容器的高度，否则如果高度多大

2024年02月13日
浏览(54)
uni-app:常见组件view、text、icon

根据html：可知div是块级标签，span是行级标签这里view类似于div，text类似于span，即块级标签：view 行级标签：text、icon 类似效果两个icon图标，置于第一排两个view，分别位于第二排、第三排两个text，置于第四排代码

2024年02月17日
浏览(50)