微信小程式checkbox元件詳細介紹

高洛峰
發布: 2017-03-21 16:18:13
原創
2465 人瀏覽過

這篇文章主要介紹了微信小程式checkbox元件詳細介紹的相關資料,需要的朋友可以參考下

微信小程式checkbox元件詳細介紹

不得不吐糟下checkbox預設樣式真是有點略醜! ! ! checkbox元件為一個多選框被放到checkbox-group群組中,並在checkbox-group(只能包含checkbox)中設定監聽事件。

checkbox-group監聽方法:

微信小程式checkbox元件詳細介紹

#checkbox多選屬性:

微信小程式checkbox元件詳細介紹



########################### ############wxml###############
<!--checkbox-group就是一个checkbox组 有个监听事件bindchange,监听数据选中和取消-->
<checkbox-group bindchange="listenCheckboxChange">
<!--这里用label显示内容,for循环写法 wx:for-items 默认item为每一项-->
 <label style="display: flex;" wx:for-items="{{items}}">
 <!--value值和默认选中状态都是通过数据绑定在js中的-->
  <checkbox value="{{item.name}}" checked="{{item.checked}}"/>{{item.value}}
 </label>
</checkbox-group>
登入後複製
######js############# #
Page({
 /**
  * 初始化数据
  */
 data:{
 items: [
  {name: &#39;JAVA&#39;, value: &#39;Android&#39;, checked: &#39;true&#39;},
  {name: &#39;Object-C&#39;, value: &#39;IOS&#39;},
  {name: &#39;JSX&#39;, value: &#39;ReactNative&#39;},
  {name: &#39;JS&#39;, value: &#39;wechat&#39;},
  {name: &#39;Python&#39;, value: &#39;Web&#39;}
 ]
 },

 /**
 * 监听checkbox事件
 */
 listenCheckboxChange:function(e) {
  console.log(&#39;当checkbox-group中的checkbox选中或者取消是我被调用&#39;);
  //打印对象包含的详细信息
  console.log(e);

 },

 onLoad:function(options){
 // 页面初始化 options为页面跳转所带来的参数
 },
 onReady:function(){
 // 页面渲染完成
 },
 onShow:function(){
 // 页面显示
 },
 onHide:function(){
 // 页面隐藏
 },
 onUnload:function(){
 // 页面关闭
 }
})
登入後複製
### ###### ###

以上是微信小程式checkbox元件詳細介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板