微信小程序 slider 详解及实例代码

微信小程序slider

相关文章：

微信小程序 Button

微信小程序 radio

微信小程序 slider

微信小程序 switch

微信小程序 textarea

微信小程序 picker-view

微信小程序 picker

微信小程序 label

微信小程序 input

微信小程序 form

微信小程序 checkbox

实现效果图：

滑动选择器

属性名 类型 默认值 说明
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="section__title">设置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="section__title">设置step</text>
 <view class="body-view">
 <slider bindchange="slider2change" step="5"/>
 </view>
</view>

<view class="section section_gap">
 <text class="section__title">显示当前value</text>
 <view class="body-view">
 <slider bindchange="slider3change" show-value/>
 </view>
</view>

<view class="section section_gap">
 <text class="section__title">设置最小/最大值</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)

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

赞 (0)

相关推荐

  • 微信小程序 slider的简单实例

    微信小程序 slider的简单实例

    微信小程序 slider的简单实例 实现效果图: 微信小程序slider应用,可加减的slider控制 <view class="control-w "> <block wx:for="{{controls}}" wx:key="id" wx:for-item="v"> <view class="slide-item"> <view class="item

  • 微信小程序（二十）slider组件详细介绍

    微信小程序（二十）slider组件详细介绍

    slider滑动组件用的不太多,在其他平台反正我是用的不多 主要属性: wxml <slider max="100" step="10" show-value="true" bindchange="listenerSlider" /> js Page({ data:{ // text:"这是一个页面" }, /** * 监听slider */ listenerSlider:function(e)

  • 微信小程序 slider 详解及实例代码

    微信小程序 slider 详解及实例代码

    微信小程序slider 相关文章: 微信小程序 Button 微信小程序 radio 微信小程序 slider 微信小程序 switch 微信小程序 textarea 微信小程序 picker-view 微信小程序 picker 微信小程序 label 微信小程序 input 微信小程序 form 微信小程序 checkbox 实现效果图: 滑动选择器 属性名 类型 默认值 说明 min Number 0 最小值 max Number 100 最大值 step Number 1 步长,取值必须大

  • 微信小程序 action-sheet详解及实例代码

    微信小程序 action-sheet详解及实例代码

    微信小程序 开发文档,相关文章: 微信小程序  action-sheet 微信小程序 modal 微信小程序 toast 微信小程序 loading 微信小程序  action-sheet 属性名 类型 默认值 说明 hidden Boolean true 是否隐藏 bindchange EventHandle   点击背景或action-sheet-cancel按钮时触发change事件,不携带数据 action-sheet-item 底部菜单表的子选项. action-sheet-cance

  • 微信小程序 toast 详解及实例代码

    微信小程序 toast 详解及实例代码

    微信小程序 开发文档,相关文章: 微信小程序  action-sheet 微信小程序 modal 微信小程序 toast 微信小程序 loading 微信小程序 toast ​消息提示框 属性名 类型 默认值 说明 duration Float 1500 hidden设置false后,触发bindchange的延时,单位毫秒 hidden Boolean false 是否隐藏 bindchange EventHandle   duration延时后触发 示例代码: <view class="

  • 微信小程序 modal详解及实例代码

    微信小程序 modal详解及实例代码

    微信小程序 开发文档,相关文章: 微信小程序  action-sheet 微信小程序 modal 微信小程序 toast 微信小程序 loading 微信小程序 modal 对话弹窗 属性名 类型 默认值 说明 title String   标题 hidden Boolean false 是否隐藏整个弹窗 no-cancel Boolean false 是否隐藏cancel按钮 confirm-text String 确定 confirm按钮文字 cancel-text String 取消 ca

  • 微信小程序 loading 详解及实例代码

    微信小程序 开发文档,相关文章: 微信小程序  action-sheet 微信小程序 modal 微信小程序 toast 微信小程序 loading 微信小程序 loading 属性名 类型 默认值 说明 hidden Boolean false 是否隐藏 示例代码: <view class="body-view"> <loading hidden="{{hidden}}"> 加载中... </loading> <butto

  • 微信小程序  action-sheet详解及实例代码

    微信小程序  action-sheet详解及实例代码

    微信小程序 开发文档,相关文章: 微信小程序  action-sheet 微信小程序 modal 微信小程序 toast 微信小程序 loading 微信小程序  action-sheet 属性名 类型 默认值 说明 hidden Boolean true 是否隐藏 bindchange EventHandle   点击背景或action-sheet-cancel按钮时触发change事件,不携带数据 action-sheet-item 底部菜单表的子选项. action-sheet-cance

  • 微信小程序  modal详解及实例代码

    微信小程序  modal详解及实例代码

    微信小程序 开发文档,相关文章: 微信小程序  action-sheet 微信小程序 modal 微信小程序 toast 微信小程序 loading 微信小程序 modal 对话弹窗 属性名 类型 默认值 说明 title String   标题 hidden Boolean false 是否隐藏整个弹窗 no-cancel Boolean false 是否隐藏cancel按钮 confirm-text String 确定 confirm按钮文字 cancel-text String 取消 ca

  • 微信小程序 框架详解及实例应用

    微信小程序 框架详解及实例应用

    快速了解微信小程序的使用,一个根据小程序的框架开发的todos app 微信官方已经开放微信小程序的官方文档和开发者工具.前两天都是在看相关的新闻来了解小程序该如何开发,这两天官方的文档出来之后,赶紧翻看了几眼,重点了解了一下文档中框架与组件这两个部分,然后根据简易教程,做了一个常规的todo app.这个app基于微信小程序的平台,实现了todo app的常规功能,同时为了让它更接近实际的工作场景,也用到了loading与toast这两个组件来完成一些操作的交互与反馈.这个平台给我的直观感受是

  • 微信小程序 数据绑定详解及实例

    微信小程序 数据绑定详解及实例

    微信小程序最近要火,火不火看看微信用户就知道了,做前端的朋友可以大展身手,跟上脚步,这里来介绍下微信小程序的数据绑定. >>>数据视图绑定 做前端开发的同学,尤其是WEB前端,每天都要跟视图打交道,假如你是用过jQuery,你就能体会到jQuery的代码冗余和操作不便性,需要手动管理视图和对象的数据一致性. 以下数据和对象等同. 传统的视图和数据绑定 那么微信小程序是通过什么方法来管理视图和对象绑定的呢?状态模式-单向数据流. 状态模式定义一个对象,这个对象可以通过管理其状态从而使得应用

  • 微信小程序蓝牙连接小票打印机实例代码详解

    1.连接蓝牙 (第一次发表博客) 第一步打开蓝牙并搜索附近打印机设备// startSearch: function() { var that = this wx.openBluetoothAdapter({ success: function(res) { wx.getBluetoothAdapterState({ success: function(res) { if (res.available) { if (res.discovering) { wx.stopBluetoothDevic

随机推荐