【愚公系列】《微信小程序开发解析》006-视图容器组件

愚公搬代码

已于 2024-07-22 00:47:38 修改

阅读量6.6w

点赞数 21

分类专栏：愚公系列-商业合作文章标签：微信小程序小程序

于 2024-07-10 21:32:33 首次发布

本文链接：https://blog.csdn.net/aa2528877987/article/details/140334896

版权

在这里插入图片描述

🏆 作者简介，愚公搬代码
🏆《头衔》：华为云特约编辑，华为云云享专家，华为开发者专家，华为产品云测专家，CSDN博客专家，CSDN商业化专家，阿里云专家博主，阿里云签约作者，腾讯云优秀博主，腾讯云内容共创官，掘金优秀博主，亚马逊技领云博主，51CTO博客专家等。
🏆《近期荣誉》：2022年度博客之星TOP2，2023年度博客之星TOP2，2022年华为云十佳博主，2023年华为云十佳博主等。
🏆《博客内容》：.NET、Java、Python、Go、Node、前端、IOS、Android、鸿蒙、Linux、物联网、网络安全、大数据、人工智能、U3D游戏、小程序等相关领域知识。
🏆🎉欢迎 👍点赞✍评论⭐收藏

🚀前言

在微信小程序开发中，视图容器组件是构建用户界面的基础模块。它们不仅用于布局和组织页面内容，还能实现许多复杂的交互效果。无论是简单的页面布局，还是复杂的界面设计，视图容器组件都扮演着不可或缺的角色。

本篇文章将深入探讨微信小程序中的视图容器组件，详细介绍其主要类型、使用方法以及在实际开发中的应用场景。我们将通过实例代码，帮助大家快速掌握这些组件的使用技巧，提高开发效率。同时，还会分享一些常见问题的解决方案以及最佳实践，希望能对各位开发者有所帮助。

无论你是微信小程序开发的新手，还是有一定经验的开发者，相信这篇文章都能为你提供有价值的参考资料。让我们一起来探索微信小程序视图容器组件的奥秘吧！

🚀一、视图容器组件

🔎1.scrooll-view组件

scroll-view 是微信小程序中一个用于实现可滚动视图区域的组件。它可以在一定范围内滚动显示内容，常用于实现列表、长文本等内容的滚动显示。下面将详细介绍 scroll-view 组件的参数以及使用案例。

🦋1.1 参数说明

scroll-view 组件有很多属性，可以用来控制滚动行为和样式。以下是一些常用的属性：

scroll-x：布尔值，表示是否开启横向滚动。
scroll-y：布尔值，表示是否开启纵向滚动。
upper-threshold：数值，距离顶部/左边多远时（单位px），触发 scrolltoupper 事件。
lower-threshold：数值，距离底部/右边多远时（单位px），触发 scrolltolower 事件。
scroll-top：数值，设置竖向滚动条位置。
scroll-left：数值，设置横向滚动条位置。
scroll-into-view：字符串，值应为某子元素的id，设置滚动到该元素。
scroll-with-animation：布尔值，表示是否使用动画过渡。
enable-back-to-top：布尔值，iOS点击状态栏、安卓双击标题栏时，滚动条返回顶部，只支持竖向。
enable-flex：布尔值，启用 flexbox 布局。
scroll-anchoring：布尔值，开启 scroll-anchoring 特性。
refresher-enabled：布尔值，是否启用自定义下拉刷新。
refresher-threshold：数值，自定义下拉刷新阈值。
refresher-default-style：字符串，自定义下拉刷新默认样式，有效值为 black、white、none。

🦋1.2 事件

bindscrolltoupper：滚动到顶部/左边时触发。
bindscrolltolower：滚动到底部/右边时触发。
bindscroll：滚动时触发。
bindrefresherpulling：自定义下拉刷新控件被下拉。
bindrefresherrefresh：自定义下拉刷新被触发。
bindrefresherrestore：自定义下拉刷新复位。
bindrefresherabort：自定义下拉刷新被中止。

🦋1.3 使用案例

☀️1.3.1 简单的纵向滚动视图

<view class="container">
  <scroll-view scroll-y="true" style="height: 300px;">
    <view class="scroll-item">Item 1</view>
    <view class="scroll-item">Item 2</view>
    <view class="scroll-item">Item 3</view>
    <view class="scroll-item">Item 4</view>
    <view class="scroll-item">Item 5</view>
  </scroll-view>
</view>

/* index.wxss */
.container {
   
  display: flex;
  justify-content: center;
  align-items: center;
}

.scroll-item {
   
  height: 100px;
  line-height: 100px;
  text-align: center;
  background-color: #f1f1f1;
  margin-bottom: 10px;
}

在这里插入图片描述

☀️1.3.2 带有下拉刷新功能的滚动视图

<view class="container">
  <scroll-view 
    scroll-y="true" 
    style="height: 300px;" 
    refresher-enabled="true"
    refresher-threshold="50" 
    bindrefresherrefresh="onRefresherRefresh">
    <view class="scroll-item">Item 1</view>
    <view class="scroll-item">Item 2</view>
    <view class="scroll-item">Item 3</view>
    <view class="scroll-item">Item 4</view>
    <view class="scroll-item">Item 5