scroll-view横向滚动设置

最新推荐文章于 2025-06-29 14:48:58 发布
原创 最新推荐文章于 2025-06-29 14:48:58 发布 · 852 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了如何利用CSS属性white-space: nowrap和设置子元素为inline-block，实现scroll-view子元素的横向排列。这种方法适用于需要创建水平滚动条布局的前端开发场景。
部署运行你感兴趣的模型镜像

scroll-view的子元素要inline-block，父元素white-space: nowrap;就可以横向排列。

您可能感兴趣的与本文相关的镜像

ACE-Step

ACE-Step

音乐合成
ACE-Step

ACE-Step是由中国团队阶跃星辰（StepFun）与ACE Studio联手打造的开源音乐生成模型。 它拥有3.5B参数量，支持快速高质量生成、强可控性和易于拓展的特点。 最厉害的是，它可以生成多种语言的歌曲，包括但不限于中文、英文、日文等19种语言

uni-app：使用scroll-view实现横向滚动
weixin_48596030的博客
05-31 6240
【代码】uni-app：使用scroll-view实现横向滚动。
uni-app 用scroll-view实现横向滚动
最新发布
qq_36158551的博客
09-20 839
scroll-view是uni-app内置的可滚动视图区域组件，支持横向和纵向滚动配置。适用于商品横向展示、长列表内容展示等需要局部滚动的场景。核心属性：（1）scroll-x：启用横向滚动（2）scroll-y：启用纵向滚动（3）scroll-top：设置竖向滚动位置（4）scroll-left：设置横向滚动位置scroll-view，必须设置：white-space: nowrap;
微信小程序（10）——利用scroll-view实现横向滚动
蜗牛先生
02-13 1万+
这两天想做个小程序上线试试，小程序里需要用到横向滚动，却在做的过程中发现scroll-view即使加了scroll-x，也没有实现横向滚动的效果，于是查找了一下解决方案，解决方案如下： ▍解决方案 1、在scroll-view标签上加上样式属性：display: flex; white-space:nowrap； 2、scroll-view标签下的一级栏目标签需要加上样式属性：dis...
微信小程序使用scroll-view制作横向滑动滚动条
GDNLQ的博客
03-29 1394
使用scroll-view制作横向滑动滚动条
scroll-view的横向滚动
热门推荐
maxwheel的博客
01-02 3万+
本来以为实现一个横向滚动的view很简单，但是实际上还是有个小坑的。因为scroll-view本身的display:flex不生效。 scroll-view的内层view元素需要： display: inline-block scroll-view的外层元素需要： white-space: nowrap 使得内部组件不换行。 再加上一些左右空行的渐变修饰，使得一个简单的横向滚动元素...
使用scroll-view实现区块横向滚动
qq_37096211的博客
08-29 1164
【代码】使用scroll-view实现区块横向滚动。
scroll-view横向滚动
c_xiyi的博客
10-13 819
<scroll-view class="scroll-view_H" scroll-x="true" bindscroll="scroll" style="width: 100%"> <view class="box"> 1 </view> <view class="box"> 2 </view> <view class="box"> 3 </view> <view class="box">
微信小程序scroll-view横向滚动
zxcvb0825的博客
12-05 910
横向滚动需打开 enable-flex 以兼容 WebView，如 <scroll-view scroll-x enable-flex style="flex-direction: row;当我们使用scroll-view横向滚动时，添加 scroll-x 页面内容仍然没有横向展示。滚动条的长度是预估的，若直接子节点的高度差别较大，则滚动条长度可能会不准确。
详解微信小程序scroll-view横向滚动的实践踩坑及隐藏其滚动条的实现
10-17
一、微信小程序scroll-view横向滚动实践踩坑 1. 默认情况下，scroll-view组件是不支持滚动的。为了解决这个问题，开发者需要设置scroll-x="true"属性，这样scroll-view组件就会支持横向滚动。若要支持垂直滚动，则...
uniapp scroll-view 横向和纵向滚动 带滚动回调
09-10
4. **横向和纵向滚动**：`scroll-view`组件可以通过设置`scroll-x`和`scroll-y`属性来控制滚动方向。当`scroll-x`设为`true`时，组件将支持水平滚动；当`scroll-y`设为`true`时，组件将支持垂直滚动。同时，这两个...
微信小程序-scroll-view横向滚动和上拉加载
03-29
今天介绍微信小程序中scroll-view实现横向滚动和上拉加载的实现及需要注意的地方。先看最终效果。横向滚动1.设置滚动项display：i ...       最近刚好在集中scroll-view的文章和跳坑指南；  今天介绍微信小程序...
微信小程序scroll-view仿拼多多横向滑动滚动条
01-03
本文实例为大家分享了微信小程序横向滑动滚动条的具体代码，供大家参考，具体内容如下 效果图 实现代码 index.wxml <!--内容区域--> <view class=navig
微信小程序scroll-view实现滚动穿透和阻止滚动的方法
10-18
在不使用`scroll-view`的弹窗中，可以为`position`为`absolute`或`fixed`的元素设置`catchtouchmove`属性，并绑定一个空事件，以阻止弹窗下面的页面滚动： ```html <view catchtouchmove></view> ``` 这相当于为该...
微信小程序开发 scroll-view实现横向纵向滚动
m0_65027074的博客
10-20 4193
微信小程序开发 scroll-view实现横向纵向滚动
微信小程序scroll-view横向滚动和纵向滚动实现（亲测管用）
03-21 2183
【代码】微信小程序scroll-view横向滚动和纵向滚动实现（亲测管用）
微信小程序开发，scroll-view实现商品列表水平/横向滑动
商城app+新闻app+备忘录记事本app视频教程在某站【浩宇软件开发】
08-23 5479
使用竖向滚动时，需要给scroll-view一个固定高度，通过 WXSS 设置 height。组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px)。在上面.wxml布局中，商品列表是通过view堆积起来的，在实际开发中，肯定也不能这样写死，列表数据应该是一个动态的。在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。官方说只有在竖向滚动时，需要给scroll-view一个固定高度，但在实际开发过程中，解决方案：在scroll-view标签中添加。
2.2，零基础入门uni-app：scroll-view组件的横向与纵向滚动实战（咸虾米2.2）
2201_75436433的博客
06-29 844
scroll-view是uni-app内置的可滚动视图区域组件，支持横向和纵向滚动配置。适用于商品横向展示、长列表内容展示等需要局部滚动的场景。scroll-x：启用横向滚动scroll-y：启用纵向滚动scroll-top：设置竖向滚动位置：设置横向滚动位置横向滚动必须配合使用纵向滚动需要设置固定容器高度通过CSS可以优化滚动体验和视觉效果注意不同布局模式下子元素的显示方式。
Scroll-View横向滚动
09-02
在不同场景下，Scroll - View实现横向滚动的方法如下： #### 微信小程序（uniApp） - 在微信小程序的uniApp框架中，实现横向滚动可在`scroll - view`标签中添加`scroll - x="true"`属性。例如： ```html <scroll-view scroll-x="true" class="scroll-x x" :scroll-left='scrollLeft' :scroll-with-animation="scrollAnimation" :show-scrollbar="false" :scroll-into-view="seqToView"> <view class="week-list"> <view class="week-item" :class="weekIndex === index ? 'week-item-active' : 'week-item-default'" v-for="(item, index) in weekDayList" :key="index" :id="'seq-' + index" @click="weekClick(index)">{{item}}</view> </view> </scroll-view> ``` 通过此代码，可以创建横向滚动的`scroll - view`区域，其中包含一系列动态生成的元素，每个元素具备点击事件处理逻辑。另外，还可以在`onLoad`生命周期函数中添加滚动至选中序号位置的逻辑： ```javascript onLoad() { // 滚动至选中序号位置 this.seqToView = 'seq-' + this.weekIndex } ``` 同时，可以实现点击元素滚动到页面中间的功能，代码如下： ```javascript // 将点击元素移动到中间 moveTo(index) { const query = uni.createSelectorQuery().in(this) query .selectAll(`.week-item`) .boundingClientRect(rect => { this.scrollLeft = rect[index].left + rect[index].width / 2 - (this.width1 - this.documentWidth) / 2 - rect[0].left }).exec() }, weekClick(index) { this.topBack() this.moveTo(index) this.weekIndex = index } ``` 这样，当点击元素时，该元素会滚动到页面中间位置 [^1]。 #### 普通小程序场景 在普通小程序场景（如示例中的`index.wxml`），同样是在`scroll - view`标签添加`scroll - x`属性来实现横向滚动： ```html <scroll-view class="myScoll" scroll-x> <view class="row">1</view> <view class="row">2</view> <view class="row">3</view> <view class="row">4</view> <view class="row">5</view> <view class="row">6</view> <view class="row">7</view> <view class="row">8</view> </scroll-view> ``` 此代码创建了一个包含多个元素的横向滚动区域，每个元素显示一个数字 [^2]。 #### uni - app 通用场景 在uni - app中，实现横向滚动的代码如下： ```html <view> <scroll-view class="scroll-view" scroll-x="true" @scroll="scroll" scroll-left="100%" @scrolltolower="scrolltolower"> <view class="item" v-for="(item,index) in ListTab" :key="index"> {{item.name}} </view> </scroll-view> </view> ``` 这里的`scroll - x="true"`属性使`scroll - view`支持横向滚动，并且添加了滚动事件`@scroll`和滚动到底部事件`@scrolltolower`的监听 [^3]。 #### uni - app 另一种场景 还有一种uni - app实现横向滚动的布局代码： ```html <scroll-view :scroll-x="true" class="scrollview-box"> <block v-for="item in list" :key="item"> <view class="item"> <image src="/static/logo.png" class="cover" mode="aspectFill"></image> <text class="name">{{item}}</text> </view> </block> </scroll-view> ``` 该代码通过`v - for`指令动态生成多个包含图片和文本的元素，利用`scroll - x`属性实现横向滚动 [^4]。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值