登录 |  注册
首页 >  移动开发 >  微信小程序开发教程 >  微信小程序view与scroll-view组件的使用介绍

微信小程序view与scroll-view组件的使用介绍

小程序中的组件也是由宿主环境提供的,开发者可以使用组件快速搭建出页面结构,官方把小程序里的组件分为了9大类,分别是

  1. 视图容器

  2. 基础内容

  3. 表单组件

  4. 导航组件

  5. 媒体组件

  6. map地图组件

  7. canvas画布组件

  8. 开放能力

  9. 无障碍访问

常见的视图容器类组件

1.view

普通视图区域

类似于HTML中的div,是一个块级元素

常用于实现页面的布局效果

2.scroll-view

可滚动的视图区域

常用于实现滚动列表效果

3.swiper和swiper-item

轮播图容器组件和轮播图item组件

视图容器.png

scroll-view 功能描述

可滚动视图区域。使用竖向滚动时,需要给scroll-view一个固定高度,通过 WXSS 设置 height。组件属性的长度单位默认为px,2.4.0起支持传入单位(rpx/px)。

属性说明

Skyline 仅列出与 WebView 属性的差异,未列出的属性与 WebView 一致。

属性说明.png

详见官方文档:https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html

Bug & Tip

  1. tip: 基础库 2.4.0以下不支持嵌套textareamapcanvasvideo 组件

  2. tipscroll-into-view 的优先级高于 scroll-top

  3. tip: 在滚动 scroll-view 时会阻止页面回弹,所以在 scroll-view 中滚动,是无法触发 onPullDownRefresh

  4. tip: 若要使用下拉刷新,请使用页面的滚动,而不是 scroll-view ,这样也能通过点击顶部状态栏回到页面顶部

  5. tip: scroll-view 自定义下拉刷新可以结合 WXS 事件响应 开发交互动画

上一篇: uniapp开发环境搭建
下一篇: scroll-view如何隐藏滚动条
推荐文章
  • 在iOS平台上,操作定位服务通常涉及到以下步骤:启用定位服务:打开iPhone或iPad的设置应用。滚动并找到“隐私”(Privacy)选项,点击进入。在隐私设置中选择“定位服务”(LocationServices)。确保定位服务是开启状态。若要关闭或开启特定应用的定位权限,请在此页面查找对应的应用
  • 在iOS开发中,要实现发送电子邮件的功能,可以使用MFMailComposeViewController类,这是Apple提供的一个内置框架——MessageUI的一部分。以下是在Swift中使用MFMailComposeViewController来发送邮件的基本步骤:实例步骤1、创建一个简单的V
  • iOS故事板(Storyboards)是Apple在iOS5中引入的一种可视化界面构建工具,它允许开发者在一个单一的文件中设计和管理整个应用程序的所有用户界面屏幕以及它们之间的导航关系。故事板通过InterfaceBuilder集成到Xcode开发环境中,为开发者提供了一种直观的方式来组织UI元素、
  • iOS自动布局(AutoLayout)是Apple在iOS6及以后版本引入的一种动态布局系统,用于处理用户界面元素在不同屏幕尺寸和方向下的自适应布局。通过自动布局,开发者可以创建灵活的、可伸缩的UI设计,确保应用在各种iPhone、iPad设备以及不同的屏幕旋转状态下都能保持良好的视觉效果和用户体验
  • ios(InternetworkingOperatingSystem-Cisco,缩写ios,也可写作IOS,区别于苹果系统iOS)iOS是由苹果公司(AppleInc.)开发的一种专有移动操作系统,它为苹果的多款移动设备提供用户界面和底层操作逻辑。最初随iPhone在2007年发布时被称为“iPh
  • 小程序中的组件也是由宿主环境提供的,开发者可以使用组件快速搭建出页面结构,官方把小程序里的组件分为了9大类,分别是视图容器基础内容表单组件导航组件媒体组件map地图组件canvas画布组件开放能力无障碍访问常见的视图容器类组件1.view普通视图区域类似于HTML中的div,是一个块级元素常用于实现
学习大纲