scroll-view横向滚动无效

最新推荐文章于 2024-08-23 10:43:07 发布
最新推荐文章于 2024-08-23 10:43:07 发布
阅读量2.3k 收藏 6
点赞数 2
分类专栏： uniapp 文章标签： 前端 小程序 uni-app javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45142260/article/details/128102230
版权

scroll-view 横向滚动无效解决方法

  1. 给scroll-view 设置固定高度 【必须】

  2. 给scroll-view 样式添加 white-space: nowrap;属性【必须】

  3. 在scroll-view下的子模块设置 display: inline-block; 属性或 display: inline-table【必须】

  4. 在scroll-view下的子模块设置不得设置 float: left;

  5. 在scroll-view 上设置属性 scroll-x=”true” 横行滚的许可。

键盘上行走的猿
关注
专栏目录
微信小程序开发scroll-into-view不生效解决方案
tl437002770的博客
01-24 1178
微信小程序开发scroll-into-view不生效解决方案
微信小程序 - 完美去除 ＜scroll-view＞ 滚动条，保证 100% 去掉隐藏苹果 ios 系统、安卓滚动条（解决 ios 苹果真机scroll-view无法隐藏滚动条）详细示例代码，保证可用
王佳斌
05-28 5943
微信小程序scroll-view滚动条，微信小程序去除隐藏去掉scroll-view滚动条，微信小程序scroll-view苹果ios系统手机去除滚动条，微信小程序scroll-view如何去掉滚动条，微信小程序scroll-view隐藏滚动条，微信小程序scroll-view无法去掉 ios 苹果系统的滚动条，微信小程序隐藏scroll-view滚动条在苹果ios系统不生效，微信小程序scroll-view在苹果ios系统下有滚动条怎么去除隐藏，微信小程序scroll-view去掉ios苹果系统滚动条，微
scroll-into-view横向无效
huyuchaoheaven的专栏
03-21 1880
scroll-view样式中不要使用 display：flex scroll_id 当前要滚动到的id time_list 集合列表 item.scroll_id 每个子child中的scroll_id <scroll-view scroll-into-view="{{scroll_id}}" scroll-x="true" class='sv_time_list' wx:if=...
微信小程序开发，scroll-view实现商品列表水平/横向滑动
最新发布
商城app+新闻app+备忘录记事本app视频教程在某站【浩宇软件开发】
08-23 1882
使用竖向滚动时，需要给scroll-view一个固定高度，通过 WXSS 设置 height。组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px)。在上面.wxml布局中，商品列表是通过view堆积起来的，在实际开发中，肯定也不能这样写死，列表数据应该是一个动态的。在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。官方说只有在竖向滚动时，需要给scroll-view一个固定高度，但在实际开发过程中，解决方案：在scroll-view标签中添加。
scroll-view 横向滚动无效解决方法
艾利克斯冰的博客
07-07 1961
给scroll-view 设置固定高度 【必须】给scroll-view 样式添加 white-space: nowrap;属性【必须】在scroll-view下的子模块设置 display: inline-block;属性或 display: inline-table【必须】在scroll-view下的子模块设置不得设置 float: left;在scroll-view 上设置属性 scroll-x=”true” 横行滚的许可。
uniapp scroll-view横向滚动无效，scroll-view子元素flex布局不生效
weixin_52941842的博客
08-21 3617
uniapp scroll-view横向滚动无效，scroll-view子元素flex布局不生效
小程序组件 scroll-view 横向滚动条无效
09-16 482
小程序组件 scroll-view 中分别有上下竖向滑动和左右横向滑动，在这次项目中刚好需要用到横向滑动，但在测试过程中发现横向滑动没有了效果（静止在那里没移动过,并且换行了），经调试发现： 1.scroll-view 中的需要滑动的元素不可以用 float 浮动； 2.scroll-view 中的包裹需要滑动的元素的大盒子用 display:flex; 是没有作用的； 3.scr...
解决uniapp里scroll-view横向滚动的问题
Oliver尹的博客
10-12 4245
本以为是一件很简单的事，结果浪费了整整一个上午，并且问题并没有全部解决....后来没办法，用了touchmove模拟的滑动，如果有好的解决方法麻烦告诉我...非常感谢~
小程序scroll-view安卓机隐藏横向滚动条的实现详解
10-16
`worth-wraper` 设置了 `overflow: hidden` 以及 `white-space: nowrap`，使得内容不再换行，同时 `scroll-view` 内的 `.worth-list` 使用 `display: inline-block` 使得图片可以并排放置，从而达到横向滚动的效果，...
微信小程序 - 详细实现 scroll-view 滚动视图区域强力隐藏去除滚动条，兼容“安卓/苹果“手机系统真机完美去掉横向和纵向滚动条效果，解决苹果ios真机无法隐藏去掉滚动条问题，隐藏横纵滚动条！
王佳斌
08-18 4358
微信小程序，vue2，vue3，可滚动视图区域组件，scroll-view，滚动条，去除，隐藏，横向滚动条，纵向滚动条，安卓手机，苹果ios手机，无法去除隐藏滚动条，苹果安卓滚动条隐藏，ios苹果无法隐藏，没效果无效，真机出现滚动条如何隐藏，在安卓机上出现横向滚动条的解决办法，滚动视图隐藏横向滚动条，有滚动条怎么办，就是隐藏不掉，微信小程序去除隐藏去掉scroll-view滚动条，苹果ios系统手机去除，如何去掉滚动条，无法去掉ios苹果系统的滚动条，最好用的方法，依旧不行，苹果ios系统不生效，css去除
微信小程序 scroll-view的使用案例代码详解
10-15
以下是一个简单的 `scroll-view` 示例，展示横向滚动的商品列表： ```html <view class="order_item_body"> <scroll-view scroll-x="true" scroll-into-view="{{toView}}" scroll-left="{{scrollLeft}}"> <view ...
HorizontalScrollView 横向滑动完美解决
09-30
Android 自定义 HorizontalScrollView 打造超强 Gallery效果 完整实例源码
uniapp [全端兼容] - 详细实现scroll-view滚动视图区域强力隐藏去除滚动条，兼容“安卓/苹果“手机系统真机完美去掉横向和纵向滚动条效果，解决苹果ios真机无法隐藏去掉滚动条问题！
王佳斌
04-01 3761
uni-app，h5移动端网页，微信小程序，支付宝小程序，Android安卓，苹果ios，app，nvue，可滚动视图区域组件，scroll-view，滚动条，去除，隐藏，横向滚动条，纵向滚动条，安卓手机，苹果ios手机，无法去除隐藏滚动条，苹果安卓滚动条隐藏，ios苹果无法隐藏，没效果无效，真机出现滚动条如何隐藏，在安卓机上出现横向滚动条的解决办法，滚动视图隐藏横向滚动条，有滚动条怎么办，就是隐藏不掉，微信小程序去除隐藏去掉scroll-view滚动条，苹果ios系统手机去除，如何去掉滚动条，无法去掉io
scroll-view不能滚动问题
qq_36437991的博客
04-06 2773
微信小程序scroll-view不能滚动问题
scroll-view横向滚动无效解决方案
泊一的博客
05-01 3901
scroll-view横向滚动无效解决方案 .scrollContainer { width: 630rpx; height: 230rpx; line-height: 230rpx; white-space: nowrap; /* 必须设置*/ display: inline-block; /* 必须设置*/ } 关于scroll-view及横向滚动条件： 1、scrol...
UniappX scroll-view不能滚动问题
CZDBGSY的博客
08-02 1184
不给scrollview设置高度是不可以滚动的，单纯的flex1页不一定可以，需要添加一个实体高度，让其自动撑开。uniappx里弃用了scroll-x，以及scroll-y属性，用direction属性代替了；如果还是不可以，检查是否有scroll-view嵌套，以及父元素是否有实体高度。
uniapp scroll-view组件横向滚动不生效
陈小白
11-12 1万+
问题 ： 效果 ： bug ： 横向滚动没有生效。直接换行 解决 在css给滚动组件加上white-space: nowrap; 就可以滚动了，记得不要把子元素设置成块级元素 那会独占一行 换成display: inline-block; 效果 ： ...
微信小程序的scroll-view不能滚动问题
热门推荐
qq_36356379的博客
03-23 1万+
最近搞了一个多周的微信小程序算是入门了吧，因为之前自学过js和css，所以上手比较快，语法跟VUE挺像的，下面说说期间遇到的一些问题吧。 一、scroll-view没有显示全，但是不能滚动 确定你想实现的滑动方向，检查一下scroll-x或者scroll-y有没有写(scroll-x:true 支持横向滑动 scroll-y:true 支持竖向滑动) 检查一下是不是没有给scroll-vie...
小程序scroll-view失效
leechoy
08-16 1226
横向滑动 要点：外层设置：white-space:nowrap;dispaly:flex; 内层设置：display:inline-block; <view> <scroll-view scroll-x="true" style="height:50rpx; white-space:nowrap ;display:flex;" > <view style="display:inline-block ;color:red;">niaho</view&
scroll-view 横向滚动
07-28
要在scroll-view中实现横向滚动，你需要将scroll-view的属性horizontal设置为true。这将使得scroll-view在横向方向上可以滚动。 下面是一个示例代码，展示了如何在scroll-view中实现横向滚动： ```html <scroll-view class="scroll-view-horizontal" scroll-x="true"> <!-- 在这里放置需要横向滚动的内容 --> </scroll-view> ``` 在上述代码中，我们通过设置class属性为"scroll-view-horizontal"来自定义scroll-view的样式，然后通过scroll-x属性将横向滚动开启。 你可以将需要横向滚动的内容放置在scroll-view标签内部。请注意，如果内容宽度超过了scroll-view的宽度，用户就可以通过水平滚动来查看内容。 希望这个回答能够帮到你！如果你还有其他问题，请随时提问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值