【前言】 微信小程序的组件也挺多了，还是把官网的组件介绍地址先贴出来吧 【基本组件】 这里先给大家介绍一些比较基础的组件，作为一个开胃小菜。作为入门，这里会把这些基础的组件与我们的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函数，同时可以也可以拿到取消条目所传递的数据，但取消一般是不怎么需要的。
| 
收藏
淘帖
踩
