微信小程序 scroll-view 实现纵向、横向滚动页面

摘要：

本篇是小程序基础组件 scroll-view 练习案例，同时也是课程作业。使用scroll-y实现纵向滚动、scroll-x实现横向滚动，利用 CSS 伪元素::before渲染页面文字，最后在横向滚动区域新增一页，内容为阳光灿烂，保证文字间距、居中样式和原有页面完全统一，附带滚动事件监听。

一、实现效果

1. 纵向滚动区域：包含第 1 页、第 2 页、第 3 页，页面打开自动定位到第二页
2. 横向滚动区域：原有第 1 页、第 2 页、第 3 页，新增第 4 页，棕底色，文字：阳光灿烂
3. 所有页面文字居中、字间距统一，样式风格保持一致
4. 绑定滚动监听事件，滚动触发时控制台打印日志

重点难点：使用伪元素渲染文字，避免 DOM 内部文字重复、排版错乱，新增页面和原有页面样式对齐。

二、项目文件结构

pages/ └── index/ ├ index.wxml ├ index.wxss ├ index.js └ index.json app.wxss

三、完整源代码

1. 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-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-view scroll-x="true" style="width: 100%;" scroll-left="50" class="scroll-view-x sheet" bindscroll="scroll_x"> <view id="page1" class="scroll-view-item-x page1"></view> <view id="page2" class="scroll-view-item-x page2"></view> <view id="page3" class="scroll-view-item-x page3"></view> <!-- 作业拓展新增页面：阳光灿烂 --> <view id="page4" class="scroll-view-item-x page4"></view> </scroll-view> </view> </scroll-view>

2. 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; } .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 { 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 { position: relative; background-color: #d27929; color: #FFFFFF; } .page4::before { content: '阳光灿烂'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .scroll-view-x { white-space: nowrap; }

3. index.js

// index.js Page({ upper(e) { console.log('纵向滚动触顶',e); }, lower(e) { console.log('纵向滚动触底',e); }, scroll_y(e) { console.log('纵向滚动事件',e); }, scroll_x(e) { console.log('横向滚动事件',e); } })

四、核心属性说明

表格

五、踩坑记录（重点！本次作业遇到的问题）

1. ❌ 错误写法：wxml 标签内部写文字 + css 伪元素同时输出文字，造成文字重复两行 ✅ 解决方案：view 标签内部不写任何文字，文字全部交给::before伪元素渲染
2. ❌ 新增页面字间距和前面页面不一致 ✅ 解决方案：统一交给.sheet设置letter-spacing:1.2em，所有页面共用
3. ❌ 横向页面无法并排滚动 ✅ 解决方案：给父容器scroll-view-x设置white-space: nowrap，子元素display:inline-block

六、总结

scroll-view 是小程序非常常用的滚动容器组件，横向、纵向滚动的配置逻辑不同。本次作业在原有三页横向滚动基础上拓展新增一页，重点保证拓展页面和原有页面视觉风格统一，同时理解 CSS 伪元素在小程序中的使用方式，规避文字重复渲染的 bug。