scroll-view :scroll-x=“true“ 水平滚动

最新推荐文章于 2025-03-14 15:23:36 发布
最新推荐文章于 2025-03-14 15:23:36 发布
阅读量169 收藏
点赞数 2
分类专栏： css 文章标签： 前端 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_32707555/article/details/143860375
版权 
scroll-view{
	white-space: nowrap;
}
.scroll-view-item{
	display: inline-block;
}
uni-app滑动菜单效果.既可以点击也可以滑动切换tab
肖肖肖丽珠的博客
01-12 4566
<template> <view class="homepage"> <!-- 顶部导航栏 --> <view class="horizonal-tab"> <scroll-view scroll-x="true" scroll-with-animation class="scroll-tab" :scroll-left="scrollleft"&...
scroll-view X轴滑动
weixin_45157073的博客
03-28 1249
前言 用flex + overflow-x:auto 解决数据展示一行在X轴 ，如果固定宽度 overflow-x:auto 根本出不来 。 用flex + overflow-x:auto 解决数据展示一行在X轴 ，如果固定宽度 overflow-x:auto 根本出不来 。 uniapp scroll-view 也可以用同样的CSS 去实现 scroll-x ； .count{white-space: nowrap;overflow-x:auto;width: 200px;} .count.
微信小程序——scroll-view组件之scroll-x、scroll-y
最新发布
yongyuandeziji的博客
03-14 702
微信小程序——scroll-view组件之scroll-x、scroll-y，特别注意scroll-x的使用，需要增加display: inline-block和white-space:nowrap样式，当然scroll-view宽度也需要固定的哦！
微信小程序scroll-view中的scroll-x=“true“解决法
weixin_45865992的博客
02-18 1318
<scroll-view scroll-x="true" class="box-record" style="white-space: nowrap;width: 100%;height:{{swiperHeight}}rpx"> <view wx:for="{{list}}" style="display: inline-block;margin-left: 36rpx;"> </view> </scroll-view> 重
微信小程序scroll-view组件
2301_76669854的博客
04-16 2039
当一个容器内容很多时，若容器无法显示完整内容，则可通过滚动操作查看所有内容 在微信小程序中scroll-view组件可以实现滚动效果
小程序scroll-view上下滑的内部加左右滑，scroll-x生效的情况
qq_34672907的博客
12-15 3053
今天做了下滑块里包含左右滑的效果，由于scroll-view 左右滑说的不够清楚，只能百度和看别人的例子了。还好scroll-view里面可以嵌套scroll-view，不然还要处理其他的问题。不啰嗦咯，上例子，由于例子的图片都不存在。所以就把图片注释掉了。复制粘贴看效果的呢需要自己添加点图片和数组哦。如果有不懂的可以评论，我记得会回复的。
微信小程序scroll-view实现滚动穿透和阻止滚动的方法
10-18
在微信小程序开发中，`scroll-view` 是一个非常重要的组件，用于实现页面的滚动效果。在某些场景下，我们可能需要实现滚动穿透或者阻止`scroll-view`的滚动，以达到特定的交互效果。本文将详细介绍如何在微信小程序...
微信小程序-scroll-view滚动到指定位置（类似锚点）
03-29
本文作者：莫兰迪不会没有瓶子，来自原文地址 先来说一下官网例子吧 ...scroll-view竖向滚动必须设置scroll-y="true" style="height: 200rpx;" 必须.. style="height: 200rpx;" 必须为200rpx/200px 不能用百分号 js中
uniapp scroll-view 横向和纵向滚动 带滚动回调
09-10
当`scroll-x`设为`true`时，组件将支持水平滚动；当`scroll-y`设为`true`时，组件将支持垂直滚动。同时，这两个属性可以动态改变，以实现动态滚动效果。 5. **滚动回调**：`scroll-view`提供了`@scroll`事件，当...
微信小程序scroll-view组件实现滚动动画
12-29
本文实例为大家分享了scroll-view组件实现索引列表滚动动画效果，供大家参考，具体内容如下 效果图 实现原理 利用scroll-view的scroll-into-view属性进行定位； 利用scroll-view的scroll-with-animation属性实现...
scroll-view组件中scroll-x=“true“没效果
zwtank的博客
11-24 1750
1.父子组件的高度设置好 2.父{white-space: nowrap;} 3.子{display: inline-block;}
可滚动视图scroll-view组件
qq2844509367的博客
08-14 1094
微信小程序是组件进行拼装的项目scroll-view组件是视频展示和图片展示的很好容器。
Scroll-view的用法（网页和微信小程序）
laowang357的博客
12-17 4131
4. 当scroll-view的子元素尺寸超过scroll-view的尺寸时，需要设置scroll-view的属性scroll-with-animation来开启滚动动画。当属性值为scroll时，表示开启滚动；3. 设置scroll-view的样式和滚动条的样式，可以通过设置属性来控制，如scroll-view的class属性和scroll-bar的class属性。2. 设置scroll-view的高度和宽度，以及滚动方向，可以通过设置属性来控制，如scroll-x和scroll-y。
小程序 scroll-view X轴滑动
sinat_23336093的博客
07-13 608
小程序 scroll-view X轴滑动 符合三个条件就行 （1）scroll-x=“true” （2）父容器：white-space: nowrap; （3）子元素：display:inline-block
uniapp中scroll-view 设置scroll-x 无效果问题
qq_45632659的博客
07-07 1161
uniapp中scroll-view 设置scroll-x 无效果问题
小程序之scroll-view组件
热门推荐
soos的博客
01-20 1万+
scroll-view 可滚动视图区域。有时候我们的一些视图在手机指定的宽度和高度不够存放，那么可以放在 scroll-view 中，以滚动的形式显示被隐藏的内容。 滚动视图分为横向滚动和纵向滚动两种方式，下面我们对视图的滚动进行一一说明。 横向滚动 设置横向滚动（必须满足以下三点）： 1.给scroll-view添加scroll-x="{{true}}"属性（设置为允许横向滚动） 2.给scroll-view添加white-space:nowrap;属性（设置为不换行） 3.给scroll-v
微信小程序 scroll-view 设置scroll-x 失效问题
花花世界的博客
07-07 4228
想实现一个横向滑动的scrollview，以为直接给scroll-view设置 scroll-x 就能解决，结果失算了，先看代码 <scroll-view class="scroll" scroll-x="true"> <view class="haibao_item" wx:for="{{item.recodes}}" wx:for-item="recodess"> <view class="smallcontainer">
微信小程序---scroll-view 设置scroll-x或者scroll-y如何去掉滚动条
heavenz19的博客
05-09 2994
第二种方法：添加（ enhanced :show-scrollbar=“false”）
scroll-view横向滚动scroll-into-view
03-11
### 实现 `scroll-view` 组件中的横向滚动与元素定位 为了使 `scroll-view` 支持横向滚动，必须为其设定固定的宽度，并通过设置 `scroll-x="true"` 属性来启用该功能[^1]。对于想要实现平滑滚动至特定子节点的情况，则可以利用 `scroll-into-view` 属性配合目标节点的 ID 来达成目的。 下面是一个简单的例子展示如何配置这些属性： ```html <view class="container"> <!-- 设置 scroll-x=true 开启水平滚动 --> <scroll-view id="scrollView" scroll-x="true" bindscrolltolower="lower" lower-threshold="50" scroll-with-animation="{{true}}" scroll-left="{{currentLeft}}" style="width: 750rpx; white-space: nowrap;"> <!-- 子项列表 --> <block wx:for="{{items}}" wx:key="id"> <view id="{{item.id}}" class="child-item">{{item.text}}</view> </block> </scroll-view> </view> ``` 当需要让某个具体项目进入视图中央时，在 JavaScript 中更新对应的 `scroll-into-view` 值即可： ```javascript Page({ data: { currentId: '' }, scrollToItem(e) { const { id } = e.currentTarget.dataset; this.setData({ 'currentId': '#' + id }); } }) ``` 同时需要注意的是，如果希望在页面初次加载或者某些条件下自动滚到某位置，可以在合适时机调用 setData 方法改变 `scroll-into-view` 的值从而触发滚动行为。 另外，关于样式方面的问题，比如 Flexbox 不起作用的现象可能是由于容器本身没有足够的空间容纳所有子元素造成的；因此建议确保父级有足够的尺寸以适应内部内容的需求[^2]。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值