Heim >WeChat-Applet >Mini-Programmentwicklung >Detaillierte Einführung der Kontrollkästchenkomponente des WeChat-Applets

Detaillierte Einführung der Kontrollkästchenkomponente des WeChat-Applets

高洛峰
高洛峰Original
2017-03-21 16:18:132469Durchsuche

Dieser Artikel enthält hauptsächlich relevante Informationen zur detaillierten Einführung der Kontrollkästchenkomponente des WeChat-Applets. Freunde, die sie benötigen, können darauf verweisen

Detaillierte Einführung der Kontrollkästchenkomponente des WeChat-Applets

Ich muss mich darüber beschweren Der Standardstil des Kontrollkästchens. Ein bisschen hässlich! ! ! Die Checkbox-Komponente ist ein Mehrfachauswahlfeld, das in der Checkbox-Gruppe platziert wird, und Abhörereignisse werden in der Checkbox-Gruppe festgelegt (die nur Checkboxen enthalten kann).

Checkbox-Gruppenüberwachungsmethode:

Detaillierte Einführung der Kontrollkästchenkomponente des WeChat-Applets

Checkbox-Mehrfachauswahlattribut:

Detaillierte Einführung der Kontrollkästchenkomponente des WeChat-Applets

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(){
 // 页面关闭
 }
})

Das obige ist der detaillierte Inhalt vonDetaillierte Einführung der Kontrollkästchenkomponente des WeChat-Applets. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn