联系我们 - 广告服务
您的当前位置:主页 > 布局 > 开发 >

switch组件

来源:未知 编辑:admin 时间:2018-01-18
导读: switch/是一个可以在两种状态切换的开关选择器,现在很多APP都在使用,最常见的就是iOS或Android的系统开关。switch/在功能上和checkbox/有点接近,不同点在于switch/是个单独控件,而checkbox/是由多个单选项组合而成,在小程序中当switch/的type属性值为ch
  <switch/>是一个可以在两种状态切换的开关选择器,现在很多APP都在使用,最常见的就是iOS或Android的系统开关。<switch/>在功能上和<checkbox/>有点接近,不同点在于<switch/>是个单独控件,而<checkbox/>是由多个单选项组合而成,在小程序中当<switch/>的type属性值为checkbox时,它的UI表现和<checkbox/>非常接近。switch属性如下:
·checked:是否选中,默认为false。
·type:<switch/>的UI样式,有效值为switch、checkbox,默认为switch。
·bindchange:checked改变时触发change事件,event.detal={value:checked}。
   <switch/>非常容易理解,大家主要了解它的两种UI状态,示例如图所示。 

代码如下:
<view wx:for="{{list}}">
<switch data-name="{{item.name}}" type="{{item.type}}"      
     checked="{{item.checked}}" bindchange="{{item.changeEventName}}"/>
</view>
Page( {
  data : {  
  switchs : [
      {  
       name : 'switch1',    
    checked : false,    
     type : 'switch',  /* 滑块样式 */         changeEventName : 'change'       },  
    {         name : 'switch2',    
    checked : true,  
      type : 'checkbox',  /* 选择框样式 */         changeEventName : 'change'
      }
   ]  
},
  // 修改开关选择器对象模型的选中值   change : function( e ) {     var name = e.currentTarget.dataset.name,  
      switchs = this.data.switchs,  
      i, s;
    for ( i = 0; s = switchs[i]; ++i ) {       if ( s.name == name ) {         s.checked = e.detail.value;         break;
      }  
  }  
  console.log( name + '的选中态为:' + e.detail.value );
  }
} );
 示例change方法中我们根据用户的操作反向修改了数据模型中对应的值,页面进行数据绑定后保证数据状态和页面状态一致是非常关键的,在项目过程中大家一定要注意。
责任编辑:admin

打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

上一篇:checkbox组件
下一篇:label组件

网友评论:

在“\templets\demo\comments.htm”原来的内容全部删除,插入第三方评论代码,如果不需要评论功能,删除comments.html里面的内容即可
推荐使用友言、多说、畅言(需备案后使用)等社会化评论插件

Copyright © Tricks资讯网 版权所有
本站所有资讯来源于网络 如有侵权请联系QQ:940910888 技术支持鹏博科技
Top