一、实现效果页面分为上下两个演示区域上方为纵向滚动视图页面初始化自动滚动定位到第二页可以上下滑动切换页面滚动时控制台输出日志。下方为横向滚动视图带有初始偏移支持左右滑动浏览内容在原有三页基础上额外新增一页展示 “阳光灿烂”。滚动过程、滚动触达顶部 / 左边界、滚动触达底部 / 右边界都会触发对应的回调在开发者工具控制台打印信息。使用 CSS::before伪元素实现块内文字居中不需要在 wxml 中书写文本节点。二、核心知识点scroll‑view 重要属性表格属性作用scroll‑ytrue开启纵向滚动容器需要设置明确高度scroll‑xtrue开启横向滚动scroll‑into‑viewid值自动滚动到对应 id 的子元素id 不能以数字开头scroll‑left横向滚动条初始位置单位 pxbindscrolltoupper滚动到顶部 / 最左侧时触发bindscrolltolower滚动到底部 / 最右侧时触发bindscroll滚动过程中持续触发事件横向滚动必备 CSS 要点父滚动容器设置white‑space: nowrap;禁止子元素自动换行。子元素设置display: inline‑block;实现多个块级元素横向排列。文字垂直水平居中采用「父相对定位 伪元素绝对定位 transform 偏移」方案position:relative; /*父容器*/ /*伪元素*/ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);三、完整项目代码app.json{ pages: [ pages/index/index ], window: { navigationBarTextStyle: black, navigationStyle: custom }, style: v2, renderer: 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-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 styleheight:300rpx; classsheet scroll-view-x scroll-left50 bindscrolltoupperupper bindscrolltolowerlower bindscrollscroll_x view classscroll-view-item-x page1/view view classscroll-view-item-x page2/view view classscroll-view-item-x page3/view view classscroll-view-item-x page4/view /scroll-view /view /scroll-viewindex.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); } })index.wxss/**index.wxss**/ page { height: 100vh; 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; 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%); } .scroll-view-x { white-space: nowrap; } /*拓展新增阳光灿烂*/ .page4 { position: relative; background-color: #d47b29; color: #FFFFFF; } .page4::before { content: 阳光灿烂; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }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; }四、代码逻辑拆解页面初始化纵向滚动容器通过scroll‑into‑viewpage2页面加载完成自动滚动到 id 为page2的模块。横向滚动设置scroll‑left50实现初始位置偏移。事件监听bindscrolltoupper滚动滑到最上或者最左边输出to upper。bindscrolltolower滚动滑到最下或者最右边输出to lower。bindscroll只要发生滚动就持续执行回调区分纵向、横向分别打印日志。伪元素渲染文字所有页面文字全部由 CSS 伪元素content输出wxml 只写结构标签通过绝对定位 transform 完成居中。拓展新增模块在横向滚动内部增加 page4 节点配套编写 page4 样式实现橙色背景的 “阳光灿烂” 页面。五、开发中常见问题scroll‑into‑view 不生效被跳转的子元素 id 不能以数字开头scroll‑view 必须设置明确宽 / 高。横向滚动失效元素竖直排列父容器缺少white‑space:nowrap子元素没有设置display:inline‑block。复制 PPT 粘贴代码出现事件找不到复制带入看不见的中文全角空格破坏 wxml 属性解析重新粘贴干净英文半角代码即可。\n换行无效Skyline 引擎不支持切换为 webview 渲染引擎。六、业务拓展思考scroll‑view 在实际项目中使用场景非常多横向商品卡片滑动、标签栏横向滚动弹窗内部局部滚动列表自定义轮播组件基础容器。注意scroll‑view 适合小范围局部滚动如果是整个页面长列表优先使用页面原生滚动不要用 scroll‑view 包裹整个页面。