嗨客网搜索
微信小程序scroll-view

微信小程序scroll-view教程

scroll-view 是小程序里面的视图容器,它在官网文档 scroll-view。在平时的开发过程中,我们会经常使用到该视图容器。比如我们在页首搞一个可以横向滚动的导航栏,也可以在页面左侧搞一个上下滑动的导航栏。

语法

scroll-view 属性

属性 类型 描述
scroll-x boolean 允许横向滚动
scroll-y boolean 允许纵向滚动
upper-threshold number/string 距顶部/左边多远时,触发 scrolltoupper 事件
lower-threshold number/string 距底部/右边多远时,触发 scrolltolower 事件
scroll-top number/string 设置竖向滚动条位置
scroll-left number/string 设置横向滚动条位置
scroll-into-view string 值应为某子元素id(id不能以数字开头)。设置哪个方向可滚动,则在哪个方向滚动到该元素
scroll-with-animation boolean 在设置滚动条位置时使用动画过渡
enable-back-to-top boolean iOS点击顶部状态栏、安卓双击标题栏时,滚动条返回顶部,只支持竖向
enable-flex boolean 启用 flexbox 布局。开启后,当前节点声明了 display: flex 就会成为 flex container,并作用于其孩子节点。
scroll-anchoring boolean 开启 scroll anchoring 特性,即控制滚动位置不随内容变化而抖动,仅在 iOS 下生效,安卓下可参考 CSS overflow-anchor 属性。
refresher-enabled boolean 开启自定义下拉刷新
refresher-threshold number 设置自定义下拉刷新阈值
refresher-default-style string 设置自定义下拉刷新默认样式,支持设置 black | white | none, none 表示不使用默认样式
refresher-background string 设置自定义下拉刷新区域背景颜色
refresher-triggered boolean 设置当前下拉刷新状态,true 表示下拉刷新已经被触发,false 表示下拉刷新未被触发
enhanced boolean 启用 scroll-view 增强特性
bounces boolean iOS 下 scroll-view 边界弹性控制 (同时开启 enhanced 属性后生效)
show-scrollbar boolean 滚动条显隐控制 (同时开启 enhanced 属性后生效)
paging-enabled boolean 分页滑动效果 (同时开启 enhanced 属性后生效)
fast-deceleration boolean 滑动减速速率控制 (同时开启 enhanced 属性后生效)
binddragstart eventhandle 滑动开始事件 (同时开启 enhanced 属性后生效) detail { scrollTop, scrollLeft }
binddragging eventhandle 滑动事件 (同时开启 enhanced 属性后生效) detail { scrollTop, scrollLeft }
binddragend eventhandle 滑动结束事件 (同时开启 enhanced 属性后生效) detail { scrollTop, scrollLeft, velocity }
bindscrolltoupper eventhandle 滚动到顶部/左边时触发
bindscrolltolower eventhandle 滚动到底部/右边时触发
bindscroll eventhandle 滚动时触发,event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}
bindrefresherpulling eventhandle 自定义下拉刷新控件被下拉
bindrefresherrefresh eventhandle 自定义下拉刷新被触发
bindrefresherrestore eventhandle 自定义下拉刷新被复位
bindrefresherabort eventhandle 自定义下拉刷新被中止

案例

我们使用 scroll-bar 容器,达到一个横向菜单到效果。如下:

04 scrollview.png

我们 右击 pages 文件夹,选中新建文件夹 scroview。在 scroview 文件夹里面新建 page,给 page 命名为 scrowview。效果如下:

05 scrollviewwork.png

打开 scrowview.wxml 文件:

<scroll-view scroll-x class="scrowList"> <view>全部</view> <view>栏目1</view> <view>栏目2</view> <view>栏目3</view> <view>栏目4</view> <view>栏目5</view> <view>栏目6</view> <view>栏目7</view> </scroll-view>

打开 scrowview.wxss 文件:

.scrowList {white-space: nowrap;} .scrowList view{display: inline-block;width: 20%;text-align: center;}

如果您试验了该功能的话,您会发现,如果不编写 scrowview.wxss 里面内容的话,头部导航栏是不存在的。它将每个 <view> 都以行展示。将 scroll-viewwhite-space 设置为不换行,还有就是将它下面的所有 view 容器都在行里展示,那么这些 view 就可以只展示一行。达到我们想要的效果了。

总结

我们知道 tabBar 它是一个系统自带的一个全局性的页头或者页尾导航了,能够快速方便的进入到某个页面。如果在某个特定的页面,我们想要有这样的导航栏功能,我们可以使用 scrow-view 这样的容器来模拟,达到我们想要的效果。

嗨客网顶部