uniapp scroll-view用法

最新推荐文章于 2023-12-11 09:20:41 发布
最新推荐文章于 2023-12-11 09:20:41 发布
阅读量793 收藏
点赞数
分类专栏： uni-app 文章标签： uni-app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/apanpan8126/article/details/117323241
版权

white-space: nowrap;
overflow-x: auto;
必须同时存在
例子

 <scroll-view scroll-x="true" show-scrollbar='true' style="white-space: nowrap;ine-height:70upx;height:40upx;text-align:right;"  >

	{{house_number}}
	<img style="margin-left: 10upx; margin-bottom: 4upx;" src='@/static/image.png'>
						
 </scroll-view>
码农竟在我身边
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
uniapp-【scroll-view】
if.else.Z
03-19 2142
属性名 类型 默认值 说明 scroll-x Boolean false 允许横向滚动 scroll-y Boolean false 允许纵向滚动 upper-threshold Number 50 距顶部/左边多远时（单位px），触发 scrolltoupper 事件 lower-threshold Number 50 距底部/右边多远时（单位px），触发 scrolltolower 事件 scr
uniapp scroll-view
秋来九月八
02-28 5275
使用scorll-view横向拖动应该注意些什么？ 1.scroll-view 中的需要滑动的元素不可以用 float 浮动； 2.scroll-view 中的包裹需要滑动的元素的大盒子用 display:flex; 是没有作用的； 3.scroll-view 中的需要滑动的元素要用 dislay:inline-block; 进行元素的横向编排； 4.包裹 scroll-view 的大盒子有明确的...
uni-app的scroll-view
jwq
04-16 1039
uni-app的scroll-view <template> <view class="j-scroll"> <!-- scroll-x是允许横向滚动 scroll-y是允许纵向滚动--> <scroll-view scroll-x> <!-- 这里面放内容--> </scroll-view </view> </template> <style scoped lang=
uniapp scroll-view的使用
纸鸢的博客
12-14 1982
1、实现滚动到底部加载数据的效果 查看官网组件详情https://uniapp.dcloud.io/component/scroll-view <swiper> <swiper-item> <scroll-view scroll-y="true" enable-back-to-top="true" @scrolltolower="scrollToLower"> <view></view> </scroll-view>
uni-app之scroll-view组件
Li-的博客
08-31 1万+
uni-app使用scroll-view组件不生效的问题 横向滚动不生效 横向滚动不生效的问题是因为少了两行代码： white-space: nowrap; display:inline-block; 纵向滚动 必须指定滚动区域的高度。 不设置高度的话，scroll-view是不会滚动的，此时滚的是页面。 ...
uniapp横向滑动scroll-view
sddzlsc的博客
07-07 454
<scroll-view scroll-x="true" style="white-space: nowrap; padding: 10px;"> <view class="meige"> <image style="width: 300rpx;height: 300rpx;" src="../../static/shiliu_07.png"></image> <view>商品名称</view> <.
uniapp scroll-view 横向和纵向滚动 带滚动回调
09-10
Uniapp 平台兼容性 全端支持 引入组件即可
关于scroll-view和下拉刷新的那些坑
03-29
由于在官方文档的说明中，使用竖向滚动时，需要给<scroll>一个固定高度，通过 WXSS 设置 height。但是设置了高度的时候，下拉加载的方法就不好使了。这时候我们要根据滚动的高度来设置不同的高度，部分代码如下： &...
微信小程序 scroll-view的使用案例代码详解
10-15
主要介绍了微信小程序 scroll-view的使用案例分析，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
微信小程序完美解决scroll-view高度自适应问题的方法
10-14
主要介绍了微信小程序完美解决scroll-view高度自适应问题的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
微信小程序 scroll-view滚动到底部事件不触犯的锅
03-29
最后经过不懈的努力，找了很多资料，才发现,居然要设置scroll-view高度，于是我在.wxss里设置了高度为100%: .scrollStyle{ width: 100%; height: 100%; display: flex; flex-direction: column; } 居然无效，...
uniapp之scroll-view组件的练习使用 （制作可滑动的菜单）
asstudio的专栏
03-17 2万+
今天仔细研究了一下uniapp的scroll-view组件使用,顺便就做了一个可滑动的菜单，点击后能够切换样式 欢迎到https://www.uniapp.club/thread-57.htm交流学习 其中，还有用到其他知识点有： 1.v-for循环数据把菜单名字循环显示出来（注意一定要加：:key=""）,不然编辑器会报错，虽然不影响使用，但是看着不舒服 1 ...
uni-app组件之scroll-view的详细教程
码奴一只猿
05-25 7739
scroll-view 是 UniApp 中的一个重要组件，它提供了在视图区域内滚动内容的功能。无论是在小程序、H5 还是 APP 端，scroll-view 都能够帮助你实现滚动内容的需求。本教程将详细介绍如何在 UniApp 中使用 scroll-view 组件，并提供示例代码供参考。
uniapp scroll-view基础用法
热门推荐
lxgyydsgod的博客
08-07 2万+
在uniapp日常开发的过程中经常会有局部滚动的需求，而scroll-view组件正好可以满足这一需求。本篇主要介绍了一些scroll-view的基础用法
uniapp之使用scroll-view时的要点
u010613970的博客
04-21 3433
1、一定要在scroll-view标签里面写内容，包含后台返回的循环数据 2、在scroll-view标签设置css样式：white-space: nowrap; (不换行) 3、在scroll-view标签的子标签设置css样式display: inline-block; 4、scroll-view标签一定要给个固定的高度 例子： <scroll-view class="scroll-v...
【前端】【解决问题】uniapp的scroll-view组件的scroll-top，设置回到底部失效，解决方法
tangxz的博客
07-31 5581
官方解决 我的代码： html： <scroll-view id="scrollView" scroll-y :scroll-top="scrollTop" :scroll-with-animation="true" :style="{height:style.contentH+'px'}" @scroll="scroll"> <block v-for="(item,index) in list" :key="index"> <user-chat-list :i
uni-app scroll-view横向滚动设置
sumimg的博客
11-11 1083
1、单排横向滚动 html <scroll-view scroll-x="true" class="kite-classify-scroll"> <view class="kite-classify-cell"></view> <view class="kite-classify-cell"></view> <view class="kite-classify-cell"></view> </scroll-v
uniapp初级入门-scrollview组件如何使用
最新发布
虾米大王的学习历程
12-11 442
使用Hbuiderx创建项目，然后新建页面，下面贴出代码。
【uniapp实现tabs（scroll-view）点击左右滑动】
weixin_38673922的博客
02-03 1220
uniapp实现tabs（scroll-view）点击左右滑动
uniapp scroll-view纵向滚动
09-01
- *1* *2* *3* [uniapp scroll-view基础用法](https://blog.csdn.net/lxgyydsgod/article/details/126212359)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值