微信小程序：scroll-view滚动视图组件实战案例

一、前言

scroll-view是微信小程序提供的可滚动容器组件，可以实现纵向滚动和横向滚动，在开发商品横向滑动栏、长列表、分类滑动菜单时使用非常广泛。本次案例实现横向滚动与纵向滚动基础效果，并完成扩展需求：横向滚动项由原来3项增加到4项，掌握scroll-view核心属性与布局要点。

二、实现效果说明

1. 纵向scroll-view：垂直方向滚动，展示多条列表；
2. 横向scroll-view：水平方向滚动，一共4个卡片（扩展需求，由3项→4项）；
3. 可以分别监听滚动事件，打印滚动相关信息。

三、完整代码

index.wxml

<view class="container"> <view class="title">scroll-view滚动组件演示</view> <!-- 横向滚动区域 扩展：4个滚动项 --> <view class="sub-title">横向滚动</view> <scroll-view class="scroll-h" scroll-x> <view class="item-h">选项1</view> <view class="item-h">选项2</view> <view class="item-h">选项3</view> <view class="item-h">选项4</view> </scroll-view> <!-- 纵向滚动区域 --> <view class="sub-title">纵向滚动</view> <scroll-view class="scroll-v" scroll-y bindscroll="onScroll"> <view class="item-v">列表内容1</view> <view class="item-v">列表内容2</view> <view class="item-v">列表内容3</view> <view class="item-v">列表内容4</view> <view class="item-v">列表内容5</view> <view class="item-v">列表内容6</view> </scroll-view> </view>

index.wxss

.container { padding: 30rpx; } .title { text-align: center; font-size: 34rpx; margin-bottom: 40rpx; } .sub-title { font-size: 28rpx; margin: 30rpx 0 16rpx; } /* 横向滚动容器 */ .scroll-h { white-space: nowrap; } .item-h { display: inline-block; width: 200rpx; height: 160rpx; background-color: #409eff; color: #fff; text-align: center; line-height: 160rpx; border-radius: 12rpx; margin-right: 20rpx; } /* 纵向滚动容器 */ .scroll-v { height: 400rpx; background: #f5f5f5; } .item-v { height: 80rpx; line-height: 80rpx; padding: 0 20rpx; border-bottom: 1rpx solid #eee; }

index.js

Page({ data: { }, // 监听纵向滚动事件 onScroll(e) { console.log("滚动位置：", e.detail.scrollTop) } })

index.json

{ "usingComponents": {} }

四、核心知识点讲解

1. 核心属性

• scroll-x：开启横向滚动，开启后容器内容可以水平滑动；横向滚动必须搭配white-space:nowrap，子元素设置display:inline-block
• scroll-y：开启纵向滚动，必须给scroll-view设置固定高度，否则无法滚动
• bindscroll：滚动时持续触发的事件，可以拿到scrollTop、scrollLeft等滚动信息
• bindscrolltolower：滚动触底事件，常用于上拉加载更多

✨本次扩展点：在横向滚动里面新增第4个item，从原来3项变成4项，满足作业扩展要求。

2. 容易混淆知识点

• scroll-view 和页面原生滚动的区别：scroll-view是局部容器滚动，不会带动整个页面滚动；
• 纵向滚动一定要给容器写height固定高度，不设置高度，scroll-y失效；
• 横向滚动子元素不能用flex自动换行，需要禁止换行。

五、运行和打包步骤

1. 微信开发者工具新建小程序项目，替换pages/index下四份代码；
2. 编译运行，横向可以左右滑动4个卡片，纵向可以上下滑动列表；
3. 确认横向一共4项，扩展功能完成；
4. 将整个项目文件夹压缩打包，作为附件上传。

六、踩坑总结

1. 横向scroll-x不生效：大概率忘记写white-space:nowrap，子元素被自动换行了；
2. scroll-y纵向不滚动：没有给scroll-view设置固定height；
3. scroll-view里面不建议嵌套原生video、map等原生组件，会有层级和渲染问题；
4. 滚动事件bindscroll会高频触发，里面不要写过重逻辑，避免卡顿。

七、小结

scroll-view是小程序布局中非常常用的容器组件，横向滚动在首页分类、商品横向卡片，纵向滚动用于自定义长列表。本案例掌握基础的横竖滚动用法，并且完成增加横向选项的扩展。在此基础上还可以拓展：滚动到指定位置、下拉刷新、上拉加载更多等常见业务功能。