企业官网建设流程全解析

在小程序开发中，scroll‑view是实现局部滚动的核心组件，可以实现页面局部区域纵向上下滚动、横向左右滚动，区别于页面整体滚动。本案例演示scroll‑view常用属性、滚动事件监听、scroll‑into‑view自动定位、CSS 伪元素居中布局，同时完成作业拓展，增加横向滚动项。本案例需要配置webview渲染引擎，支持\n换行转义字符。

实现效果

1. 纵向滚动区域，页面初始化自动滚动到第二页，可上下滑动切换 1、2、3 页；滚动到顶部、底部、滚动过程控制台打印日志。
2. 横向滚动区域，初始偏移 50px，可以左右滑动；基础三页，作业拓展新增第四页 “阳光灿烂”。
3. 使用 CSS::before伪元素实现色块文字居中，不在 wxml 中额外写 text 标签。

一、核心知识点

1. scroll‑view 重要属性

表格

2. CSS 伪元素 ::before

• content设置展示文本；
• 父容器position:relative，伪元素position:absolute；
• top:50%;left:50%;transform:translate(-50%,‑50%)实现元素完美居中。

3. 渲染引擎说明

renderer:"webview"：支持\n换行符；Skyline 引擎不识别\n转义换行。

二、新建项目

打开微信开发者工具新建项目：

• 项目名称：scroll‑view组件
• 后端服务：不使用云服务
• 模板选择：不使用模板

三、完整项目代码

app.json

{ "pages": [ "pages/index/index" ], "window": { "navigationBarTextStyle": "black", "navigationStyle": "custom" }, "style": "v2", "renderer": "webview", "componentFramework": "glass-easel", "sitemapLocation": "sitemap.json", "lazyCodeLoading": "requiredComponents" }

pages/index/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> <!--纵向滚动，初始化滚动到id=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‑left=50；作业新增page4阳光灿烂--> <scroll-view scroll-x="true" class="scroll-view-x" 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> >

pages/index/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%); } /*作业拓展：第四页 阳光灿烂*/ .page4 { position: relative; background-color: #d47522; color: #FFFFFF; } .page4::before { content: '阳光灿烂'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } /*横向滚动核心：禁止自动换行*/ .scroll-view-x { white-space: nowrap; }

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; }

pages/index/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'); } })

四、实现效果

五、作业说明

在原有横向滚动基础上新增第四项，橘黄色背景，文字 “阳光灿烂”。

1. wxml 中新增<view class="scroll-view-item-x page4"></view>
2. wxss 补充.page4样式与::before伪元素。

六、常见踩坑汇总

1. scroll‑y 纵向不能滚动✅ 原因：没有给 scroll‑view 设置height固定高度。scroll‑view 局部滚动必须指定高度。
2. scroll‑x 横向无法横向滑动，直接换行✅ 父 scroll‑view 添加white‑space:nowrap；子项设置display:inline‑block，两个条件缺一不可。
3. scroll‑into‑view 不生效✅ 子组件 id 不能以数字开头；id 大小写严格一致。
4. \n换行不生效 ✅ app.json 配置"renderer":"webview"，Skyline 渲染引擎不支持\n转义换行。
5. 复制代码出现乱码�✅ markdown 复制带来不可见零宽字符；清空文件，重新粘贴。

七、总结

scroll‑view是小程序高频组件，用于实现局部滚动，常用于轮播、横向标签、长列表局部滚动。 重点记住：纵向滚动必须设置 height；横向滚动需要inline‑block+white‑space:nowrap；scroll‑into‑view实现自动定位；多个滚动事件可以监听滚动位置与边界。