scroll‑view 组件案例实验

一、实验目的

1. 掌握微信小程序scroll‑view滚动视图组件基本用法，实现纵向滚动、横向滚动效果。
2. 理解scroll‑view常用属性：scroll‑y、scroll‑x、scroll‑into‑view、scroll‑left。
3. 掌握滚动事件：bindscrolltoupper、bindscrolltolower、bindscroll，在控制台输出滚动日志。
4. 学会伪类::before+ 位移实现文字居中，完成作业拓展：横向滚动增加 “阳光灿烂” 页面。

实验环境：微信开发者工具，新建项目：不使用云服务、不使用模板，渲染引擎设置webview，支持\n换行。

二、实现效果

1. 页面分为上下两部分：上部分纵向滚动区域，程序初始化自动定位到第二页；下部分横向滚动区域。
2. 纵向：上下滑动视图，滚动到顶部打印to upper，滚动到底部打印to lower，滚动过程持续输出vertical scrolling。
3. 横向：左右滑动，原有第一、二、三页，作业新增棕色背景阳光灿烂第四页；滚动控制台打印Horizontal Scrolling。
4. 每个页面文字在色块内部水平垂直居中。

三、完整项目代码

项目目录结构

├── app.js
├── app.json
├── app.wxss
└── pages
    └── index
        ├── index.js
        ├── index.json
        ├── index.wxml
        └── index.wxss

1.app.js

// app.js
App({
  onLaunch() {
    //小程序生命周期，启动执行
  }
})

2.app.json

{
  "pages": [
    "pages/index/index"
  ],
  "window": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "scroll-view组件",
    "navigationBarBackgroundColor": "#ffffff"
  },
  "style": "v2",
  "renderer": "webview"
}

注意设置renderer:"webview"，Skyline 引擎不支持 text 组件内\n换行。

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.json

{}

5.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>

    <!--纵向滚动容器，初始化滚动到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>

    <!--横向滚动容器，作业新增page4：阳光灿烂-->
    <scroll-view scroll-x="true" 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>

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

/*横向滚动子项：inline‑block实现横向排列*/
.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: #cc7722;
  color: #ffffff;
}
.page4::before {
  content: '阳光灿烂';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

7.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.scroll‑view 组件属性

表格

属性	作用
scroll‑y="true"	开启纵向滚动，必须给 scroll‑view 设置 height 高度，否则滚动失效
scroll‑x="true"	开启横向滚动；父容器设置white‑space:nowrap，子项display:inline‑block才能横向排列
scroll‑into‑view="id"	页面初始化自动滚动到指定 id 子元素；id 不能数字开头
scroll‑left="50"	横向滚动初始偏移距离，单位 px

2. 滚动事件

1. bindscrolltoupper：滚动触达顶部 / 最左边触发；
2. bindscrolltolower：滚动触达底部 / 最右边触发；
3. bindscroll：滚动的每一帧都会持续触发，可以获取滚动位置信息。

3. 色块文字居中技巧

父元素：position:relative;
伪类::before {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
}

原理：先把伪类左上角定位盒子中心点，再使用 translate 自身负向偏移 50%，实现完美水平垂直居中。

伪类content设置显示文字，不需要额外写<text>标签。

五、运行步骤与常见坑

1. 微信开发者工具新建项目，选择不使用云服务，不使用模板。
2. 将上面代码对应粘贴到各个文件。
3. ⚠️重点区分：
   • app.js写App({})；页面index.js写Page({})，不要混淆，否则直接报错。
4. 顶部菜单：工具→清除缓存→清除全部缓存，重新编译。

常见报错

1. Please do not call Page constructor in files that not listed in "pages"

原因：app.js 错误写了 Page ()；解决：app.js 只能写 App ({})。

1. scroll‑view 无法滚动：忘记设置 height 高度。
2. text 中\n换行无效：renderer引擎是 skyline，改成 webview。

六、实验总结

1. scroll‑view 是小程序实现局部滚动的组件，区别页面整体滚动。纵向必须设置高度；横向要处理禁止换行和行内块布局。
2. scroll‑into‑view 可以实现页面加载自动滚动到指定模块。
3. bindscroll 事件会高频触发，业务中不要在里面写过重逻辑。
4. 作业拓展：在横向滚动中增加新的 view，配合 css 伪类完成新增页面，实现多页面横向滑动效果。