微信小程序----组件之checkbox
2017-09-07 14:54
239 查看
效果图:
项目结构:
核心代码:
index.wxml
index.wxss
index.js
项目结构:
核心代码:
index.wxml
<checkbox-group bindchange="checkboxChange"> <label class="checkbox" wx:for="{{items}}"> <checkbox value="{{item.name}}" checked="{{item.checked}}"/>{{item.value}} </label> </checkbox-group>
index.wxss
.checkbox{ display: block; background-color: yellow }
index.js
Page({ /** * 页面的初始数据 */ data: { items: [ { name: 'USA', value: '美国' }, { name: 'CHN', value: '中国', checked: 'true' }, { name: 'BRA', value: '巴西' }, { name: 'JPN', value: '日本' }, { name: 'ENG', value: '英国' }, { name: 'TUR', value: '法国' }, ] }, checkboxChange: function (e) { console.log('checkbox发生change事件,携带value值为:', e.detail.value) }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { }, /** * 生命周期函数--监听页面显示 */ onShow: function () { }, /** * 生命周期函数--监听页面隐藏 */ onHide: function () { }, /** * 生命周期函数--监听页面卸载 */ onUnload: function () { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { }, /** * 用户点击右上角分享 */ onShareAppMessage: function () { } })源码下载:http://download.csdn.net/download/zhaihaohao1/9968483
相关文章推荐
- 微信小程序学习(八)之checkbox组件
- 微信小程序把玩(十五)checkbox组件
- 2.3.2微信小程序表单组件 checkbox
- 微信小程序----checkbox组件
- 微信小程序 checkbox组件详解及简单实例
- 微信小程序复选框组件替代方案——LXCheckboxGroup组件
- 微信小程序checkbox组件使用详解
- 微信小程序(十五)checkbox组件详细介绍
- 微信小程序把玩(十五)checkbox组件
- 微信小程序--官方文档补充【操作反馈】--action-sheet组件
- 微信小程序把玩(十)swiper组件
- 微信小程序之---模版组件拖拽开发尝试
- 微信小程序把玩(二十五)loading组件
- 微信小程序开发中的一些问题总结,无法跳转,input组件变高等
- 微信小程序搜索组件wxSearch实例详解
- 微信小程序精品组件:chartjs:饼图,折线图,bar,point-styles
- 微信小程序image组件binderror使用例子(对应html、js中的onerror) ,图片失效显示默认图片
- 微信小程序 icon组件详细及实例代码
- 基于angular实现模拟微信小程序swiper组件