小程序3。

第三天；
学习小程序开发中容器组件的应用。容器组件主要的作用是作为容器，同热和其他的组件的组合和布局。
组件的通用属性：

属性名	意义	值类型
id	组件的标识	字符串
class	组件设置的类	字符串
style	动态设置组建的风格样式	字符窜
hidden	设置组件是否隐藏	布尔值
data-*	*一个通配符，用来设置组件的用户数据，并进行组件传值	任意类型值
bind*/catch*	*一个通配符这些属性用来为组件添加用户交互方法	事件处理的方法对象

view视图组件，
view常用来作为布局容器，用来布局和组合子组件
view视图组件中提供的常用属性

属性名	意义	值得类型
hover-class	设置按下时class的类	字符窜
hover-stop-propagation	是否拦截父组件的点击状态	布尔值
hover-start-time	设置手指按下多长时间后组件出现点击状态	数值，单位ms
hover-stay-time	设置手指松开后多长时间取消点击状态	数值，单位ms

组件flex列布局

<!--view-->
<view class="container">
<view class="sub-view">7</view>
<view class="sub-view">4</view>
<view class="sub-view">1</view>
</view>

/*flex*/
.container{
  display: flex;
  flex-direction: column;
}
.sub-view{
  background-color: red;
  margin-top: 50rpx;
  height: 50rpx;
}

flex列布局，这种布局模式下，可以将布局容器想象成一个弹性盒子其尺寸大小由其子组件大小决定。子组件的宽度高度会将父组件撑满。使用felx布局需要将组件样式表中的display属性设置为flex
flex布局的几个重要属性。

属性名	意义	值得属性
flex-dirction	子组件的排列方式	row：行布局，子元素从左向右排列 。row-reverse：行布局，子组件从右向左排列。。column：列布局，子元素从上向下排列。column-reverse：列布局，子元素从下向上排列
flex-wrap	设置换行模式	默认值nowarp：不换行，warp当元素尺寸溢出时会进行换行，warp-reverse：逆向换行即在第一行下
justify-content	子元素在主轴的对齐方式	flex-start：表示右对齐。flex-end：右对齐。center：居中对齐。space-between：两端对齐 space-around：等间隔对齐
align-items	元素在次轴上的对齐方式，次轴方向与主轴方向垂直	flex-start：正向对齐，行布局从左到右，列布局从上到下。flex-end：对齐方式与flex-start对齐方式相反。center居中对齐
align-content	多个轴线，对齐方式	stretch内容整体充满。flex-start：正向对齐。flex-end：逆向对齐。center：居中对齐。space-between：两端对齐。 space-around：等间隔对齐

flex布局相关属性

属性名	意义	值的类型
order	设置子组件的排列方式，值越小，排序越靠前	值得类型
flex-grow	设置子组件是否自动放大	默认值为0：剩余空间也不放大，设置值为1：则放大
flex-shrink	设置组件是否自动缩小	默认值为1：空间不足则会自动缩小，设置值为0，则不会放大
align-self	覆盖父容器的align-items的属性	与align-items的属性的取值一样

可滚动的容器视图组件

小程序框架提供很好的延展性。即使不使用滚动容器组件，当内容的区域的尺寸大于窗口尺寸，内容区域变得可滚动，小程序的框架也提供了一些可滚动的区域组件。
可滚动容器组件：scroll-view滚动视图组件，使用时必须规定尺寸大小即：width和height的属性。例如

<!--可滚动视图组件-->
<scroll-view class="scrool" scroll-y>
<view class="sub-view">1</view>
<view class="sub-view">1</view>
<view class="sub-view">1</view>
<view class="sub-view">1</view>
<view class="sub-view">1</view>
</scroll-view>

.scrool{
  width: 200rpx;
  height: 500rpx;
}
.sub-view{
  height: 300rpx;
  width: 300rox;
  margin-top: 80rpx;
  background-color: rgb(183, 105, 255);
}

上述代码，scroll-view可以在竖直方向滚动。

scroll-y	竖直方向滚动
scroll-x	水平方向滚动

scroll-view组件的属性

注意的是
滚动动画必须设置明确的尺寸
scroll-into-view定位属性优先级高于scroll-top/scroll-left
scroll-top/scroll-left设置的值必须为数值，不能带单位

swiper轮播组件

swiper是更高级的滚动组件，swiper轮播组件的自动播放，滑动交互，面板知识进行封装十分方便。例如

<!--swiper轮播组件-->
<swiper>
<!--swiper轮播组件中的子视图必须包装为swiper-item组件-->
<swiper-item skip-hidden-item-layout="0">
<view class="item0">555</view>
</swiper-item>
<swiper-item skip-hidden-item-layout="1">
<view class="item1">555</view>
</swiper-item>
<swiper-item skip-hidden-item-layout="2">
<view class="item0">555</view>
</swiper-item>
</swiper>

.item0{
  background-color: hotpink;
  height: 100%;
  
}
.item1{
  background-color:green ;
  height: 100%;
}

效果

注意swiper中只能放置swiper-item组件，swiper-item作为轮播组件中的元素视图可以继续嵌套其他组件。swiper-item组件的item-id属性作为元素的唯一标识，用于元素定位。
swiper组件的常用属性：

movable-view可拖拽组件。

movable-view可拖拽组件允许用户在一定范围内进行组件的拖拽放置 movable-view组件必须放置在 movable-area容器中

<!--movable-view可拖拽组件-->
<movable-area class="area">
<movable-view class="view" direction="all" out-of-bounds scale>555</movable-view>
</movable-area>

.area{
  background-color: greenyellow;
  width: 400rpx;
  height: 600rpx;
}
.view{
  background-color: red;
    width: 100rpx;
    height: 100rpx;
}

样子

注意

movable-view组件的属性

浮层视图组件

cover-view浮层文本视图
cover-view组件专门用于在原生组件上的添加文本浮层。也可以继续嵌套。

hee
</map
效果

map组件上会在页面上渲染出一个地图视图。
cover-view组件支持定位布局样式的设置，如果要在原生组件上覆盖视图，则需要用cover-image组件
cover-image浮层图片视图
cover-image组件的使用场景与cover-view基本一致，具有加载图片的功能

<map>
<!--此组件可以覆盖原组件上去-->
<cover-image style="width: 200rpx;height: 200rpx;" src="https://t7.baidu.com/it/u=2859906941,1154696622&fm=193&f=GIF">hee</cover-image>
</map>

上面可以看到图片加载到地图视图上，
cover-image的属性