微信小程序_组件

1.基础组件：

什么是组件：

<ul>

<li>组件是视图层的基本组成单元。</li>

<li>组件自带一些功能与微信风格的样式。</li>

<li>一个组件通常包括开始标签

和结束标签

，属性

用来修饰这个组件，内容

在两个标签之内。</li>

</ul>

2.属性类型

<ul>

<li>Boolean布尔值组件写上该属性，不管该属性等于什么，其值都为true

，只有组件上没有写该属性时，属性值才为false

。如果属李弊散性值为变量，变量的值会被转换为Boolean类型</li>

<li>Number数字1

, 2.5</li>

<li>String字符串"string"</li>

<li>Array数组[ 1, "string" ]</li>

<li>Object对象{ key: value } </li>

<li>EventHandler事件处理函数名"handlerName"

是 Page中定义的事件处理函数名</li>

<li>Any任意属性</li>

</ul>

3.共同属性类型哪氏

id , class , style , hidden , data-* , bind* / catch*

4.特殊属性

几乎所有组件都有各自定义的属性，可以对该组件的功能或样式进行修饰

5.组件列表

基础组件分为以下八大类：

视图容器(View Container)：

view 视图容器 , scroll-view 可滚动视图容器, swiper 滑块视图容器

基础内容(Basic Content)：

icon 图标, text 文字, progress 进度条

表单(Form)：

button 按钮, form 表单， input 输入框， checkbox 多想选择器, radio 单选器， picker 列表选择器, slider 滚动选卜兄择器, switch 开关选择器, label 标签.

*** 作反馈（Interaction）

action-sheet 上拉菜单

modal 模态d窗

toast 消息提示框

loading 加载提示符

导航Navigation

navigator 应用链接

多媒体(Media)

audio 音频, image 图片， video 视频

** 地图 **

map 地图

画布Canvas

canvas 画布

flex: vt.折曲，使收缩； vi.玩去，收缩

方法/步骤

在小程序中为了实现一个中添加多个内容重复的标签，那就需要使用循环。如果按小程序的简易教程，循环加在中，而放在里面。所有数据都会遍历到每一个中。这不是我们想要的。

请点击输入图片描述

在微信小程序中有个属性,是指当点击列表元素时当按下鼠标左键会显示样式,但是鼠标离开样式就会复原.

请点击输入图片描述

核心点：模板文件中使用三元运算符,通过dateCurrent指定当前item的id。

请点击输入图片描述

在组件上使用控制属性绑定一个数组，即可使用数组中拆携明各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为index，数组当前项的隐判变量名默认为item 事例。

请点击输入图片描述

接着用在标签上，以渲染一个包含多节点的结构块。

请旅告点击输入图片描述

接着只需要把放入文件中就可以，把循环数据绑定到上就可以了。

请点击输入图片描述

1、打开小程序开发工具新建一个小程序项目，建好的结构如下图所示。

2、打开其中的wxml文件，我们在文件中准备三个view结构的视图，图下图所示。

3、然后我们在silde的view里面插入swiper组件，如下图所示。

4、接下来就是在js文件中的data数组里面准备轮播图片的地址数组，如下图所示。

5、然后碧梁在wxss文件中声明轮播图的样式，如下图所示，这里用rpx能够自适应。

6、最后我们预览界面，你宽裂就会在程序的源代码中看到视图都已经渲染好悔巧运了。

---