小程序学习–3 组件
说明
基本参照官方文档
组件简介
组件是视图层的基本组成单元（写在wxml中的标签），自带一些功能和微信风格的样式
共同属性
所有组件都有的属性
- id
- class
- style
- hidden
- data-
- bind*/catch*
组件详解
1.view
视图容器 相当于 HTML的div
<view class="view"
hover="{{true}}" // 是否启用点击态
hover-class="view-hover" // 点击后的样式 此选项不设置 hover 没有效果
hover-start-time="{{10}}" // 按住后多久出现点击态，单位毫秒
hover-stay-time="{{50}}" // 手指松开后点击态保留时间，单位毫秒
>
<text>this is view</text>
</view>2.scroll-view
可滚动视图区域
<scroll-view
class="scroll-view"
scroll-x="{{false}}" // 允许横向滚动
scroll-y="{{true}}" // 允许纵向滚动
upper-threshold="50" // 距顶部/左边多远时（单位px），触发 scrolltoupper 事件
lower-threshold="50" // 距底部/右边多远时（单位px），触发 scrolltolower 事件
scroll-top="0" // 设置竖向滚动条位置
scroll-left="0" // 设置横向滚动条位置
scroll-into-view="second" // 值应为某子元素id，则滚动到该元素，元素顶部对齐滚动区域顶部(优先级高)
bindscrolltoupper="toupper" // 滚动到顶部/左边，会触发 scrolltoupper 事件
bindscrolltolower="tolower" // 滚动到底部/右边，会触发 scrolltolower 事件
bindscroll="scroll" // 滚动时触发,通过 event.detail 查看
>
<view>this is 1</view>
<view id="second">this is 2</view>
<view>this is 3</view>
<view>this is 4</view>
</scroll-view>3.swiper
轮播图，swiper 中只可以防止 swiper-item 组件 ，其他组件会被自动删除 不是组件
<swiper class="swiper"
indicator-dots="{{true}}" // 是否显示面板指示点
autoplay="{{true}}" // 是否自动切换
duration="1000" // 滑动动画时长
interval="3000" // 自动切换时间间隔
current="{{2}}" // 当前所在页面的 index
circular="{{true}}" // 是否采用衔接滑动
bindchange="swiperchange" // current 改变时会触发 change 事件
>
<block wx:for="{{imgurl}}"
wx:for-item="item"
wx:for-index="index"
wx:key="index">
<swiper-item>
<image src="{{item}}"
class="swiper-img"/>
</swiper-item>
</block>
</swiper>4.icon
图标组件
<icon
type="cancel"
size="40"
color="#333"
/>5.text
文本，支持转义符
\<text></text>组件内只支持<text></text>嵌套，相当于 HTML 的 span
<text>{{text}}</text>6.progress
进度条
<view class="progress">
<progress
percent="33" // 百分比0~100
show-info="{{true}}" // 在进度条右侧显示百分比
stroke-width="{{10}}" // 进度条线的宽度，单位px
color="{{'#333333'}}" // 进度条颜
active="{{true}}" // 进度条从左往右的动画
/>
</view>注意: progress 进度条组件，父元素可以设置display:flex 但是不能设置 align-items,并且父元素要有固定宽度
7.button
按钮
<button
size="mini" // 有效值 default, mini
type="warn" // 按钮的样式类型，有效值 primary, default, warn
plain="{{true}}" // 按钮是否镂空，背景色透明
disabled="{{false}}" // 是否禁用
loading="{{true}}" // 名称前是否带 loading 图标
form-type="submit" // 用于 <form/> 组件，点击分别会触发 submit/reset 事件
hover-class="none" // 指定按钮按下去的样式类
>
click me
</button>8.checkbox
多选框
<checkbox-group
bindchange="checkedchange" // <checkbox-group/>中选中项发生改变是触发 change 事件，detail = {value:[选中的checkbox的value的数组]}
>
<label>
老板
<checkbox
value="boss" // <checkbox/>标识，选中时触发<checkbox-group/>的 change 事件，并携带 <checkbox/> 的 val
disabled="{{true}}" // 是否禁用
checked="{{true}}" // 当前是否选中，可用来设置默认选中
color="{{'green'}}" // checkbox的颜色，同css的color
/>
</label>
<label>
销售
<checkbox value="sale" />
</label>
<label>
程序员
<checkbox value="programmer" />
</label>
</checkbox-group>9.input
输入框
<input
value="this is input" // 输入框的初始内容
type="text" // input 的类型，有效值：text, number, idcard, digit
password="{{false}}" // 是否是密码类型
placeholder="{{''}}" // 输入框为空时占位符
disabled="{{false}}" // 是否禁用
maxlength="{{150}}" // 最大输入长度
focus="{{false}}" // 获取焦点
bindinput="input" // 当键盘输入时，触发input事件，event.detail = {value: value}，处理函数可以直接 return 一个字符串，将替换输入框的内容。
bindfocus="focus" // 聚焦时触发
bindblur="blur" // 失去焦点时触发
bindconfirm="confirm" // 点击完成按钮时触发
/>10.picker
从底部弹起的滚动选择器，现支持三种选择器，通过mode来区分，分别是普通选择器，时间选择器，日期选择器，默认是普通选择器。
<picker
mode="selector"
range="{{range}}" // 内容数组
value="{{rangeval}}" // 表示选择了 range 中的第几个（下标从 0 开始）
bindchange="selectorchange" // value 改变时触发 change 事件
disabled="{{false}}"
>
<view>this is {{range[rangeval]}}</view>
</picker>
<picker
mode="time"
value="{{time}}" // 表示选中的时间，格式为"hh:mm"
start="{{timestart}}" // 开始，字符串格式为"hh:mm"
end="{{timeend}}" // 结束，字符串格式为"hh:mm"
bindchange="timechange"
disabled="{{false}}"
>
<view>this is {{time}}</view>
</picker>
<picker
mode="date"
value="{{date}}" // 表示选中的日期，格式为"YYYY-MM-DD"
start="{{datestart}}"
end="{{dateend}}"
bindchange="datechange"
fields="month" // 有效值 year,month,day，表示选择器的粒度
disabled="{{false}}"
>
<view>this is {{date}}</view>
</picker>Page({
data : {
range: ['111', '222', '333', '444', '555', '666' ],
rangeval: 0,
time: '12:30',
timestart: '00:00',
timeend: '23：59',
date: '2016-12-12',
datestart: '2015-12-22',
dateend: '2017-1-1'
},
selectorchange: function (e) {
this.setData({rangeval : e.detail.value});
},
timechange: function (e) {
this.setData({time: e.detail.value});
},
datechange: function (e) {
this.setData({date : e.detail.value});
}
})11.radio
单选 类似 checkbox 用 radio-group 组件包裹
12.slider
滑块
<view class="slider">
<slider
min="{{20}}" // 最小值
max="{{100}}" // 最大值
step="{{1}}" // 步进
disabled="{{false}}"
value="{{30}}" // 当前取值
color="{{'#333'}}" // 北京条颜色
selected-color="{{'#fff'}}" // 完成条的颜色
show-value="{{true}}" // 是否显示当前value
bindchange="sliderchange"
/>
</view>13.switch
开关
<switch
checked="{{true}}" // 是否选中
type="switch" // 样式
color="{{'#333'}}" // 颜色
bindchange="switchchange"
/>14.form
表单,用于将用户输入的数据提交
<form
report-submit="{{true}}" // 是否返回 formId 用于发送模板消息
bindsubmit="submit" // 携带 form 中的数据触发 submit 事件，数据在 event.detail 中
bindreset="reset" // 表单重置时会触发 reset 事件
>
<input />
<button>点击</button>
</form>15.action-sheet（新版本已废弃，改用 wx.showActionSheet({})）
action-sheet \ action-sheet-item \ action-sheet-cancel 用来设置 底部弹出框
<view class="container">
<button bindtap="toggle">按钮</button>
<action-sheet hidden="{{shouldshow}}"
bindchange="actionchange">
<action-sheet-item bindtap="itemclick" data-name="name1">this is first</action-sheet-item>
<action-sheet-item bindtap="itemclick" data-name="name2">this is second</action-sheet-item>
<action-sheet-cancel>点击取消</action-sheet-cancel>
</action-sheet>
</view>var app = getApp()
Page({
data: {
motto: 'Hello World',
userInfo: {},
shouldshow: true
},
toggle: function () {
this.setData({shouldshow : !this.data.shouldshow});
},
actionchange: function (e) {
console.log(e);
this.toggle();
},
itemclick: function (e) {
console.log(e);
console.log(e.target.dataset.name);
}
})16.moda（新版本已废弃，改用 wx.showModal({})）
modal 弹出框
<view class="container">
<button bindtap="toggle">按钮</button>
<modal
confirm-text="选中了"
cancel-text="不选了"
hidden="{{shouldshow}}"
bindconfirm="confirm"
bindcancel="cancel"
>
this is modal text
</modal>
</view>Page({
data: {
motto: 'Hello World',
userInfo: {},
shouldshow: true
},
toggle: function () {
this.setData({shouldshow : !this.data.shouldshow});
},
confirm: function (e) {
console.log(e);
this.setData({shouldshow : true});
},
cancel: function (e) {
console.log(e);
this.setData({shouldshow : true});
}
})17.toast（新版本已废弃，改用 wx.showToast({}) 和 wx.hideToast()）
toast 消息提示框
<view class="container">
<button bindtap="toggle">按钮</button>
<toast
hidden="{{shouldshow}}"
duration="3000"
bindchange="toast">
<!--1000毫秒后自动触发change事件-->
this is toast massage
</toast>
</view>
Page({
data: {
motto: 'Hello World',
userInfo: {},
shouldshow: true
},
toggle: function () {
this.setData({shouldshow : !this.data.shouldshow});
},
toast: function (e) {
this.setData({shouldshow : !this.data.shouldshow});
console.log(e);
}
})18.loading（新版本弃用，使用 wx.showToast({icon:’loading’})）
loading 加载,需要手动关闭
<view class="container">
<button bindtap="toggle">按钮</button>
<loading
hidden="{{shouldshow}}"
bindchange="loadchange">
this is loading text
</loading>
</view>Page({
data: {
motto: 'Hello World',
userInfo: {},
shouldshow: true
},
toggle: function () {
console.log('btn is click');
this.setData({shouldshow : !this.data.shouldshow});
let that = this;
setTimeout(function () {
that.setData({shouldshow : !that.data.shouldshow});
},1500)
},
loadchange: function (e) {
console.log(e);
this.setData({shouldshow : true});
}
})19.navigator
页面跳转，相当于 a 标签
<navigator
url="../logs/logs" // 应用内的跳转链接
open-type="navigate" // 可选值 'navigate'、'redirect'、'switchTab'，对应于wx.navigateTo、wx.redirectTo、wx.switchTab的功能
>
页面跳转
</navigator>20.image
图片
<image
src="http://img06.tooopen.com/images/20160818/ tooopen_sy_175833047715.jpg" // 图片路径
mode="scaleToFill" // 图片裁剪、缩放的模式
binderror="error" // 当错误发生时
bindload="load" // 当图片载入完毕时
/>更多图片剪裁模式查看官方文档
664
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
