uniapp scroll-view组件滚动不生效 无法滚动 解决办法

已于 2022-02-13 15:34:48 修改
阅读量8.4k 收藏 4
点赞数 1
于 2022-02-13 15:34:26 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Sunonkyu/article/details/122909523
版权

前端 html uni-app css 小程序

uniapp scroll-view组件滚动不生效 无法滚动 解决办法

问题

在学习uniapp制作页面时，我们使用scroll-view组件来帮助我们完成导航栏工作，但萌新可能会出现以下问题：如图可见，横向滚动并没有生效，文字挤在一起
在这里插入图片描述

解决办法

在scroll-view组件的样式中添加以下内容

white-space: nowrap;

姜姜~解决啦
在这里插入图片描述

Sunonky
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
微信小程序-uniapp使用＜scroll-view ＞组件实现卡片左滑功能在电脑端小程序版不生效问题
m0_69924991的博客
06-02 406
改用swiper组件就可以啦~附上参考代码。
uni-app scroll-view 组件不生效
卡三ss
06-14 2920
scroll-view 组件不生效
uni-app：踩坑路---scroll-view内使用fixed定位，无效的问题
本以为成功很简单，没想到活成普通人都需拼尽全力！
07-20 809
emmm，说起来这个问题整得还挺好笑的，本人在公司内，奋笔疾书写代码，愉快的提交测试的时候，测试跟我说，在苹果手机上你这个样式有bug，我倒是要看看，是什么bug。安卓vs苹果ok，我相信已经看出了差异了，安卓的遮罩层正常显示，而苹果的遮罩层只在我的绿色框内，被截断了，我赶忙看代码：CustomItem.vue：自定义组件蓝色的正方形，外加上一个遮罩层，点击蓝色方块的时候，显示遮罩层，遮罩层内写我的要展示的一些内容。
uniapp中scroll-view滚动失效解决方法
m0_43377799的博客
04-13 4459
uniapp中scroll-view滚动失效解决方法
uniapp微信小程序遇到scroll-into-view不生效的问题
weixin_68530407的博客
02-08 1874
方式2：本地项目使用的方式，页面创建完成获取父元素高度减去固定的比如输入框等元素高度来设置scroll-view的高度(第一版)正常按照uni官方文档配置就好，之前项目也做过类似需求，但是前两天遇到了设置不生效的问题。具体为什么初版不生效还不清楚，有可能模板内语法有问题，但是我看着没毛病哈哈哈。2、scroll-into-view和子元素的id设置有问题(经测试设置没问题)调整scroll-view高度设置，在js中计算完成了再放到标签style属性内。1、scroll-view 没有高度。
UniApp scroll-view 事件不生效（@scroll、@scrolltolower、@scrolltoupper ...）
卡尔特斯
08-02 7349
开启下拉刷新后，无论在什么位置触摸下滚，都算在进行下拉，这个也是因为没有设置固定高度的问题。如果设置之后还无法解决，就需要使用上面的这些事件随便拿个判断一下是否到顶部。没有一个固定的高度，所以需要给容器设定一个高度。等熟悉或事件时，不生效，是因为。...
uni-app中scroll-into-view不生效的问题
q1980652的博客
06-06 517
当你设置好了scroll-view的内外CSS和scroll-into-view所需要id后，如果你的分类列表数据是请求后端返回的，scroll-view内的view元素id要快过scroll-into-view所获取的id，不然无法生效。我的this.curScrollId是scroll-into-view的id,他快过了我获取分类数据的方法导致无法生效。今天在写点击分类进入列表页面，列表页面分类横向滚动到对应分类名称时使用scroll-into-view功能发现的坑。
uniapp scroll-view横向滚动无效，scroll-view子元素flex布局不生效
weixin_52941842的博客
08-21 3209
uniapp scroll-view横向滚动无效，scroll-view子元素flex布局不生效
解决uniapp里scroll-view横向滚动的问题
Oliver尹的博客
10-12 3856
本以为是一件很简单的事，结果浪费了整整一个上午，并且问题并没有全部解决....后来没办法，用了touchmove模拟的滑动，如果有好的解决方法麻烦告诉我...非常感谢~
解决uniapp 嵌套scroll-view 滚动失效
moerduo0的博客
12-11 987
在第二个scroll-view添加 white-space: nowrap; 子元素添加 display: inline-block
uniapp使用scroll-view的:scroll-into-view=“lastChatData“跳到某个元素id时候，在app上不生效，小程序没问题
sjt1010的博客
11-25 1740
lastChatData定义的要跳转元素的id app上不生效或者没有跳到合适位置，只需要加一个一次性定时器来延迟赋值就ok。 如： setTimeout(()=>{ that.lastChatData = 元素id },500)
解决uniapp中scrollintoview无效问题
weixin_56704277的博客
03-26 4725
解决办法：添加一个定时器或者用$nextTick（延迟一下） 1.$nextTick方法 this.$nextTick(function(){ this.scrollInto='into'+i }) 2.定时器方法 setTimeout(()=>{ this.scrollInto='into'+i })
UniappX scroll-view不能滚动问题
最新发布
CZDBGSY的博客
08-02 293
不给scrollview设置高度是不可以滚动的，单纯的flex1页不一定可以，需要添加一个实体高度，让其自动撑开。uniappx里弃用了scroll-x，以及scroll-y属性，用direction属性代替了；如果还是不可以，检查是否有scroll-view嵌套，以及父元素是否有实体高度。
小程序横向scroll-view组件自动滚动到某个view scroll-into-view 没有效果
wlm123565的博客
09-10 3575
原因： 1.处理完数据之后，需要更新一次page对象中的data， that.setData({ toview: 'target' }) 2.html中data-node-id和data-index两种属性不能同时存在， 3.html中必须设置id='{{item.id}}'属性 代码如下： html： <view class="scroll_box"...
uni-app的scroll-into-view在开发聊天界面时无法自动滚动的问题
weixin_45890764的博客
01-27 4348
在开发聊天界面时，需求是在初次进入聊天界面和发送信息后，消息要到达最底部。代码： pageToBottom(){ let lastIndex = this.list.length - 1 console.log(lastIndex) if(lastIndex < 0) return; this.scrollInto = 'chat'+lastIndex console.log('chat'+lastIndex) console.log(12121)
scroll-view scroll-y上下滑动失效
到底要什么姿态，才不会显得我在使坏。
11-27 1476
如果我们高度是动态的，那我们可以动态给scroll-view一个高度即可。注意高度不要和相应元素高度一致，不然也是无法滚动的。在uniapp打包成小程序部署后如下代码，我们添加了 scroll-y但是无法上下滑动。滚动的条件必须是设定固定高度，这样才能滚动。
uniapp里scroll-view设置了内容不滚动
FUFCY的博客
01-07 3372
第一得设置：scroll-y="true"属性 第二得设置容器占有得高度height: calc(100vh - 30rpx); 第三必须得嵌套个格盒子
uniapp nvue中scrollview 横向无法滚动
jueshileqishou01的博客
04-15 2274
描述：nvue中scrollview无法横向滚动 解决：在nvue中默认是flex布局并且是column，就是因为这个导致无法横向滚动， 解决办法，设置当前scrollview的flex-direction:row template部分： <view> <scroll-view class="scroll-view_H" scroll-x="true" > <！--记住这里要套一层，并且设置flex-direction: row;...
uniapp scroll-view纵向滚动
09-01
在uniapp中，可以通过scroll-view组件来实现纵向滚动。要开启纵向滚动功能，只需将scroll-view组件的scroll-y属性设置为true，并给scroll-view设置一个高度。当内容的高度大于scroll-view的高度时，就可以实现滚动...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值