微信小程序scroll-view滚动视图组件实战案例一、前言scroll-view是微信小程序提供的可滚动容器组件可以实现纵向滚动和横向滚动在开发商品横向滑动栏、长列表、分类滑动菜单时使用非常广泛。本次案例实现横向滚动与纵向滚动基础效果并完成扩展需求横向滚动项由原来3项增加到4项掌握scroll-view核心属性与布局要点。二、实现效果说明纵向scroll-view垂直方向滚动展示多条列表横向scroll-view水平方向滚动一共4个卡片扩展需求由3项→4项可以分别监听滚动事件打印滚动相关信息。三、完整代码index.wxmlview classcontainer view classtitlescroll-view滚动组件演示/view !-- 横向滚动区域 扩展4个滚动项 -- view classsub-title横向滚动/view scroll-view classscroll-h scroll-x view classitem-h选项1/view view classitem-h选项2/view view classitem-h选项3/view view classitem-h选项4/view /scroll-view !-- 纵向滚动区域 -- view classsub-title纵向滚动/view scroll-view classscroll-v scroll-y bindscrollonScroll view classitem-v列表内容1/view view classitem-v列表内容2/view view classitem-v列表内容3/view view classitem-v列表内容4/view view classitem-v列表内容5/view view classitem-v列表内容6/view /scroll-view /viewindex.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.jsPage({ data: { }, // 监听纵向滚动事件 onScroll(e) { console.log(滚动位置, e.detail.scrollTop) } })index.json{ usingComponents: {} }四、核心知识点讲解核心属性scroll-x开启横向滚动开启后容器内容可以水平滑动横向滚动必须搭配white-space:nowrap子元素设置display:inline-blockscroll-y开启纵向滚动必须给scroll-view设置固定高度否则无法滚动bindscroll滚动时持续触发的事件可以拿到scrollTop、scrollLeft等滚动信息bindscrolltolower滚动触底事件常用于上拉加载更多✨本次扩展点在横向滚动里面新增第4个item从原来3项变成4项满足作业扩展要求。容易混淆知识点scroll-view 和页面原生滚动的区别scroll-view是局部容器滚动不会带动整个页面滚动纵向滚动一定要给容器写height固定高度不设置高度scroll-y失效横向滚动子元素不能用flex自动换行需要禁止换行。五、运行和打包步骤微信开发者工具新建小程序项目替换pages/index下四份代码编译运行横向可以左右滑动4个卡片纵向可以上下滑动列表确认横向一共4项扩展功能完成将整个项目文件夹压缩打包作为附件上传。六、踩坑总结横向scroll-x不生效大概率忘记写white-space:nowrap子元素被自动换行了scroll-y纵向不滚动没有给scroll-view设置固定heightscroll-view里面不建议嵌套原生video、map等原生组件会有层级和渲染问题滚动事件bindscroll会高频触发里面不要写过重逻辑避免卡顿。七、小结scroll-view是小程序布局中非常常用的容器组件横向滚动在首页分类、商品横向卡片纵向滚动用于自定义长列表。本案例掌握基础的横竖滚动用法并且完成增加横向选项的扩展。在此基础上还可以拓展滚动到指定位置、下拉刷新、上拉加载更多等常见业务功能。
)
