微信小程序：wxml组件整理，待补充......

一、组件总览

组件描述功能和用法view容器（理解为div）略text显示文本略image显示图片略block循环或者判断载体略navigator页面连接跳转页面swiper滑块视图容器图片滚动效果swiper-item滑块视图放置滚动图片，只可以在<swiper/>中使用audio音频放置音频button按钮略template模版组件定义模版checkbox多选框略Checkbox-group多选框组略label标识表单组件绑定触发在组件form表单略switch开关选择器某在功能打开或者关闭radio单选按钮略radio-group单选按钮组略slider滑动选择器例如:调节声音大小input输入框略               

 

微信小程序官方技术文档：https://mp.weixin.qq.com/debug/wxadoc/dev/component/

 

二、组件具体说明

<navigator/>组件

url：跳转连接

open-type：

navigate 默认值,跳转到新页面

redirect 在当前页打开

switchTab 切换Tab

reLaunch

navigateBack 回退

hover-class 指定点击时的样式类，当值为none时没有点击态效果，默认值navigator-hover

hover-start-time  按钮多少毫秒出现点击态

hover-stay-time   手指松开后点击态保留时间，毫秒

hover-stop-propagation

delta 回退层数，回退时候会用到

示例代码：

<navigator url="pages/{{page}}/{{page}}" class="navigator">

<view>hello</view>

</navigator>

 

<image/>组件

mode属性：图片剪裁缩放在模式

scaleToFill: 默认值，不考虑原本比例，填满所设定区域为止。

aspectFit: 考虑比例，是图片在长边能完全显示为主根据比例缩放图片

aspectFill:考虑比例，图片在短边完全显示为主根据比例缩放图片

widthFix: 考虑比例，但是宽度不变，高度自动变化

top：不缩放图片，只显示图片顶部区域

bottom:不缩放图片，只显示图片底部区域

center:不缩放图片，只显示图片中间区域

left:不缩放图片，只显示图片左边区域

rigth:不缩放图片，只显示图片右边区域

top left:不缩放图片，只显示图片左上边区域

top right：略

bottom left:略

Bottom right:略

 

<Swiper/>组件：

bindchange:事件处理，current 改变时会触发 change 事件，event.detail = {current: current, source: source}

indicator-dots: 是否显示面板指示点 true/false

autoplay:是否自动切换true/false

current:当前所在页面在index

interval：自动切换间隔时间毫秒属

duration:滑动动画时长毫秒

circular：是否采用衔接滑动

vertical:滑动方向是否为纵向

 

<slider/>组件：

min:最小值

max:最大值

value:当前值

bindchange：完成一次拖动后触发在事件