uniapp中scroll-view横向滚动设置不生效

布满荆棘的人生 2022-11-13 11:20 1946阅读 0赞

HTML代码：

<scroll-view scroll-x="true" class="scrollView">
    	<view v-for="(item,index) in arr" :key="index">{ { item}}</view>
    </scroll-view>

CSS代码(经测试此方法不可以)：

.scrollView{ 
    		width: 100%;
    		height: 100rpx;
    		display: flex;
    		flex-wrap: nowrap;
    	}
    	.scrollView view{ 
    		width: 200rpx;
    		line-height: 100rpx;
    		text-align: center;
    	}

视图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L092ZXJ0dXJlcw_size_16_color_FFFFFF_t_70_pic_center]  
问题：scroll-view横向滚动未生效

原因：元素自动换行导致宽度达不到效果

解决方法：给scroll-view标签加上 white-space: nowrap; 属性就可以滚动了

注意：  
1. display: flex; flex-wrap: nowrap; 并不能替代 white-space: nowrap; 的效果  
2. 需要给view设置 display: inline-block; 使view成为行内块元素

CSS代码(经测试可以实现)：

.scrollView{ 
    	width: 100%;
    	height: 100rpx;
    	white-space: nowrap;
    }
    .scrollView view{ 
    	display: inline-block;
    	width: 200rpx;
    	line-height: 100rpx;
    	text-align: center;
    }

视图:  
![在这里插入图片描述][20210326164224517.png_pic_center]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L092ZXJ0dXJlcw_size_16_color_FFFFFF_t_70_pic_center]: /images/20221022/116a16e3f43a46d9b53ca0bc8681cf2c.png
[20210326164224517.png_pic_center]: https://img-blog.csdnimg.cn/20210326164224517.png#pic_center

发表评论取消回复

表情：

评论列表（有 0 条评论，1946人围观）

还没有评论，来说两句吧...

相关阅读

相关 uniapp实现横向滚动样式条

uniapp实现横向滚动样式条简介：本文讲解，uniapp如何实现横向滚动样式条。运行代码： <template> <view class="c

ゞ浴缸里的玫瑰/ 2024年03月31日 09:19/ 0 赞/ 94 阅读

相关设置scrollView滚动到指定位置

//设置scroll滚动到指定位置 [_scroll setContentOffset:CGPointMake((float)Wi/3i,0) animated

àì夳堔傛蜴生んèń/ 2023年10月17日 09:07/ 0 赞/ 164 阅读

相关 uniapp中scrollview隐藏滚动条，安卓和ios

按照官方文档设置了：show-scrollbar为false，但是不起作用，仍然显示滚动条，，，，乌鱼子 <table> <tbody> <tr> <td>

迈不过友情╰/ 2023年10月04日 19:11/ 0 赞/ 35 阅读

相关 uniapp横向滚动

<template> <view> <scroll-view scroll-x="true" calss="scroll_view">

落日映苍穹つ/ 2023年01月11日 09:12/ 0 赞/ 287 阅读

相关 CSS 设置 DIV 滚动不生效

CSS 设置 DIV 滚动不生效 > 记录日常开发中遇到的 css 问题如果设置了 `overflow` 没有效果，可能是没有设置宽度和高度如果设置了 `ove

今天药忘吃喽~/ 2023年01月03日 04:19/ 0 赞/ 260 阅读

相关 uniapp中scroll-view横向滚动设置不生效

HTML代码： <scroll-view scroll-x="true" class="scrollView"> <view v-for="(item,in

布满荆棘的人生/ 2022年11月13日 11:20/ 0 赞/ 1947 阅读

相关 html横向自动滚动代码,横向不间断滚动效果代码

完整DIV+CSS+JS不间断横向滚动代码：横向不间断滚动DIV .scroll\_div \{width:600px; height:49px;margin:0 aut

短命女/ 2022年10月05日 12:49/ 0 赞/ 386 阅读

相关 vue中使用better-scroll实现横向滚动不生效

vue中实现横向滚动不生效，如下图红圈中所示： ![20180507184449225][] 红圈中的html在seller.vue中的<template>内容如下

浅浅的花香味﹌/ 2022年05月25日 03:49/ 0 赞/ 241 阅读

相关 better-scroll横向不滚动

之前写过better-scroll垂直滚动遇到的问题[better-scroll不滚动/连续两次触发点击事件等问题的解决][better-scroll] 现在要实现横向滚动

短命女/ 2022年02月01日 04:39/ 0 赞/ 249 阅读

相关 uniapp如何设置横向滚动，而且没有滚动条

> 设置横向滚动 overflow-x: auto; display: -webkit-box; overflow-y: hidden; > 隐藏横

今天药忘吃喽~/ 2021年07月24日 23:14/ 0 赞/ 1556 阅读