在页面上的一块视图，你可以滚动显示它里面的内容，可以使用 scroll-view 这个组件包装一下这块视图 .. 你可以设置可以滚动的方向，可以配置滚动的行为，还有添加一些跟滚动相关的事件处理等等 ..

这里我们用一组 scroll-view 组件 .. 包装一下前面我们添加的这块视图 .. 选中这块代码 .. 安装了 emmet 插件，可以用一下 ctrl + W .. 输入包装 .. scroll-view ..

让这个滚动视图里面的东西可以垂直滚动，可以添加一个 scroll-y .. 把它的值设置成 true ..

允许视图横向滚动，可以把 scroll-x 设置成 true ..

滚动视图需要一个固定的高度 .. 这里我们直接在上面添加一个 style ，在组件上应用点样式 .. 用 height 设置一下它的高度 .. 大小是 180px ..

现在，页面上这块视图，就可以垂直滚动显示它里面的内容了 ..

scroll-into-view

scroll-into-view 这个属性可以指定当前滚动到的元素 .. 添加一个这样的属性 .. 它的值是个字符串 .. 这里给它绑定一个来自页面的初始数据 .. 名字可以是 currentView

然后再设置一下滚动视图里的这几个组件 .. 都给它们添加一个 id 属性 .. 这个是 red ... 下面这个是 yellow ... 最后这个可以叫 blue ..

打开页面的主逻辑文件 .. 在 data 里面，添加一个 currentView .. 给它一个初始的值 .. 比如 yellow .. 保存 ..

你会发现当前这个滚动视图显示的就是 yellow .. 这个值我们可以动态的去设置一下 .. 先把它设置成 red ..

回到视图 .. 这里可以添加几个按钮组件 ... 用的是 button .. 按钮上的文字是 red .. 再给这个按钮绑定一个 tap 事件 .. 事件处理的名字可以是 setScrollIView ... 然后可以在这个元素上面添加一个自定义的 data 属性 .. 属性的名字可以是 data-view .. 这个按钮的 data-view 的值是 red ..

再添加两个这样的按钮 .. 这个按钮的 data-view 的值是 yellow ... 按钮上的文字也是 yellow .. 下面这个 data-view 是 blue .. 按钮上的文字是 blue ..

这个自定义的 data 属性的值我们可以在事件对象里得到 ..

回到页面的主逻辑文件 .. 添加按钮上用的事件处理 .. 名字是 setScrollView .. 接收一个 event 参数 .. 里面可以用一下 this.setData 去设置一下页面上的数据 .. 设置的数据是 currentView ，把它的值设置成发生 tap 事件上的元素上的自定义的 data-view 这个属性的值 .. 它的值是在 event 里面的 target .. dataset 里面 .. 名字是 view

再把页面上这几个按钮添加点样式 .. 要设置的是 button 组件的样式 .. 给它添加一个外边距，大小是 8px ..

预览

然后到开发者工具去试一下 ... 点一下页面上的按钮 .. 这样会滚动显示对应的元素 ..

注意在 wxml 面板上 . . 滚动视图上的 scroll-into-view 属性的变化 .. 还有 scroll-top 属性的变化 ..

滚动的时候可以添加一个动画效果 .. 在滚动视图上，再添加一个 scroll-with-animation 属性，把它的值设置成 true ..

这样在滚动显示的时候，就会有一个动画效果了 ..