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

slider组件

来源:未知 编辑:admin 时间:2018-01-18
导读: 滑动选择器是一种在移动端常用的交互组件,大家还记得手机上的亮度调节工具吗?那就是滑动选择器,在小程序中我们可以利用slider/快速生成一个符合系统UI的滑动选择器。滑动选择器一般有水平和垂直两种,小程序中只提供了水平的形式,滑动到最左边是最小值,
  滑动选择器是一种在移动端常用的交互组件,大家还记得手机上的亮度调节工具吗?那就是滑动选择器,在小程序中我们可以利用<slider/>快速生成一个符合系统UI的滑动选择器。滑动选择器一般有水平和垂直两种,小程序中只提供了水平的形式,滑动到最左边是最小值,滑动到右边是最大值。<slider/>属性如下:
·min:最小值,默认值为0。
·max:最大值,默认值为100。
·step:步长,取值必须大于0,并且可被(max-min)整除,默认值为1。
·disabled:是否禁用,默认值为false。
·value:当前取值,默认值为0。value值应该在max和min的区间范围内,设置后滑块会滚动到对应位置。
·color:背景条的颜色,默认值为#e9e9e9。
·selected-color:已选择的颜色,默认值为#laad19。
·show-value:是否在右侧显示当前value。
·bindchange:完成一次拖动后触发的事件,event.detail={value:value}。
本示例中我们创建两个滑动选择器,分别绑定change事件用于控制图标的大小和透明度,如图所示。

代码如下:
<view class="section icon-wrapper">  
<icon type="success" size="{{icon.size}
}"      
   style="opacity:{{icon.opacity/10}};"/>
</view>
<view class="section">
<view>调整图标大小:</view>
 <slider show-value max="100" min="10" step="5" value="{{icon.size}}"      
     bindchange="changeSize"></slider>
</view>
<view class="section">
  <view>调整透明度:</view>
  <slider show-value max="10" min="0" step="1" value="{{icon.opacity}}"    
       bindchange="changeOpacity"></slider> </view> .section { padding : 10px; }
.section.icon-wrapper { height : 100px; font-size : 12px; }
Page( {  
data : {    
icon : {    
  size : 20,    
  opacity : 8
}  
},  
/* 改变大小 */  
changeSize : function( e ) {  
  this.data.icon.size = e.detail.value;     this.setData( this.data );   },
  /* 改变透明度 */
  changeOpacity : function( e ) {     this.data.icon.opacity = e.detail.value;
    this.setData( this.data );
  }
} );
    滑动选择器在移动端交互体验优于字符输入,在项目中一些数值输入项都可以考虑使用滑动选择器代替。
责任编辑:admin

打赏

取消

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

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

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

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

网友评论:

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

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