uniapp scroll-view组件横向滚动不生效

最新推荐文章于 2024-10-10 13:11:08 发布
最新推荐文章于 2024-10-10 13:11:08 发布
阅读量1w 收藏 10
点赞数 14
分类专栏： uniapp问题 文章标签： 小程序 uniapp  scroll-view组件 滚动 bug
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37564189/article/details/103023438
版权

问题 ： 

效果 ： 

bug  ： 横向滚动没有生效。直接换行 

解决

在css给滚动组件加上 white-space: nowrap; 就可以滚动了，记得不要把子元素设置成块级元素 那会独占一行  换成 display: inline-block;

效果 ： 

 

陈小白_weilin
关注
专栏目录
微信小程序scroll-x失效的完美解决方法
10-18
在微信小程序的文档中，使用scroll-view标签，然后给它设置一个scroll-x就可以实现元素，横向排列，可以左右滑动，但是在实际开发中会遇到各种问题，下面小编给大家带来了微信小程序scroll-x失效的完美解决方法,需要的朋友可以参考下
解决uniapp里scroll-view横向滚动的问题
Oliver尹的博客
10-12 4244
本以为是一件很简单的事，结果浪费了整整一个上午，并且问题并没有全部解决....后来没办法，用了touchmove模拟的滑动，如果有好的解决方法麻烦告诉我...非常感谢~
uniapp：实现tabs（scroll-view）点击左右滑动
最新发布
weixin_46002223的博客
10-10 299
【代码】uniapp：实现tabs（scroll-view）点击左右滑动。
uniapp scroll-view横向滚动无效，scroll-view子元素flex布局不生效
weixin_52941842的博客
08-21 3612
uniapp scroll-view横向滚动无效，scroll-view子元素flex布局不生效
uniapp-scroll-view横向滚动不起作用的解决
种子不服古怪的博客
01-16 3625
文章目录问题描述解决方案实现效果 问题描述 今天想要实现一个能左右滑动的tab栏的时候,使用了scroll-view横向滚动,但是不起作用 解决方案 参考这篇文章,得到了解决 1.在外层scroll-view设置white-space: nowrap;样式 2.在内部元素层设置display: inline-block;样式 完整代码 <template> <view> <scroll-view scroll-x="true"> <view
uniapp中scroll-view滚动失效解决方法
m0_43377799的博客
04-13 4760
uniapp中scroll-view滚动失效解决方法
uniapp scroll-view 横向和纵向滚动 带滚动回调
09-10
在uni-app框架中，`scroll-view`组件是一个非常实用的工具，它允许开发者实现横向和纵向的滚动，并且可以添加滚动回调功能，以便在用户滚动时执行特定的操作。下面将详细讲解uni-app的`scroll-view`组件及其相关的...
微信小程序scroll-view组件实现滚动动画
12-29
本文实例为大家分享了scroll-view组件实现索引列表滚动动画效果，供大家参考，具体内容如下 效果图 实现原理 利用scroll-view的scroll-into-view属性进行定位； 利用scroll-view的scroll-with-animation属性实现...
详解微信小程序scroll-view横向滚动的实践踩坑及隐藏其滚动条的实现
10-17
为了解决这个问题，开发者需要设置scroll-x="true"属性，这样scroll-view组件就会支持横向滚动。若要支持垂直滚动，则需要设置scroll-y="true"。 2. 在scroll-view组件内部添加定宽元素时，如果元素宽度超过scroll-...
关于scroll-view和下拉刷新的那些坑
03-29
众所周知，小程序不支持操作dom元素，但最近公司做了这样的一个功能，滚动scrollview 标签，当页面滚动到一定的...scroll-view scroll-y="true" style="height: {{scrollViewHeight}}rpx;" bindscroll="scrollviewScrol
微信小程序scroll-view实现滚动穿透和阻止滚动的方法
10-18
在微信小程序开发中，`scroll-view` 是一个非常重要的组件，用于实现页面的滚动效果。在某些场景下，我们可能需要实现滚动穿透或者阻止`scroll-view`的滚动，以达到特定的交互效果。本文将详细介绍如何在微信小程序...
解决微信小程序scroll-view组件无横向滚动的问题
10-15
`scroll-view`组件在默认情况下是垂直滚动，如果要实现横向滚动，我们需要通过设置属性`scroll-x`为`true`来开启横向滚动功能。在示例代码中，我们可以看到如下配置： ```html <scroll-view class="scroll-view_H" ...
小程序scroll-view组件实现滚动的示例代码
10-18
- 横向滚动需要将`scroll-view`的滚动方向设置为`scroll-x`。 - `white-space`属性需设置为`nowrap`，防止内容自动换行，使所有子元素保持在同一行内。 - 子元素的`display`属性应设为`inline-block`，以便它们...
微信小程序 scroll-view滚动到底部事件不触犯的锅
03-29
最后经过不懈的努力，找了很多资料，才发现,居然要设置scroll-view高度，于是我在.wxss里设置了高度为100%: .scrollStyle{ width: 100%; height: 100%; display: flex; flex-direction: column; } 居然无效，...
微信小程序scroll-view实现字幕滚动
01-03
本文实例为大家分享了微信小程序scroll-view实现字幕滚动的具体代码，供大家参考，具体内容如下 需求： 实现框内的文字自下而上的自动循环滚动。 解决方案： demo:字幕滚动 通过控制滑动条来完成字幕滚动，通过...
微信小程序-scroll-view横向滚动和上拉加载
03-29
今天介绍微信小程序中scroll-view实现横向滚动和上拉加载的实现及需要注意的地方。先看最终效果。横向滚动1.设置滚动项display：i ...       最近刚好在集中scroll-view的文章和跳坑指南；  今天介绍微信小程序...
uniapp/小程序 scroll-view 中设置flex布局无效问题
jiangjunyuan168的博客
10-29 3847
使用 scroll-view 设置横向滑动时在 scroll-view 元素上设置flex布局，没有生效。/* flex布局无效 */
uni-app中的scrollview的横向滚动设置无效
nick_zhang的博客
07-20 1837
1.使用竖向滚动时，需要给 一个固定高度，通过 css 设置 height； <scroll-view scroll-y="true" scroll-with-animation :show-scrollbar="true" style="height:800rpx"> </scroll-view> 2.使用横向滚动式，需要给添加white-space: nowrap;样式 样式里用flex没啥用 要用display:inline-block <scroll-view s
uniapp移动端禁止页面横向拖动滑动
爬楼梯的前端小白的博客
07-27 1201
html,body{overflow:hidden;overflow-y:auto;} 转载自：原博主
uniapp scroll-view横向滚动
06-28
Uniapp中的scroll-view组件可以实现横向滚动。只需要在scroll-view标签中设置属性scroll-x为true即可。例如： ``` <scroll-view scroll-x="true"> <view class="item">1</view> <view class="item">2</view> ...
评论 20
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值