本系列主要对小程序常用的组件做一个总结,方便自己及其它小程序姿携开发者作为字典查阅和检索。
小程序组件有一些公共属性,在每个组件中代表的意义和数据类型都是一样的。
容器组件:内部能嵌套任何标签。常用的视图容器有: view , scroll-view , swiper
<view/> 是一个块级容器组件,任何一种复杂的布局都可以嵌套在 <view/> 组件内,并在 *.wxss 中设置相关样式。
<view/> 除了上述组件共有的属性外,还包含一组关于点击行为的属性。
在布局中,需要容器具有可滑动的功能,且能监听滚动、触顶郑谨、触底等事件,就需要 <scroll-view/> 组件, <scroll-view/> 在 <view/> 组件上添加滚动相关的属性,通过这些属性,可以响应滚动相关事件。
注意:
<textarea/>, <video/>, <map/>, <canvas/> 不能嵌套在 <scroll-view/>中使用
利用 swiper 组件,可以实现轮播图,滑动页面,预览图片等,一个完整的滑块视图软件由 <swiper/> 和 <swiper-item/> 两个标签组成,不能单独喊册基使用。一个 <swiper/> 只能嵌套一个或多个 <swiper-item/>标签,放置其它的标签会被删除,其中, <swiper-item/> 中能放置任何标签,高度默认为 100% ,另外没有任何其它特殊属性。
<swiper/> 的属性如下:
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.玩去,收缩
新手在第一次自定义组件的时候,首先写出来需要定义的组件的内弊念绝容和布局,防止不熟练而出错。
一、新建一个文件夹,自己命名。以后所有的自定义组件都存放于此。
二、在此文件夹下新建一个自行命名的文件夹,命名最好语义化,与里面自定义组件的名字相呼应。
三、在新建的文件夹内新建一个Component文件 命名也是自定义。
四、在xxx里面把事先写好的ml和ss以及js文件复制进去。
1、把提前写好的页面布局复制到这个此文件里面。写法和在普通页面的写法一样 {{}}是插值表达式。这里可以直接使用js里面定义的数据。
eg:
1、组件自定义的属性列表写在 properties里面。需要写成对象的形式
eg:
2、组件的方法列表写在 methods里面
eg:
五、在需要引用自定义组件页面文件的xxx.json里面引用。
注意:引用的时候,不可以以./开头。前面命名可以自命名,不必和后面名字一样。
六、在需要引用的页面里的的xxx.wxml里写已经命名好的组件。
组件的名字为自定义命名。
eg:
因为组件是自己写的,并非微信提供的官方组件,所以如果想要获取触发事件的话 ,需要写一个同步组件回传数据
触发自定义事件用triggerEvent。在需要调用的方法内写this.triggerEvent(“自定义属性名”,‘需要更新的数据’)
eg:
然后将此事件绑定到页面中。绑定事件需要用bind:自定义的方法名=“js中定义的方法”
利用data-active="变量名租姿"属性添加需要变化的变量
eg:
xxx.wxml内写法:
注意:想要在页面中使用自定义的组件属性时,必须要现在定义组件的文件夹内的js文件中,先去定高友义属性,然后才可以引入使用。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)