黑马程序员技术交流社区
标题: 【广州前端】微信小程序入门之路(三)之组件一 [打印本页]
作者: AMay 时间: 2018-9-13 15:19
标题: 【广州前端】微信小程序入门之路(三)之组件一
【前言】
微信小程序的组件也挺多了，还是把官网的组件介绍地址先贴出来吧
【基本组件】
这里先给大家介绍一些比较基础的组件，作为一个开胃小菜。作为入门，这里会把这些基础的组件与我们的html标签做一个类比。
常用布局标签
<view></view>
相当于 <div></div>
<text></text> 相当于 <span></span>
<image></image>
相当于 <img />
<navigator></navigator>
相当于 <a></a>
<block></block> 区块标签，不会渲染到页面
注意：image组件默认宽度300px、高度225px，很多时候我们都不需要这个默认宽高，记得手动设置宽高
【其他组件】
1. 轮播图组件
[HTML] 纯文本查看 复制代码
<swiper indicator-dots="是否显示面板指示点" autoplay="是否自动切换" interval="自动切换时间间隔" duration="滑动动画时长">
<swiper-item>
<image src="图片路径1" width="375" height="150"/>
</swiper-item>
<swiper-item>
<image src="图片路径2" width="375" height="150"/>
</swiper-item>
</swiper>
效果图：
2. form （表单）
wxml：表单里有输入框、滑动选择器、开关和提交表单重置表单按钮。
[HTML] 纯文本查看 复制代码
<form bindsubmit='formSubmit' bindreset='formReset'>
<input name='input' placeholder='请输入内容'>{{inputText}}</input>
<slider name='slider' value='{{sliderValue}}'></slider>
<switch name='switch' checked='{{isChecked}}'></switch>
<button form-type='submit'>提交表单</button>
<button form-type='reset'>重置表单</button>
</form>
效果如图：
form的两个属性：
bindsubmit 表单提交时会携带 form 中的数据触发其绑定的函数
bindreset 表单重置时会触发 reset 事件,提交表单时，需要在表单组件中加上 name 来作为 key
js代码如下
[JavaScript] 纯文本查看 复制代码
Page({
/**
* 页面的初始数据
*/
data: {
inputText: '',
sliderValue: 0,
isChecked: false,
},
//表单提交
formSubmit: function (event) {
//打印日志
console.log(event)
},
//表单重置
formReset: function (event) {
console.log(event)
}
})
效果图：
如下图：可以看到input,slider,switch是组件的name属性，被当做key提交
点击reset，可以看到表单中的组件状态被重置
3. ActionSheet（底部弹出框）
先学习下bindtap属性，就是点击事件，当组件被点击时，会触发绑定的函数。
wxml代码：
简单介绍下：点击按钮时，action-sheet即底部弹出框显示，其中的action-sheet-item为弹出框的条目，最后一个条目为action-sheet-cancel，顾名思义，此条目用于取消操作，其外观会和其它条目不同，会触发action-sheet的bindchange事件（点击弹出框外面空白地方也会触发bindchange事件），点击每一个条目（包括取消）时，将action-sheet隐藏。
[HTML] 纯文本查看 复制代码
<button bindtap='showActionSheet'>showActionSheet</button>
<action-sheet hidden="{{actionSheetHidden}}" bindchange="actionSheetChange">
<action-sheet-item bindtap="actionSheetItem" data-name="name1" data-value='我是第1条数据'>item1</action-sheet-item>
<action-sheet-item bindtap="actionSheetItem" data-name="name2" data-value='我是第2条数据'>item2</action-sheet-item>
<action-sheet-item bindtap="actionSheetItem" data-name="name3" data-value='我是第3条数据'>item3</action-sheet-item>
<action-sheet-cancel bindtap="actionSheetItem" data-name="cancel" data-value='我是取消'>取消</action-sheet-cancel>
</action-sheet>
Js代码
[JavaScript] 纯文本查看 复制代码
Page({
/**
* 页面的初始数据
*/
data: {
actionSheetHidden: true,
},
//显示action-sheet
showActionSheet: function () {
this.setData({ actionSheetHidden: false })
},
//点击取消
actionSheetChange: function () {
console.log("actionSheetChange")
this.setData({ actionSheetHidden: true })
},
//条目点击事件
actionSheetItem: function (event) {
console.log(event)
this.setData({ actionSheetHidden: true })
}
})
效果图：
1. 先点击按钮，让action-sheet显示
2. 点击item1，会触发actionSheetItem函数，看下actionSheetItem函数中打印的日志：
3. 可以看到条目1中携带的数据name和value传到了actionSheetItem的参数中，真实案例中就可以拿到被点击条目的数据，进行下一步的操作了
回到上一步，再看看点击取消会有什么不同吧
注意看，我们先打印出actionSheetChange日志，可以得出，当点击取消时，先被触发的时action-sheet的bindchange函数，然后才执行的取消条目的bindtap函数，同时可以也可以拿到取消条目所传递的数据，但取消一般是不怎么需要的。
| 欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) |
黑马程序员IT技术论坛 X3.2 |
