小程序 — scroll-view组件实现滚动

最新推荐文章于 2021-11-29 13:36:13 发布
最新推荐文章于 2021-11-29 13:36:13 发布
阅读量377 收藏 1
点赞数
文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40112624/article/details/106762910
版权

1、竖向滚动
首先从简单的来，竖向滚动很简单，只用记住两点即可：

首先得设置scroll-y属性；
其次，一定要给scroll-view设置一个height高度；






就这样我们就实现了竖向滚动。
2、横向滚动
横向滚动就有点坑了…
首先还是要设置滚动方向为scroll-x；
然后要给设置white-space为nowrap不换行；
最后需要将容器中包裹的标签的display属性设置为inline-block。
横向滚动





梦之翼618720
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
uni-app scroll-view自适应滚动
m0_57068257的博客
07-28 1219
scroll-view滚动范围不支持通过百分比以及flex：1进行设置，所以需要计算出一个准确的高度；通过获取根标签下所有一级标签高度以及设置的上下外边距之和，再由根标签高度进行相减最终得出滚动高度。
uniapp 实现图片自动纵向轮播
qq_45729353的博客
05-19 1574
✴️大家好,我是陌寒，好久不见 ✴️如果对你有帮助就给我点个赞吧，这样我们就互不相欠了 ✴️星光不负赶路人，所有的幸运都来自于坚持不懈的努力，大家一起加油吧 问题:uniapp 实现图片自动纵向轮播 直接上代码 <template> <view class="login-box" v-show="iSif"> <view class="broadcastTopBtm" :style="'height:'+height+'rpx;--scrollHeight--:'
微信小程序scroll-view回到顶部
weixin_46115860的博客
04-24 4351
说明： 使用scroll-view，当数据过多，scroll-view容器滚动过长的位置时，如何回到scroll-view的顶部 解决方法（仅放置重要代码）： 在.wxml文件中，添加scroll-top，并使用model双向绑定 <scroll-view class="scroll-content" scroll-y model:scroll-top="{{myScrollTop}}" > ...内容 </scroll-view> <!-- 回到顶部的图标，含有b
微信小程序：scroll-view横向滚动的使用和隐藏滚动条
彭世瑜的博客
11-29 4367
文档： https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html 横向滚动 <scroll-view class="scroll__wrap" scroll-x="true"> <block wx:for="{{[1, 2, 3, 4, 5]}}"> <view class="scroll__item">{{item}}</view
微信小程序 scroll-view 竖向滚动
weixin_34090643的博客
08-22 1903
根据官方提供的案例，复制到小程序中测试，发现不行，直接上测试源码 index.wxml中编写 <view class="section__title">vertical scroll</view> <scroll-view scroll-y class="scroll-view_v"> 　　<view style="background:gre...
微信小程序scroll-view组件实现滚动动画
08-28
微信小程序 scroll-view 组件实现滚动动画 微信小程序 scroll-view 组件是一种常用的滚动容器组件，通过设置 scroll-into-view 和 scroll-with-animation 属性可以实现滚动动画效果。在本文中，我们将详细介绍如何...
小程序scroll-view组件实现滚动的示例代码
01-03
前言：这章我们使用小程序的 scroll-view组件 实现横向滚动和竖向滚动。 GitHub： https://github.com/Ewall1106/miniProgramDemo 1、竖向滚动 首先从简单的来，竖向滚动很简单，只用记住两点即可： 首先得设置 ...
微信小程序scroll-view实现滚动穿透和阻止滚动的方法
10-18
在微信小程序开发中，`scroll-view` 是一个非常重要的组件，用于实现页面的滚动效果。在某些场景下，我们可能需要实现滚动穿透或者阻止`scroll-view`的滚动，以达到特定的交互效果。本文将详细介绍如何在微信小程序...
微信小程序 scroll-view滑动
weixin_45672809的博客
08-10 772
微信小程序 scroll-view滑动 scroll-view纵向滑动 使用竖向滚动时，需要给scroll-view一个固定高度，通过 WXSS 设置 height。组件属性的长度单位默认为px <!-- wxml --> <scroll-view scroll-y="true" style="height:300px"> <view class="item_1"></view> <view class="item_2"><
微信小程序 scroll-view 实现横向、纵向滚动
haoyanyu_的博客
09-04 3万+
1.纵向滚动 api文档有注明，&lt;scroll-view scroll-y style="height: 400rpx;"&gt;   1231231231&lt;/scroll-view&gt; 即 如果是纵向滚动，必须指定滚动区域的高度 2.横向滚动 核心思想： 需要让scroll-view里的子元素在一行展示。    1&gt; 父元素设置 white-space: nowr...
scroll-view定位并且平滑滚动
Zan_Z的博客
12-03 1298
1.定位使用 scroll-into-view 的属性，可以滑动到tab中的指定 item 位置。重点是： scroll-into-view的值保持和id里面的值相等，及定位就可以找到 <scroll-view scroll-into-view="{{'item'+tabid}}" scroll-x="true" class="tab-h" scroll-left="{{scrollLeft}}" scroll-with-animation="true"> <block wx:f.
解决 ScrollView 滑动过程中 ScrollTo() 方法不起作用的问题
猿份哥
07-18 2690
问题：当滑动ScrollView后（还在惯性滑动中）切换章节内容，并定位到ScrollView底部 此时调用scrollTo(int x, int y)不起作用。 分析原因：由于滑动动画还在继续，scrollTo在执行后效果被滑动动画覆盖，没起作用。  曾苦于一时没有解决方案，未曾找到取消滑动动画的方法，后偶然发现，smoothScrollTo()方法可以打断动画，将 scrollT
scroll-view 无限自动滚动
weixin_44387746的博客
02-07 1719
css .marquee_text { display: inline-block; /* margin-left: 100%; */ white-space: nowrap; animation: marquee_text var(--timer) infinite linear; } @keyframes marquee_text { from { margin-left: -10rpx; } to { margin-left: var(--width);
微信小程序 scroll-view 实现自动滑动到底部
热爱思考、活力满满、开朗爱笑的年轻人
11-18 7361
<scroll-view class="scroll-wrapper" scroll-into-view="{{scrollTo}}" scroll-y="true" bindscroll="messageListScrolling" > <block wx:for="{{messageList}}" wx:key="id"> <view>你的scroll-view中的内容</view> </block> &lt
微信小程序-scroll-view横向滚动和上拉加载
前端向朔
03-04 2万+
今天介绍微信小程序中scroll-view实现横向滚动和上拉加载的实现及需要注意的地方。 先看最终效果。横向滚动1.设置滚动项display：inline-block; 2.设置滚动视图容器white-space: nowrap; 3.滚动项不要用float为什么会有以上三点要求呢？ 其实横向滚动官方文档中是没有做太多说明的，只说明需要定义scroll-view滚动方向scroll-x=tr
微信小程序：scroll-view组件滑动多次触发scroll事件的bug解决
小熊的博客
07-23 1万+
在项目开发过程中，组件是微信小程序提供给我们的一个分页器，一般滑动到底部时会触发scroll事件，scroll事件中往往包含对后端数据的请求；若是还未滑动到底部时频繁触发事件，则会频繁发请求，达不到想到的分页效果。 先来说说的用法 &lt;scroll-view scroll-y="true" style="height:{containerHeight}px" lower-threshold...
微信小程序scroll-view的bindscroll事件不触发问题（已解决）
weixin_42157001的博客
06-20 1万+
今天在开发微信小程序项目过程中，用到了scroll-view组件，想使用这个组件让页面实现纵向滚动并获取它的输出值，一切准备就绪发现页面滚动死活触发不了事件，查阅各种类似问题都说： 1、scroll-view高度设置出错，有说不能设置百分比，有说要在wxss里给它设置高度； 2、scroll-y='true'是不是忘记写了； 但是，事实上我这些都已经设置好，不管百分比高度还是实际高度都设置过...
微信小程序-scroll-view滚动到索引位置(二)
热门推荐
柠檬不萌
12-21 5万+
有一些重要的关键点请看上一篇文章 微信小程序-scroll-view滚动到指定位置(一) 主要用到scroll-into-view  如果你想让他回顶部 直接用scroll-top即可 话不多说,看代码 wxml {{item.wordindex}}
微信小程序scroll-view未被占满时滚动的问题
渔父歌的博客
12-13 3023
当 scroll-view 组件的第一个直接子元素设置了 margin-top 时即使 scroll-view 只有一行也可以滚动。 解决办法： 方案一： 去掉第一个元素的 margin-top，这样的缺点是第一个元素和 scroll-view 顶部紧贴，看着很不舒服。 方案二： 去掉第一个元素的 margin-top，设置 scroll-view 组件的 padding-top 来替代...
微信小程序scroll-view横向滚动实现
最新发布
04-01
1. 在wxml文件中添加scroll-view组件，设置属性： ``` <scroll-view scroll-x="true" class="scroll-view"> <!-- 横向滚动内容 --> </scroll-view> ``` 其中scroll-x属性表示横向滚动。 2. 在wxss文件中设置...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值