微信小程序常用视图容器组件如何使用
这篇文章主要讲解了"微信小程序常用视图容器组件如何使用"，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习"微信小程序常用视图容器组件如何使用"吧！
1、组件概述
组件是视图层基本的组成单元，具备UI风格样式以及特定的功能效果。当打开某款小程序之后，界面中的图片、文字等元素都需要使用组件，小程序组件使用灵活，组件之间通过相互嵌套进行界面设计，开发者可以通过组件的选择和样式属性设计出不同的界面效果。一个组件包括开始标签和结束标签，属性用来装饰这个组件的样式。
其语法格式如下：
<标签名称 属性="值">
内容
2、常用的试图容器组件
视图容器(View Container)组件用于排版页面为其他组件提供载体。常用视图容器有View、scroll-view和swiper等等。
2.1 view
view容器是页面中最基本的容器组件，通过高度和宽度来定义容器大小。 属性如下表所示 2.1.1 案例 本例设计了两组父子view容器的点击态，第一组父子view容器种子view容器不阻止点击态向父容器传递，第二组父子view容器中子view容器阻止点击态向父容器传递， pages/view/view.wxml代码如下： pages/view/view.wxss代码如下： app.wxss 页面初始效果 点击第1组子容器 点击第2组子容器 在view.wxml种放置两组 scroll-view容器为可滚动的视图容器，允许用户通过手指在容器上滑动来改变显示区域，常见的滑动方向有水平滑动和垂直滑动。其属性表如下所示。 注意：在使用纵向滚动时，需要为设置一个固定宽度 2.2.1 案例 pages/scroll-view/scroll-view.wxml pages/scroll-view/scroll-view.wxss 本例在scroll-view.wxml文件中设置组件，通过设置属性scroll-y,允许组件上下滑动，在scroll-view.wxss文件中设置其高度为600rpx，使得scroll-view组件能够纵向滑动，在中嵌套6组用于显示滚动效果，内部元素宽度均为250rpx。 滑动前： 滑动后： 2.3.1 案例 效果图： pages/swiper/swiper.wxml pages/swiper/swiper.wxss 本例在swiper.wxml文件中放置 感谢各位的阅读，以上就是"微信小程序常用视图容器组件如何使用"的内容了，经过本文的学习后，相信大家对微信小程序常用视图容器组件如何使用这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是，小编将为大家推送更多相关知识点的文章，欢迎关注！.view-parent { width: 100%; height: 350rpx; background-color: pink; text-align: center;}.view-son { width: 50%; height: 200rpx; background-color: skyblue; margin: 20rpx auto; text-align: center;}.view-hover { background-color: red;}.demo-box { padding: 20rpx; margin: 20rpx 60rpx; border: 1rpx solid gray;}.title { display: flex; flex-direction: row; margin: 20rpx; justify-content: center;}
2.2 scroll-view
scroll-view { height: 600rpx; width: 250rpx; margin: 0 auto;}.scroll-item-y { height: 200rpx; line-height: 200rpx; text-align: center; background-color: skyblue; border: 1px solid gray;}2.3 swiper
swiper { height: 350rpx;}
