scroll-veiw无法左右滑动 让scroll-view左右滑动

最新推荐文章于 2024-06-04 20:07:55 发布
最新推荐文章于 2024-06-04 20:07:55 发布
阅读量2.7k 收藏
点赞数 1
分类专栏： js 文章标签： 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/woshidamimi0/article/details/80771952
版权


在使用scroll-view组件的时候发觉无法左右滑动，经过测试才

发觉有一个坑。

直接用这个组件的时候还不可以左右滑动，还要设置一下样式才

可以。


需要设置的就是这个white-space属性为nowrap，也就是强制

不换行，这样才可以左右滑动。



当然也可以用一个view来包裹scroll-view组件，然后设置这个

view的white-space也是可以的。

woshidamimi0
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue使用better-scroll实现滑动以及左右联动
10-15
主要介绍了vue使用better-scroll实现滑动以及左右联动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
uni-app_uView1.0 实现可点击可滑动顶部导航栏和左右切换可滑动页面的功能
彬sir哥的博客
10-31 1238
【代码】uni-app_uView1.0 实现可点击可滑动顶部导航栏和左右切换可滑动页面的功能。
Uniapp实现左侧导航和右侧scroll-view联动
最新发布
weixin_47249500的博客
06-04 1108
1、点击左侧分类列表，高亮显示当前分类项，右侧scroll-view滑动到分类对应的位置。2、滑动右侧的scroll-view，左侧的分类列表高亮显示当前商品所属的分类。
uniapp.微信小程序中scroll左右滚动条联动效果实现
Dummerd的博客
11-21 2044
获取滚动条左右联动效果
uniapp使用scroll-view实现左右分类联动
Smile_ping的博客
11-09 1043
uniapp实现商品分类联动功能
uniapp使用scroll-view左右联动完整功能
m0_43584016的博客
04-03 1111
uniapp使用scroll-view左右联动完整功能
scroll-view左右联动
qq_40994103的博客
01-09 1062
究极干货，完美实现微信小程序商品左右联动scroll-view的实现及性能优化,点击左边，右边滚动；右边滚动，左边也对应变化 究极干货，完美实现微信小程序商品左右联动scroll-view的实现及性能优化,点击左边，右边滚动；右边滚动，左边也对应变化 微信小程序左右联动，点击左边右边滚动，滑动右边左边滚动及改变状态 微信小程序左右联动，点击左边右边滚动，滑动右边左边滚动及改变状态 如上图，在小程序...
小程序scroll-view与css左右滑动超出部分背景颜色不显示的解决方法
01-04
然而，在实际操作中，开发者可能会遇到一个常见的问题：当`scroll-view`内容超过其容器宽度时，左右滑动过程中超出部分的背景颜色无法正常显示。这会严重影响用户的浏览体验，使得内容区域看起来不完整或者断层。...
微信小程序开发中scroll-view左右滑动布局
09-17
微信小程序开发中scroll-view实现左右滑动时的布局样式,样式的编写，欢迎大家参考和提意见微信小程序开发中scroll-view实现左右滑动时的布局样式,样式的编写，欢迎大家参考和提意见
微信小程序scroll-view横向滑动嵌套for循环的示例代码
10-17
在本文中，我们将深入探讨如何在`scroll-view`中实现横向滑动并结合`for`循环展示数据。我们将讨论布局、样式、属性设置以及一些常见问题的解决方案。 首先，我们来看一下基本的XML布局。为了实现横向滑动，我们...
微信小程序 scroll-view的使用案例代码详解
10-15
【微信小程序 `scroll-view` 的使用详解】 在微信小程序开发中，`scroll-view` 是一个非常重要的组件，它提供了一个可滚动的视图容器，能够处理复杂的滚动需求，包括横向和纵向滚动。本文将深入探讨 `scroll-view` ...
微信小程序scroll-view实现滚动穿透和阻止滚动的方法
10-18
在微信小程序开发中，`scroll-view` 是一个非常重要的组件，用于实现页面的滚动效果。在某些场景下，我们可能需要实现滚动穿透或者阻止`scroll-view`的滚动，以达到特定的交互效果。本文将详细介绍如何在微信小程序...
微信小程序scroll左右联动
qq_27320703的博客
02-22 518
在商品列表页面里，左边是商品分类，右边是商品列表二个scroll-view 互相联动，
微信小程序左右联动 右边滑动左边自动切换
ssorth的博客
05-13 556
微信小程序左右联动 右边滑动左边自动切换
小程序商品分类页面滑动左右联动
Zan_Z的博客
02-07 2796
商品分类，滑动时可以左右联动
Scroll实现上下左右滑动
Suzi的专栏
07-12 1967
当使用ScrollView时，只能上下滑动，而使用HorizontalScrollView时只能左右滑动，所以当即需要左右也需要上下滑动时，可以在ScrollView里边再套一个HorizontalScrollView，这样就可以实现了。例：<ScrollView android:layout_width="match_parent" android:layout_height="m
小程序scroll-view实现三级分类左右联动，上拉加载以及下拉刷新
qq_44828153的博客
12-05 2820
lower-threshold = ‘-50’,这里很坑，模拟器和安卓不行，ios可以，在滚动条触底的时候，ios可以继续往上拉一段距离，此时会来到下一页，无法兼容安卓， 2. 滑动三级分类，二级分类跟着滚动有两种方式,scroll-into-view锚点和scroll-left scroll-into-view锚点,前提得给商品列表每个子选项 一个唯一class，三级分类上下滑动，监听高度变化，拿到当前索引，动态改变二级分类的class名 注意：设置横向滚动需要确定scroll-x的宽度，如果发现不
scroll-view实现滑动效果
weixin_45527865的博客
09-23 333
.box { width: 100%; display: flex; align-items: center; justify-content: space-between; } .bannerWrap { width: 85%; height: 240px; flex-direction: column; display: -webkit-box; } .imgItem { height: 240px; margin-right: 10rpx; } .left.
微信小程序 scroll-view滑动
weixin_45672809的博客
08-10 772
微信小程序 scroll-view滑动 scroll-view纵向滑动 使用竖向滚动时，需要给scroll-view一个固定高度，通过 WXSS 设置 height。组件属性的长度单位默认为px <!-- wxml --> <scroll-view scroll-y="true" style="height:300px"> <view class="item_1"></view> <view class="item_2"><
scroll-view左右滑动获取左右滑动距离
05-12
可以通过监听 `scroll-view` 的 `scroll` 事件来获取左右滑动的距离。具体实现步骤如下： 1. 在 `scroll-view` 组件上设置 `scroll-x="true"`，表示开启横向滚动。 2. 在 `scroll-view` 组件上绑定 `scroll` 事件，事件触发时会传递一个 event 对象。 3. 在事件处理函数中，通过 `event.detail.scrollLeft` 可以获取到 `scroll-view` 组件横向滚动的距离。 示例代码如下： ```html <scroll-view class="scroll-view" scroll-x="true" bindscroll="onScroll"> <!-- 横向滚动的内容 --> </scroll-view> ``` ```js Page({ onScroll(event) { const { scrollLeft } = event.detail; console.log('滚动的距离：', scrollLeft); }, }); ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值