微信开发之slider详解及实例代码

互联网 17-5-25

这篇文章主要介绍了微信小程序 slider 详解及实例代码的相关资料,需要的朋友可以参考下

实现效果图：

滑动选择器

属性名	类型	默认值	说明
min	Number	0	最小值
max	Number	100	最大值
step	Number	1	步长，取值必须大于 0，并且可被 (max - min) 整除
disabled	Boolean	false	是否禁用
value	Number	0	当前取值
show-value	Boolean	false	是否显示当前value
bindchange	EventHandle		完成一次拖动后触发的事件，event.detail = {value:value}

示例代码：

<view class="section section_gap">   <text class="sectiontitle">设置left/right icon</text>   <view class="body-view">   <slider bindchange="slider1change" left-icon="cancel" right-icon="success_no_circle"/>   </view>  </view>    <view class="section section_gap">   <text class="sectiontitle">设置step</text>   <view class="body-view">   <slider bindchange="slider2change" step="5"/>   </view>  </view>    <view class="section section_gap">   <text class="sectiontitle">显示当前value</text>   <view class="body-view">   <slider bindchange="slider3change" show-value/>   </view>  </view>    <view class="section section_gap">   <text class="sectiontitle">设置最小/最大值</text>   <view class="body-view">   <slider bindchange="slider4change" min="50" max="200" show-value/>   </view>  </view>

var pageData = {}  for(var i = 1; i < 5; ++i) {   (function (index) {   pageData[`slider${index}change`] = function(e) {   console.log(`slider${index}发生change事件，携带值为`, e.detail.value)   }   })(i);  }  Page(pageData)

【相关推荐】

1. 微信公众号平台源码下载

2. 微信投票源码

3. 微信啦啦外卖2.2.4解密开源版微信魔方源码

以上就是微信开发之slider详解及实例代码的详细内容，更多内容请关注技术你好其它相关文章！

来源链接：

免责声明：
1.资讯内容不构成投资建议，投资者应独立决策并自行承担风险
2.本文版权归属原作所有，仅代表作者本人观点，不代表本站的观点或立场

标签：微信开发，slider，实例