摘要本篇是小程序基础组件 scroll-view 练习案例同时也是课程作业。使用scroll-y实现纵向滚动、scroll-x实现横向滚动利用 CSS 伪元素::before渲染页面文字最后在横向滚动区域新增一页内容为阳光灿烂保证文字间距、居中样式和原有页面完全统一附带滚动事件监听。一、实现效果纵向滚动区域包含第 1 页、第 2 页、第 3 页页面打开自动定位到第二页横向滚动区域原有第 1 页、第 2 页、第 3 页新增第 4 页棕底色文字阳光灿烂所有页面文字居中、字间距统一样式风格保持一致绑定滚动监听事件滚动触发时控制台打印日志重点难点使用伪元素渲染文字避免 DOM 内部文字重复、排版错乱新增页面和原有页面样式对齐。二、项目文件结构pages/ └── index/ ├ index.wxml ├ index.wxss ├ index.js └ index.json app.wxss三、完整源代码1. index.wxml!--index.wxml-- navigation-bar titlescroll-view组件 back{{false}} colorblack background#FFF/navigation-bar scroll-view classscrollarea scroll-y typelist view classbox view classtitle滚动视图示例/view view classpage-section-title textVertical Scroll\n纵向滚动/text /view scroll-view scroll-ytrue styleheight: 300rpx; classsheet scroll-into-viewpage2 bindscrolltoupperupper bindscrolltolowerlower bindscrollscroll_y view idpage1 classscroll-view-item-y page1/view view idpage2 classscroll-view-item-y page2/view view idpage3 classscroll-view-item-y page3/view /scroll-view view classpage-section-title textHorizontal Scroll\n横向滚动/text /view scroll-view scroll-xtrue stylewidth: 100%; scroll-left50 classscroll-view-x sheet bindscrollscroll_x view idpage1 classscroll-view-item-x page1/view view idpage2 classscroll-view-item-x page2/view view idpage3 classscroll-view-item-x page3/view !-- 作业拓展新增页面阳光灿烂 -- view idpage4 classscroll-view-item-x page4/view /scroll-view /view /scroll-view2. 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); } })四、核心属性说明表格属性作用scroll-y开启纵向滚动纵向滚动必须给容器固定高度scroll-x开启横向滚动横向滚动需要配合white-space: nowrapscroll-into-view页面加载自动滚动到指定 id 元素bindscroll滚动过程持续触发bindscrolltoupper滚动到顶部触发bindscrolltolower滚动到底部触发五、踩坑记录重点本次作业遇到的问题❌ 错误写法wxml 标签内部写文字 css 伪元素同时输出文字造成文字重复两行 ✅ 解决方案view 标签内部不写任何文字文字全部交给::before伪元素渲染❌ 新增页面字间距和前面页面不一致 ✅ 解决方案统一交给.sheet设置letter-spacing:1.2em所有页面共用❌ 横向页面无法并排滚动 ✅ 解决方案给父容器scroll-view-x设置white-space: nowrap子元素display:inline-block六、总结scroll-view 是小程序非常常用的滚动容器组件横向、纵向滚动的配置逻辑不同。本次作业在原有三页横向滚动基础上拓展新增一页重点保证拓展页面和原有页面视觉风格统一同时理解 CSS 伪元素在小程序中的使用方式规避文字重复渲染的 bug。