小程序教学三（基础组件介绍）

本文介绍text、view、image、scroll-view、swiper、cover-view、cover-image

在.wxml里面写HTML标签
在.wxss里面写CSS样式
EventHandle 是触发事件类，需要写在.js里面

小程序所列出的属性，要写在.wxml标签里面，不能写在.wxss里面

text

在HTML中我们想放文字，可以使用span标签来存放，在小程序中，对应的我们可以使用text标签来存放文字

使用<text>text里面内容</text>

text

view

在HTML中我们一般使用div来进行控件的划分，在小程序中，对应的我们可以使用view来进行控件的划分

使用：<view>view里面的文字</view>

view

view的布局方式和HTML中的div布局是一样的，但是在移动端增加了flex布局，flex布局将在下次课程中介绍

image

image标签和HTML中的img标签是一样，都是用来加载图片的标签

<image src="图片的路径"></image>
或者<image src="图片的路径" />

小程序为image标签增加了mode属性，来控制图片在image标签中的填充方式。
mode常用效果演示

mode常用效果演示

scroll-view

当我们需要滑动的视图容器的时候，就可以使用scroll-view标签

<scroll-view>里面的内容<scroll-View>

scroll-view

常用属性

属性名	类型	说明
scroll-x	Boolean	允许横向滚动
scroll-y	Boolean	允许纵向滚动
bindscrolltoupper	EventHandle	滚动到顶部/左边，会触发 scrolltoupper 事件
bindscrolltolower	EventHandle	滚动到底部/右边，会触发 scrolltolower 事件
upper-threshold	Number	距顶部/左边多远时（单位px），触发 scrolltoupper 事件
lower-threshold	Number	距底部/右边多远时（单位px），触发 scrolltolower 事件

注意：scroll-view必须指定高度，且里面的内容必须大于scroll-view才可以滑动

swiper

swiper与scroll-view一样都是滑动的视图容器，所不同的是sroll-view是不会分页和自动滚动的，而swiper是分页的，且swiper是可以自动滚动的。一般我们使用swiper来做Banner图效果

使用
<swiper>
<swiper-item>
每一个swiper-item里面的内容可以随意写，会自动设置宽度为100%
</swiper-item>
<swiper-item>
每一个swiper-item里面的内容可以随意写，会自动设置宽度为100%
</swiper-item>
</swiper>

swiper

常用属性

属性名	类型	说明
indicator-dots	Boolean	是否显示面板指示点
indicator-color	Color	指示点颜色
indicator-active-color	Color	当前选中的指示点颜色
autoplay	Boolean	是否自动切换
interval	Number	自动切换时间间隔
duration	Number	滑动动画时长
circular	Boolean	是否采用衔接滑动
vertical	Boolean	滑动方向是否为纵向
bindchange	EventHandle	current 改变时会触发 change 事件，event.detail = {current: current, source: source}

cover-view、cover-image

这两个用法与view和image用法一样，不同的地方是
当我们的页面中有地图的时候，地图会覆盖所有的控件，但是不会覆盖cover-view、cover-image，所以说，想在地图上面添加控件，只能使用cover-view、cover-image其他的控件都不可以。

持续更新中...