企业官网建设流程全解析

微信小程序 scroll‑view 滚动组件实战完整案例

摘要：scroll‑view 是小程序里非常常用的滚动容器组件，可以实现局部区域纵向、横向滚动，和页面整体滚动效果不一样。本文复现案例 4.8，梳理项目完整实现流程，同时完成拓展作业，在横向滚动板块新增 “阳光灿烂” 页面。

一、认识 scroll‑view 组件

微信小程序默认是整个页面滚动，如果只想让页面当中某一块独立区域实现滚动，就需要使用 scroll‑view 组件。 它两大核心功能：开启纵向上下滚动、开启横向左右滚动。

常用属性作用： scroll‑into‑view：可以让容器自动滚动到指定 id 的子元素，注意 id 不能用数字开头。 scroll‑left：设置横向滚动的初始偏移距离。 bindscrolltoupper：滚动滑到顶部或者最左边的时候触发。 bindscrolltolower：滚动滑到底部或者最右边的时候触发。 bindscroll：只要在滚动滑动的过程中，就会持续触发事件。

小提示：Skyline 渲染引擎不支持文本换行符，本案例需要更换渲染引擎为 webview。

二、新建小程序项目

创建全新小程序项目，不开启云服务，不选用官方模板。项目命名为 scroll‑view 组件。 修改 app.json 配置文件，把渲染器设置为 webview。

三、页面结构设计

页面整体分为上下两大板块。上方是纵向滚动区域，页面刚打开的时候，直接定位展示第二页；下方为横向滚动区域，在原来三页的基础上，额外增加一页 “阳光灿烂”。

开发要点：

1. 通过属性配置，页面加载完成后，纵向滚动容器会自动跳转到第二页。
2. 想要实现横向滚动，子元素要设置为行内块显示模式，外层容器设置禁止自动换行，否则横向滚动无法生效。
3. 页面绑定滚动相关的各类事件，滚动触发后的逻辑写在 js 逻辑文件中。

四、样式设计思路

全局样式给外层盒子设置外边距、内边距和边框，标题设置红色、加粗并且居中展示。

页面内部样式：

1. 页面根页面采用 flex 纵向布局，撑满整个屏幕高度。
2. 滚动板块设置高度，滚动子块统一设置高度。
3. 利用 CSS 伪类选择器 before，不需要写文本标签，直接在色块中间显示页面文字内容，通过定位加 transform，让文字在色块内水平垂直居中。
4. 原有第一、二、三页分别配置绿色、蓝色、紫色背景。拓展新增的第四页使用橙色背景，文字内容为阳光灿烂。
5. 横向滚动容器设置不换行样式，保证多个色块横向排列。

五、逻辑层功能

编写事件处理函数，分别对应：滚动触达顶部、滚动触达底部、纵向滚动滑动过程、横向滚动滑动过程。 每次触发对应滚动事件，就会在开发者工具控制台输出对应的提示文字，方便调试观察滚动行为。

六、运行实现效果

1. 小程序刚打开，纵向滚动区域默认展示第二页，横向滚动区域会同时露出第一页和第二页一小部分。
2. 上下拖动纵向滚动区域，可以在第一页、第二页、第三页之间来回切换。
3. 左右拖动横向滚动区域，可以滑动浏览原有三页，还能滑到新增的橙色背景 “阳光灿烂” 页面。
4. 滑动滚动容器，控制台会不断打印滚动相关信息；当滑动到滚动区域最顶端或者最底端，控制台会输出到达边界的提示。

七、开发踩坑总结

1. scroll‑view 想要正常滚动，必须给容器设置明确的高度，否则滚动功能失效。
2. 做横向滚动的时候，子元素和父容器样式要配套，子元素行内块，父容器禁止换行，缺一不可。
3. scroll‑into‑view 指向的 id，不能用数字作为开头。
4. 如果文本需要使用换行符号，渲染引擎要改成 webview，Skyline 引擎不支持该写法。