ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

uni-app之scroll-view组件

2022-06-27 14:01:39  阅读:251  来源: 互联网

标签:滚动 app 横向 display uni scroll view


uni-app使用scroll-view组件不生效的问题

1.横向滚动不生效的问题是因为少了两行代码:
white-space: nowrap;
display:inline-block;

2.纵向滚动 必须指定滚动区域的高度。
不设置高度的话,scroll-view是不会滚动的,此时滚的是页面。

<scroll-view class="classify" scroll-x show-scrollbar>
	<view class="classify_item" v-for="(item,index) in classifyList" :key="index">
		{{item}}
	</view>
</scroll-view>

.classify{
	width: 100%;
	height: 60upx;
	display: flex;
	flex-direction: row;
	white-space: nowrap; /*横向滚动必须添加css 1.规定段落中得文本不进行换行*/
	.classify_item{
		overflow: hidden;
		background-color: #DD524D;
		margin: 2upx;
		width: 130upx;
		height 50upx;
		display: inline-block; /*横向滚动 2.滚动区域内的每一个元素设置为行内块模块*/
	}
}

标签:滚动,app,横向,display,uni,scroll,view
来源: https://www.cnblogs.com/linhan8888/p/16415856.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有