问题描述 小程序的视图容器组件分为五个组件，分别是view组件、scroll-view组件、swiper组件、movable组件与cover组件，如图2.1。...这里介绍scroll-view组件的用法。 解决方案 Scroll-view是负责可滚动视图区域的一个组件，称为滚动视图。...这里演示scroll-x与scroll-y属性： <view style="background:black...在定义<em>scroll-view</em>时，一定要给他一个固定的高度。 ? 这是纵、横向演示效果图。 在学习组件的过程中，发现还有很多需要去实践的东西，有待于我们更深一层的思考。
前言：这章我们使用小程序的scroll-view组件实现横向滚动和竖向滚动。...https://github.com/Ewall1106/miniProgramDemo 1、竖向滚动 首先从简单的来，竖向滚动很简单，只用记住两点即可： 首先得设置scroll-y属性； 其次，一定要给scroll-view...设置一个height高度； <view class="green" style="width: 100%;...首先还是要设置滚动方向为scroll-x； 然后要给设置white-space为nowrap不换行； 最后需要将容器中包裹的标签的display属性设置为...横向滚动 3、其它 （1）当然，关于<em>scroll-view</em>组件官网还提供了许多其它的属性和事件方法，大家仔细去看看： ?
1、使用竖向横向滚动 scroll-y 属性：使用竖向滚动，必须给 scroll-view 一个固定高度 例如：height：60rpx; scroll-x 属性：使用横向滚动，必须加以下样式...1、给 scroll-view 加 width: 100%; white-space: nowrap;...2.7.3 ......... .navScroll { display: flex; /* 不设置 enable-flex，不生效 */ white-space: nowrap...组件加上 scroll-with-animation 就会出现滚动到该项的动画 --> <scroll-view scroll-x scroll-into-view="{{'scroll' +
需求是对话列表收到新消息后，需要自动将 scroll-view 滚动至底部显示最新对话消息。 ...方式获取高度时，发现数据更新后并不能获取最新view 高度，而是再次手动滑动至底部后 rect 对象内包含的 bottom / height 数值才会更新，当然了，这样小伙伴无法愉快的玩耍，随使用另一种方法，即 scroll-view
代码 布局样式代码省略，以下只展示逻辑代码 ...{{item.className}} onReady(){ wx.createSelectorQuery...().select('.scroll-view').boundingClientRect((rect)=>{ this.data.scrollViewWidth = Math.round(rect.width...宽度一半之后的项才开始滚动，所以需要减去宽度的一半 offsetLeft为相对于scroll-view总长度的X轴距离，只要相减计算后的数值为正数，就可以证明上面的条件，触发滚动
更多关于滚动条的设置参看：CSS3自定义滚动条样式 -webkit-scrollbar
uni 文档中 scroll-view 说明可滚动视图区域，用于区域滚动。...使用竖向滚动时，需要给 scroll-view 一个固定高度，通过 css 设置 height；使用横向滚动时，需要给 scroll-view 添加 white-space: nowrap; 样式。...微信小程序文档中 scroll-view 说明可滚动视图区域。使用竖向滚动时，需要给scroll-view一个固定高度，通过 WXSS 设置 height。...这个也是 scroll-view 最简单的用法，纵向滚动直接设置一个已知的固定高度 height 就行了，没啥难度。...这个实现稍微难一点：js 实现：直接获取到屏幕的整个高度，然后减去上下模块的高度就是中间的 scroll-view 高度了。
效果图 <scroll-view class="banner" scroll-x="true" scroll-with-animation="true" scroll-into-view...'hover' : ''}}"> {{item.catname}} .banner { width:
标题图 小编 / 达叔小生 查看官方文档：https://developers.weixin.qq.com/miniprogram/dev/component/ 小程序开发基础-scroll-view...效果图1 scroll-view视图组件 scroll-y是scroll-view的属性，scroll-y类型为Boolean，默认值为false，表示允许纵向滚动，scroll-y="true"允许纵向滚动...在定义scroll-view时，要给它一个固定的高度，通过wxss也可以内部样式，给设置个height属性，如style="height:200px;"。...scroll-into-view为scroll-view的属性，类型为String类型，表示值应为某子元素的id，甚至哪个方向可滚动，则在哪个方向滚动到该元素。...scroll-top为scroll-view的属性，类型为Number类型，表示值应为设置竖向滚动条位置，同时横向有个scroll-left属性。 <!
使用竖向滚动时，需要给scroll-view一个固定高度，通过 WXSS 设置 height。组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px)。...增强特性，启用后可通过 ScrollViewContext 操作 scroll-view2.12.0bouncesbooleanTRUE否iOS 下 scroll-view 边界弹性控制 (同时开启...横向滚动需打开 enable-flex 以兼容 WebView，如 3....时会阻止页面回弹，所以在 scroll-view 中滚动，是无法触发 onPullDownRefresh4. tip: 若要使用下拉刷新，请使用页面的滚动，而不是 scroll-view ，这样也能通过点击顶部状态栏回到页面顶部...']Page({ onShareAppMessage() { return { title: 'scroll-view', path: 'page/component/pages/scroll-view
✅作者简介：CSDN内容合伙人、阿里云专家博主、51CTO专家博主 个人主页：hacker707的csdn博客 系列专栏：微信小程序 个人格言：但行好事，莫问前程 view和scroll-view...小程序组件的分类 常见的视图容器类组件 view组件的基本使用 scroll-view组件的基本使用 结束语 小程序组件的分类 小程序中的组件也是由宿主环境提供的，开发者可以使用组件快速搭建出页面结构...⑥map地图组件 ⑦canvas画布组件 ⑧开放能力 ⑨无障碍访问 常见的视图容器类组件 ①view 普通视图区域 类似于HTML中的div，是一个块级元素 常用于实现页面的布局效果 ②scroll-view...--注意：使用竖向滚动时必须给scroll-view一个固定高度--> A B C ✅hacker.wxss /* pages/hacker/hacker.wxss */ .container1
【小程序开发】常用的视图容器类组件&基础内容组件 前言 宿主环境 - 组件 视图容器类组件 view组件 scroll-view swiper和swiper-item 基础内容组件 text rich-text...background-color: lightcyan; } .container view:nth-child(3) { background-color: lightgoldenrodyellow; } scroll-view...介绍： 可滚动的视图区域（动态） 常用来实现列表滚动效果 ---- 纵向滚动效果实现 注意事项： 滑动效果中对整个区域的高度要小于滑动视图区域的总高度，且要在scroll-view组件中 加上 scroll-y...--结构--> A B C A B C </scroll-view
最近使用uni-app开发h5时遇到下拉刷新状态无法关闭的问题，记录一下 页面需要用scroll-view组件自定义下拉刷新，通过refresher-triggered来控制加载状态的显示隐藏 refresher-triggered...解决办法 refresher-triggered的初始值为false 要先变为true，执行完刷新操作之后再变为false才会有效果 页面代码示例： <scroll-view...refresher-background="#f0f2f6" @refresherpulling="onPulling" @refresherrefresh="onRefresh"> </scroll-view...} }, onRefresh() { // 自定义下拉刷新被触发执行 } } } # 参考资料 scroll-view
DEMO下载 效果图 实现原理 利用scroll-view的scroll-into-view属性进行定位； 利用scroll-view的scroll-with-animation属性实现滚动动画过度。...layer-hide'}}"> {{codeY}} 当前选择机场：{{chooseCity}} {{city}} </scroll-view...的scroll-into-view属性是滚动到指定id位置，所以，在列表的字母行加上id属性； 由于scroll-view的scroll-into-view属性实现了滚动到指定位置，所以减少了scrollTop...的计算； 由于scroll-view的scroll-with-animation属性，实现了滚动动画过度效果； 减少了计算scrollTop的循环消耗； js代码量减少，减少this.setData方法的变量设置
记录下如何解决scroll-view上拉到底部时触发多次数据请求的问题 # 问题 用 uni-app 开发h5时有页面需要上拉加载下一页数据，使用scroll-view导致页面级没有滚动，onReachBottom...# 解决方法 防抖：scrolltolower触发事件中设定一个定时器，在指定时间之后发出请求 <scroll-view scroll-y="true" style="height: 100%;" @scrolltolower...包括在app-nvue页面，长列表应该使用list而不是scroll-view。...scroll-view是区域滚动，不会触发页面滚动，无法触发pages.json配置的下拉刷新、页面触底onReachBottomDistance、titleNView的transparent透明渐变。...scroll-view的滚动条设置，可通过css的-webkit-scrollbar自定义，包括隐藏滚动条。 # 参考资料 scroll-view组件
当 scroll-view 组件的第一个直接子元素设置了 margin-top 时即使 scroll-view 只有一行也可以滚动。...解决办法： 方案一： 去掉第一个元素的 margin-top，这样的缺点是第一个元素和 scroll-view 顶部紧贴，看着很不舒服。...方案二： 去掉第一个元素的 margin-top，设置 scroll-view 组件的 padding-top 来替代。...这样做的话在滚动时scroll-view 顶部和最上面一个元素之间总是有一段空隙。...方案四： 将 scroll-view 组件的所有直接子元素用一个容器包裹，并将容器的宽高都设置为 100%，定位属性与 scroll-view 保持一致。
一、前言、scroll-view基本属性： 前言： 前段时间使用scroll-view可滚动视图区域容器来做多个不同内容的展示（在我这个页面中同时使用了三个scroll-view做数据展示），因为这几个展示的内容的数据都比较的多...但是如使用scroll-view导致页面级没有滚动，则触底事件不会被触发，所以这里存在的问题是有时候无法触发onReachBottom。 ...最终选择了适用scroll-view自带的滚到底部触发事件scrolltolower事件，虽然这个事件确实能够实现上拉加载数据分页的功能，但是这个是事件存在两个问题。...第一个问题就是当滚动条滚动到底部时会多次触发scrolltolower事件，第二个问题是当页面由第一个scroll-view（该页面已经到了的最底部了）切换到第二个scroll-view时会自动滚动到页面的最底部...，当切换到第二个scroll-view时在默认设置scrollTop为0，那么在切换到第二个页面的同时页面的竖向滚动条的位置会默认滚动到最顶部，从而解决了默认滚动到最底部加载多次数据的问题。
记一下scroll-view的使用 滚动时,区域元素出现在屏幕上,对应的tab项目高亮 代码: wxml: ...active':''}}" bindtap="jumpTo" data-optg="courses">推荐 js: data: { toView: 'chapter', activeView: 'chapter', loaded: 0 },
5.2，scroll-view 开启自定义下拉刷新，scroll-view 里面内容太少无法触发刷新？...5.6，什么情况下需要使用 scroll-view 的下拉刷新，而不使用页面本身的下拉刷新？ 5.7，scroll-view 内不支持嵌套原生组件吗？...特别当组件的设计过于随心所欲时，学习者的学习负担也更大了 1、scroll-view 相关问题 ? scroll-view是可滚动视图区域组件。...7，如何在scroll-view中自定义实现一个下拉刷新交互动画？ 8，使用scroll-view实现瀑布流功能时，如果页面比较卡顿，可以朝哪个方向优化？...scroll-view".
垂直滚动视图 scroll-view是容器组件，如果该组件的子组件超过scroll-view的高度或宽度，该组件会允许子组件在垂直或水平方向滚动视图，以便显示其他没有显示的子组件。...本节主要介绍如何让scroll-view垂直滚动。 如果要让scroll-view垂直滚动，需要设置scroll-y属性值为true。...这样scroll-view就允许滚动而现实其他的子view了。...图1 scroll-view垂直滚动的效果 scroll-view滚动条的初始位置为0，也就是在最上端，如果要改变滚动条的默认位置，需要设置scroll-top属性，该属性默认的属性值为0，也就是滚动条在最顶端... … … 显示效果如图2所示
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM
