一、实验简介
本项目使用微信小程序scroll-view滚动视图组件，分别实现纵向滚动与横向滚动效果。
一共准备 4 张色彩卡片，卡片文字分别为：薄荷绿、冰晶蓝、葡萄紫、羽奕燃橙。
纵向区域放置前 3 张卡片，横向区域放置全部 4 张卡片，打开页面时纵向视图默认定位到第二张「冰晶蓝」卡片，同时监听滚动相关事件，在控制台打印滚动日志。
核心知识点：
scroll-view组件，scroll-y开启纵向滚动、scroll-x开启横向滚动scroll-into-view打开页面自动滚动到指定 id 元素- 滚动事件：
bindscrolltoupper滚到顶部、bindscrolltolower滚到底部、bindscroll滚动持续触发 - CSS 伪元素
::before实现卡片文字居中展示 white-space: nowrap禁止文字换行，保证文字在同一行展示- 横向滚动布局技巧：
inline-block+white-space:nowrap实现横向并排滑动
二、项目新建步骤
打开微信开发者工具新建小程序项目：
- 项目名称：scroll-view 色彩滚动卡片
- 后端服务：不使用云服务
- 模板：不使用模板
⚠️ 重要：app.json 需要配置渲染器
renderer":"webview"
三、完整源代码
1. pages/index/index.wxml
<!--index.wxml--> <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> <!--纵向滚动：默认定位到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 --> <scroll-view scroll-x="true" style="height:300rpx;" 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>2. pages/index/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 { /* 创建了一个内联级块容器 */ display: inline-block; width: 100%; height: 300rpx; } .sheet { font-size: 50rpx; /* 字符间距 */ letter-spacing: 1.2em; } /* page1 绿色 */ .page1 { position: relative; background-color: #1AAD19; color: #FFFFFF; } .page1::before { content: '薄荷绿'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } /* page2 蓝色 */ .page2 { position: relative; background-color: #2782D7; color: #FFFFFF; } .page2::before { content: '冰晶蓝'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } /* page3 紫色 */ .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: #d27822; color: #ffffff; } .page4::before { content: '羽奕燃橙'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .scroll-view-x { /* 不换行 */ white-space: nowrap; }3. 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; }4. pages/index/index.js
// index.js Page({ /** * 滚动到顶部触发 */ upper(e) { console.log('滚动到达顶部'); }, /** * 滚动到底部触发 */ lower(e) { console.log('滚动到达底部'); }, /** * 纵向滚动持续触发 */ scroll_y(e) { console.log('纵向滚动中'); }, /** * 横向滚动持续触发 */ scroll_x(e) { console.log('横向滚动中'); } })5. app.json
{ "pages": [ "pages/index/index" ], "window": { "navigationBarTextStyle": "black", "navigationBarTitleText": "scroll‑view组件" }, "style": "v2", "renderer": "webview", "sitemapLocation": "sitemap.json" }四、运行操作说明
- 将上述代码依次复制粘贴到对应文件，覆盖原有内容；
- 点击「清除缓存」，重新编译项目；
- 纵向滚动区域：打开自动定位到冰晶蓝卡片，上下滑动切换薄荷绿、冰晶蓝、葡萄紫；
- 横向滚动区域：可以左右滑动，依次查看薄荷绿、冰晶蓝、葡萄紫、羽奕燃橙四张卡片；
- 打开调试器，滑动卡片时，可以在 Console 控制台看到滚动打印信息。
五、重点代码解析
scroll-into-view="page2"
页面加载完成，自动滚动到 id 等于 page2 的元素，也就是冰晶蓝卡片。
注意：目标元素必须设置 id 属性，不能使用 class。
letter-spacing: 1.2em;
设置文字字符间距，拉开每个文字之间的距离，实现文字分散排布的效果。- CSS 伪元素
::before
不需要在 wxml 里面写文字，直接通过 css 的 content 属性设置卡片文字，配合绝对定位top:50%;left:50%;transform:translate(-50%,-50%)实现文字完美居中。 - 横向滚动必备布局
- 父容器 scroll-view 开启 scroll-x=“true”，加上 white-space:nowrap
- 子卡片设置 display:inline-block，卡片才能横向并排摆放
- 滚动事件区别
bindscrolltoupper：滚到最顶端才触发一次bindscrolltolower：滚到最底端才触发一次bindscroll：只要拖动滚动，就会持续不断触发
六、实验总结
本次作业使用 scroll-view 组件完成纵向、横向两种滚动效果，新增第四张羽奕燃橙卡片。
通过 css 控制卡片样式与文字排版，利用letter-spacing拉开文字间距，实现分散文字效果。
同时学会监听滚动系列事件，理解小程序中滚动组件的布局规则，横向滚动和纵向滚动的布局方式有明显区别，横向滚动需要开启不换行样式才能正常滑动。
