微信小程序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 容器，达到一个横向菜单到效果。如下：
我们 右击 pages 文件夹，选中新建文件夹 scroview。在 scroview 文件夹里面新建 page，给 page 命名为 scrowview。效果如下：
打开 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-view 的 white-space 设置为不换行，还有就是将它下面的所有 view 容器都在行里展示，那么这些 view 就可以只展示一行。达到我们想要的效果了。
总结
我们知道 tabBar 它是一个系统自带的一个全局性的页头或者页尾导航了，能够快速方便的进入到某个页面。如果在某个特定的页面，我们想要有这样的导航栏功能，我们可以使用 scrow-view 这样的容器来模拟，达到我们想要的效果。
