前言scroll‑view是微信小程序中非常重要的滚动视图组件可以实现纵向滚动和横向滚动很多轮播、长列表、横向滑动卡片都是基于该组件开发。本篇通过完整案例带你掌握 scroll‑view 常用属性、滚动事件、自动定位到指定子元素同时讲解伪元素居中、webview 渲染引擎踩坑点。实现效果页面分为上下两部分上方纵向滚动区域初始化自动定位到第二页下方横向滚动区域初始偏移 50px滚动时控制台打印对应日志支持滚动到顶部、底部触发回调。效果预览纵向滚动可以上下滑动切换第 1、2、3 页页面初始化自动滚动到page2横向滚动可以左右滑动页面滚动监听滑动过程控制台打印滚动日志滚动触达顶部 / 底部会输出提示信息。踩坑提示本案例使用换行符\nSkyline 渲染引擎不支持app.json需要配置renderer:webview。一、新建小程序项目打开微信开发者工具新建项目项目名称scroll‑view组件后端服务不使用云服务模板选择不使用模板填入 AppID点击创建。修改app.json设置 webview 渲染引擎{ pages: [ pages/index/index ], window: { navigationBarTextStyle: black, navigationStyle: custom }, style: v2, renderer: webview, componentFramework: glass‑easel, sitemapLocation: sitemap.json, lazyCodeLoading: requiredComponents }如果是 skyline 渲染引擎\n换行不会生效务必改为 webview。二、编写 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‑y -- 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‑x -- scroll‑view scroll‑xtrue classscroll‑view‑x scroll‑left50 bindscrollscroll_x view classscroll‑view‑item‑x page1/view view classscroll‑view‑item‑x page2/view view classscroll‑view‑item‑x page3/view /scroll‑view /view /scroll‑viewscroll‑view 核心属性说明表格属性说明scroll‑ytrue开启垂直纵向滚动必须设置固定高度才会生效scroll‑xtrue开启水平横向滚动子元素需要inline‑block父容器white‑space:nowrap禁止换行scroll‑into‑viewid自动滚动到指定 id 的子节点id 不能数字开头本案例初始化直接跳到 page2scroll‑left横向滚动初始偏移像素值bindscrolltoupper滚动触达顶部 / 最左边触发bindscrolltolower滚动触达底部 / 最右边触发bindscroll滚动过程持续触发三、编写样式代码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; }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 { /* 相对定位 */ position: relative; background‑color: #1AAD19; color: #FFFFFF; } /* 伪类选择器 */ .page1::before { content: 第一页; /* 绝对定位 */ position: absolute; /* 元素从父元素的顶部向下移动50% */ top: 50%; /* 元素从父元素的最左端往右移动50% */ left: 50%; /* 元素在水平方向上向左移动自身宽度的50%向上移动自身宽度的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%); } .scroll‑view‑x { /* 不换行 */ white‑space: nowrap; }知识点positiontransform:translate(-50%,-50%)实现文字完美居中横向滚动子元素必须inline‑block父容器white‑space:nowrap禁止自动换行否则横向滚动失效。四、编写 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); } })事件说明upper纵向滚动滑到最顶部、横向滚动滑到最左侧触发lower纵向滚动滑到底部、横向滚动滑到最右侧触发scroll_y纵向滚动过程持续执行scroll_x横向滚动过程持续执行在调试器 Console 面板可以观察打印日志。五、作业拓展横向滚动新增页面需求横向滚动视图增加一页背景为土黄色文字 “阳光灿烂”在横向的scroll‑view内部新增 view增加 classview classscroll‑view‑item‑x page4/view在index.wxss增加 page4 样式使用::before伪元素写文字.page4 { position: relative; background‑color: #cc7722; color: #ffffff; } .page4::before{ content:阳光灿烂; position:absolute; top:50%; left:50%; transform: translate(-50%,‑50%); }保存运行横向滑动即可看到新增页面。六、知识点总结表格知识点要点scroll‑y 纵向滚动必须给 scroll‑view 设置固定高度否则滚动无效scroll‑into‑view自动滚动到指定 id 节点scroll‑x 横向滚动子元素display:inline‑block父容器white‑space:nowrap禁止换行scroll‑left设置初始偏移滚动事件bindscrolltoupper 到顶、bindscrolltolower 到底bindscroll 滚动中持续触发CSS 居中技巧relativeabsolutetransform:translate (-50%,‑50%) 完美居中::before 伪元素填充文本渲染引擎坑\n换行符号在 skyline 不支持app.json 改为renderer:webview官方文档参考scroll‑view 组件完整源码说明复制 wxml、wxss、js、app.json 替换对应文件直接编译运行即可体验纵向、横向滚动效果适合小程序初学者练习滚动组件。