uni-app横向滚动视图的坑

最新推荐文章于 2024-06-04 22:15:00 发布
最新推荐文章于 2024-06-04 22:15:00 发布
阅读量480 收藏
点赞数 1
分类专栏： uni-app 文章标签： uni-app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_49438920/article/details/120938035
版权

前言：

并不是所有uni-app的组件cv过来就能用的，例如scroll-view组件必须进行一些css上的操作才能成功实现横向滚动效果。

简而言之就是必须在swiper-view容器加上white-space: nowrap;

在swiper-view的子元素中加上display: inline-block;

white-space: nowrap作用：其中文本不会换行，文本会在在同一行上继续，直到遇到
标签为止。

display: inline-block作用：可使元素不会独占一行，并且能够设置宽高

大佬文章：

css之display:inline-block布局

white-space: nowrap用法

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

“负拾捌”
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
uni-app 微信公众号H5开发 里面的video 组件点击全屏后不会自动横屏播放 2
学习路上的小刘
10-27 1004
文章目录前言一、废话不多说直接上代码总结 前言 根据上次发布的文章进一步改善了全屏横屏播放，去除了导航栏,实现伪全屏，但是ios系统不行，只能用自带的全屏按钮，让用户点击。 来点我遇到的问题吧 1.就是一开始我用的uni.getSystemInfo(OBJECT) 来获取当前手机的可视窗口的宽度和高度，结果发现，我手机可以。大BOSS的手机上完全撑大了，看不见取消全屏的图标了，我翻了上篇文章发现我没有用到这个系统的可视窗口的高度和宽度，来进行全屏。所以修改成原来的样子 2.全屏按钮的隐藏处理，一开始是想用
uniapp app手机端视频滑动
前端-CV全粘工程师
11-09 1437
uniapp app视频滑动,视频不出现,滑动卡顿等
uniapp小程序开发 | 从零实现一款影视类app （横向滚动和下拉刷新的实现）
最新发布
独行猫a 的沉淀、积累、总结。天天学习，好好向上...c/c++,嵌入式 linux,Android,HarmonyOS)
06-04 2128
uniapp小程序开发实战系列，完整介绍从零实现一款影视类小程序。包含小程序前端和后台接口的全部完整实现。这里介绍下我的电影小程序的完整实现过程，作为笔记存档。该篇介绍下实现过程中遇到的横向滚动和下拉刷新的实现。电影展示界面，是个明显的横向滚动。在没实现之前，一直以为可能需要借助listView或者uni-grid组件来实现，最后发现都不行。最终仅使用内置组件的scroll-view配合flex布局就完美达到效果啦。这里总结分享下，给需要的小伙伴。
uniapp横向滚动（scroll-view）
babyxuqian的博客
10-19 9921
属性名 类型 默认值 说明 平台差异说明 scroll-x Boolean false 允许横向滚动 scroll-y Boolean false 允许纵向滚动 upper-threshold Number 50 距顶部/左边多远时（单位px），触发 scrolltoupper 事件 lower-threshold Number 50 距底部/右边多远时（单位px），触发
uni-app：使用scroll-view实现横向滚动
weixin_48596030的博客
05-31 5056
【代码】uni-app：使用scroll-view实现横向滚动。
uni-app自定义组件之菜单左右滑动并点击切换选中居中显示.zip
09-30
`uiscrollview`是uni-app提供的一种滚动视图容器，用于展示超过视窗大小的内容，支持横向和纵向滚动。在这个场景中，我们利用`uiscrollview`的横向滚动特性，实现菜单项的左右滑动浏览。 要计算每个子元素的宽度，...
wx-plugin_Tabú_frogizf_wxpui_wxplugin_unin-app_
10-01
"Tabú frogizf"可能是该组件库的一个特定版本或特色功能，而"unin-app"可能表示这个库支持uni-app框架，这是一款多端开发工具，能够实现一次编写，多端运行。 【描述】"WxP UI 组件库(原生小程序版)" 指出这个库...
跑马灯文字滚动
11-30
在IT行业中，"跑马灯文字滚动"是一种常见的视觉效果，尤其在电子显示屏、网站、APP界面设计中经常被用到。它通过让文字或信息像霓虹灯一样连续滚动，来展示大量的信息或者吸引用户的注意力。这个效果通常用于有限的...
无缝连接可循环滚动布局
02-23
4. **处理边界情况**：为了实现循环滚动，当滚动到达布局的首尾时，需要将滚动位置映射回正确的子视图。这可能涉及到一些数学操作，例如取模运算，以确保滚动位置始终指向有效的子视图。 5. **触摸事件处理**：为了...
实现广告条滚动手动+自动+无限循环+完美平滑过渡三个例子ViewPager
07-17
首先，ViewPager的核心功能是实现左右滑动查看多个视图，它可以自动处理页面之间的滑动动画，提供平滑的用户体验。在第一个例子中，手动滚动广告条，开发者会学习到如何通过手势操作触发ViewPager的滑动事件，以及...
uniapp实现横向滚动样式条
jakelihua
11-20 5859
本文讲解，uniapp如何实现横向滚动样式条
uniapp 横向滑动list（不同内容）分部问题:scroll-view，swiper overflow-x
qq_27909209的博客
06-06 3245
试过一些设置，目前无法通过直接设置让它顶端对齐，并且高度一致。所以如果非要用这个，可以通过辅助方法：自己设置list里面的内容让内容条数相同，并且自己设置的内容可以设置颜色及背景，即可达到视觉对齐效果。横向的话：内容高度一致，（如果不一致的话，scroll-view会自动以底部对齐，形成山峰状，看下图）除了官网说的scroll-view的 横向，纵向，横线滑动，这里遇到一些问题写一下，如果要使用scroll-view也很简单，必备三要素。1：scroll-x或者scroll-y。或者使用swiper。
uniapp使用scroll-view与swiper组件实现tab滑动切换页面需要注意的问题
weixin_44519496的博客
08-02 1087
效果图： tab栏可以滑动，切换页面跟随tab栏同步滑动。这里需要注意的是使用swiper组件时，它会有一个默认的高度，你必须动态的获取数据列表的高度覆盖原来的默认高度。 下面是代码 html <template> <view> <scroll-view class="scroll1" scroll-x="true"> <view :class="currentTa
uni-app 用scroll-view实现横向滚动
热门推荐
shika233的博客
06-06 2万+
前端小白的uni-app艰难学习之路 实现 首先是效果图 下面是布局代码： <view class="bookshelf"> <view class="title"> <text>在读</text> <text class="icon icon-next fr"></text> ...
uniapp之scrollview图片区域滚动（横向滚动）
我心坚持
11-05 8978
scrollview仅适用于区域（局部）滚动，如果用于页面滚动和长列表，则有性能问题。 <scroll-view class="scrollView" scroll-x="true"> <view style="width: 333rpx;"> <shopListItem :commodityList="commodityList" wrap="no-wrap" width="160rpx" height="160rpx"></shopListItem
uniapp - 使用 ＜scroll-view＞ 内置组件，实现容器 “横向 / 纵向“ 区域内滚动功能（详细示例教程）
王佳斌
04-01 3305
uniapp scroll-view 区域滚动无效，uniapp横向滚动，uniapp scroll-view 横向纵向设置无效，uniapp scroll-view 详细使用教程，uniapp 区域滚动组件如何使用，uniapp scroll-view 去掉滚动条，uniApp 和微信小程序 scroll-view 实现区域滚动，uniapp使用scroll-view，uniapp横向滚动(scroll-view)，uniapp如何实现横向纵向滚动，uniapp scroll-view 区域滚动如何去掉滚
uniapp 横向滚动
深漂小码哥
02-04 372
<scroll-view scroll-x="true" class="scroll"> <view class="scroll-box"> 11 </view> <view class="scroll-box"> 22 </view> <view class="scroll-box"> 33 </view> .
关于uniapp使用srcoll-view视图是横向及纵向滚动
jidaotianzun的博客
09-21 1664
但值得注意的是在设置聚堆定位的时候（absolute和fixed）可能会造成出现滚动条但是无法滚动的，但去除绝对定位后又可以的情况。由于绝对定位后视图组件会脱离当前的文本流，在没有指定具体层级的情况下，导致滚动元素也没固定（个人猜想）。于是我在设定scroll-view的层级后即可保证在绝对定位的情况下还可以滚动。我上网查询时发现横向滚动的文章比较多，但纵向的寥寥无几，且对纵向滚动的解决办法都是设置高度，但这明显不行。以上是我在写代码的过程中遇到的问题及解决办法，如果有不同的看法的欢迎交流，大家一起进步。
uni-app scroll-view横向滚动到指定位置
03-24
可以使用scroll-view组件的scroll-left属性来控制横向滚动到指定位置，代码如下： <scroll-view scroll-x :scroll-left="scrollLeft" style="white-space: nowrap;"> // 横向滚动的内容区域 </scroll-view> 其中...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值