一.前言
scroll‑view是微信小程序内置滚动视图组件，可以实现纵向滚动、横向滚动，不需要使用页面原生滚动。本次完成案例 4.8 课程作业，实现纵向三页滚动、横向四页滚动，横向额外增加一页【阳光灿烂】；滚动时控制台输出日志；页面初始化纵向自动定位到第二页，横向初始偏移 50px。
注意：本案例使用
\n换行符，需要在app.json配置"renderer":"webview"WebView 渲染引擎，Skyline 引擎不支持该换行语法。
二. scroll‑view 核心属性
纵向滚动相关
表格
| 属性 | 作用 |
|---|---|
scroll‑y="true" | 开启纵向滚动，必须设置 scroll‑view 固定高度，否则滚动无效 |
scroll‑into‑view="id值" | 自动滚动到指定 id 的子元素，id 不能以数字开头 |
bindscrolltoupper | 滚动到达顶部触发事件 |
bindscrolltolower | 滚动到达底部触发事件 |
bindscroll | 滚动过程中持续触发 |
横向滚动相关
表格
| 属性 | 作用 |
|---|---|
scroll‑x="true" | 开启横向滚动 |
scroll‑left="数值" | 横向滚动初始偏移距离，单位 px |
横向滚动两个关键 CSS 要求：
- scroll‑view 父标签设置
white‑space:nowrap;禁止换行； - 直接子元素设置
display:inline‑block;，元素才会横向排成一排。
CSS 伪元素 ::before
本案例使用::before伪元素实现页面文字，不需要额外嵌套 text 标签：
content:'文字'设置显示文本；position:absolute; top:50%; left:50%; transform:translate(-50%,‑50%)实现文字完全居中。
三.完整源代码实现
1.app.json
{ "pages": [ "pages/index/index" ], "window": { "navigationBarTextStyle": "black", "navigationStyle": "custom" }, "style": "v2", "renderer": "webview" }关键点：
"renderer":"webview"，兼容\n换行语法。
2.index.wxml
<!--index.wxml--> <navigation-bar title="scroll-view组件" back="{{false}}" color="black" background="#FFF"></navigation-bar> <scroll-view class="scrollarea" scroll-y type="list"> <view class="box"> <view class="title">滚动视图示例</view> <view class="page-section-title"> <text>Vertical Scroll\n纵向滚动</text> </view> <!--纵向滚动scroll‑y，初始定位page2 --> <scroll-view scroll-y="true" style="height: 300rpx;" class="sheet" scroll-into-view="page2" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll_y"> <view id="page1" class="scroll-view-item-y page1"></view> <view id="page2" class="scroll-view-item-y page2"></view> <view id="page3" class="scroll-view-item-y page3"></view> </scroll-view> <view class="page-section-title"> <text>Horizontal Scroll\n横向滚动</text> </view> <!--横向滚动scroll‑x，scroll‑left初始偏移50px；作业新增page4阳光灿烂 --> <scroll-view scroll-x="true" class="scroll-view-x sheet" scroll-left="50" bindscroll="scroll_x"> <view class="scroll-view-item-x page1"></view> <view class="scroll-view-item-x page2"></view> <view class="scroll-view-item-x page3"></view> <!--====作业新增：第四页阳光灿烂====--> <view class="scroll-view-item-x page4"></view> </scroll-view> </view> </scroll-view>代码解析
- 纵向
scroll‑into‑view="page2"页面加载完成自动滚动到 id 为page2的元素。 - 横向滚动增加第四页
page4，完成作业拓展要求。 bindscroll系列事件绑定滚动回调函数。
3.index.js
// index.js Page({ /** * 滚动到顶部/左边触发 */ upper(e) { console.log('to upper'); }, /** * 滚动到底部/右边触发 */ lower(e) { console.log('to lower'); }, /** * 纵向滚动过程持续触发 */ scroll_y(e) { console.log('vertical scrolling'); }, /** * 横向滚动过程持续触发 */ scroll_x(e) { console.log('Horizontal Scrolling'); } })JS 说明：滚动时控制台打印对应日志，可以打开调试器 Console 面板观察输出信息。
4.index.wxss
/**index.wxss**/ page { height: 100vh; /* flex布局 */ display: flex; /* 按纵向排列 */ flex-direction: column; } .scrollarea { flex: 1; overflow-y: hidden; } .page-section-title { font-size: 40rpx; text-align: center; margin-top: 40rpx; margin-bottom: 20rpx; } .scroll-view-item-y { height: 300rpx; } .scroll-view-item-x { /* 创建了一个内联级块容器，横向滚动必须用inline‑block */ display: inline-block; width: 100%; height: 300rpx; } .sheet { font-size: 50rpx; /* 字符间距 */ letter-spacing: 1.2em; } .page1 { /* 相对定位 */ position: relative; background-color: #1AAD19; color: #FFFFFF; } .page1::before { content: '第一页'; /* 绝对定位 */ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .page2 { position: relative; background-color: #2782D7; color: #FFFFFF; } .page2::before { content: '第二页'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .page3 { position: relative; background-color: purple; color: #FFFFFF; } .page3::before { content: '第三页'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } /* ==========【作业新增样式 page4 阳光灿烂】========== */ .page4 { position: relative; background-color: #d47e28; /*土黄色，匹配截图 */ color: #FFFFFF; } .page4::before { content: '阳光灿烂'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .scroll-view-x { /* 横向滚动禁止自动换行 white‑space:nowrap */ white-space: nowrap; }5.app.wxss
/**app.wxss**/ .box { /* 设置外边距 */ margin: 20rpx; /* 设置内边距 */ padding: 20rpx; /* 设置边框 */ border: 2rpx solid silver; } .title { /* 设置字体大小 */ font-size: 40rpx; /* 设置字体加粗 */ font-weight: bolder; /* 设置居中对齐 */ text-align: center; /* 设置下外边框 */ margin-bottom: 30rpx; /* 设置字体颜色 */ color: red; }四.运行效果
- 页面打开，纵向滚动视图自动定位在第二页（蓝色）；横向视图初始偏移 50px，可以看到第一页部分区域。
- 纵向滚动：上下滑动切换第一、二、三页；滚动到顶部控制台打印
to upper，滚动到底部打印to lower，滚动过程打印vertical scrolling。 - 横向滚动：一共 4 页，最后一页土黄色页面，居中文字阳光灿烂；滚动时控制台打印
Horizontal Scrolling。
五.开发踩坑记录
- ❌纵向滚动失效：
scroll‑y="true"时，scroll‑view 必须写固定 height 高度，否则不会滚动。 - ❌横向滚动元素垂直堆叠，无法横向排列：忘记设置
white‑space:nowrap，或者子元素没有写display:inline‑block。 - ❌
scroll‑into‑view不生效：id 以数字开头，或者 id 前后有空格。 - ❌
\n换行无效：app.json没有配置"renderer":"webview"，Skyline 渲染引擎不支持\n换行。 - ❌伪元素文字无法居中：缺少
transform: translate(-50%,‑50%)，只有 top、left:50% 不能完成居中。
六.拓展思考题
- 如果希望横向滚动页面加载完成直接跳到第四页，需要设置哪个属性？
答案：给横向 scroll‑view 设置合适
scroll‑left像素值。
bindscrolltoupper什么时候触发？
答案：scroll‑view 滚动到达最顶部边界的时候触发。
博客结语 scroll‑view 组件用来实现局部区域滚动，而不是整个页面滚动。纵向滚动注意设置固定高度，横向滚动记住
white‑space:nowrap与inline‑block的组合，配合滚动事件可以实现轮播、局部滑动容器等常见小程序业务。
