本文介绍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其他的控件都不可以。
持续更新中...
网友评论