微信小程序组件slider

表单组件slider：官方文档

Demo Code:

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)

<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>

WXML

.section__title{font-family: "Helvetica Neue","Hiragino Sans GB","Microsoft YaHei","\9ED1\4F53",Arial,sans-serif;
}
.section_gap{margin-top: 30px;
}

WXSS

Tip:

left-icon right-icon在开发工具中并没有效果，官方定义的属性也没有这两项。

也许在真实环境中有效果。2016·10·17

转载于:https://www.cnblogs.com/betterlife/p/5969545.html

微信小程序组件slider相关推荐

双向slider滑动微信小程序组件slider组件
使用说明: 第一步.将zyslider和utils两个目录放在zjlist里面.如下图第二步.在需要使用的页面json中引入组件.如下图第三步.在wxml代码中写入以下代码第四步.参数解析 mi ...
right 微信小程序_微信小程序双向slider
图片来源:视觉中国产品需要一个双向可以调节的slider用来做微信小程序价格范围筛选,官方slider是单向的,这和iOS和安卓都是一样的,所以自定义了一个组件微信小程序双向slider. 双向sl ...
android img标签属性_微信小程序组件叠加效果（如 Android 中的添加蒙层）
实现的效果如下: 可以看出这是由image组件和text组件叠加到一块组成的蒙层效果. 在小程序中实现这个效果主要用到z-index属性和position属性 z-index的使用必须是双方组件都设置 ...
微信小程序组件间通信（二）
2019独角兽企业重金招聘Python工程师标准>>> 一.微信小程序中通过事件,实现子组件向父组件中传递数据或操作注:子组件向父组件中传递通过事件传递操作通过事件参数对象det ...
微信小程序组件、路由、组件通信、侦听器
一.微信小程序组件组件就是小程序页面的组成结构,与html在web网页开发中的作用一样,铺设页面.可以参考其他UI库,像elementUI,vantUI组件组件是视图层的基本组成单元. 组件自带一 ...
【微信小程序】三、微信小程序组件的基本使用
五.微信小程序组件微信小程序框架为开发者提供了一系列组件,开发者可以通过组合这些组件进行快速开发. (1)微信小程序组件基础概念什么是组件? 组件是视图层的基本组成单元. 组件自带一些功能与微信风 ...
微信小程序 - 组件化开发
微信小程序 -- 组件化开发,总结一下开发思路及过程: 组件,类似于页面,一个自定义组件由 json wxml wxss js 4个文件组成. 1.首先,在 miniprogram 文件夹下,创建一个 ...
微信小程序组件 —— 带搜索功能的选择器
微信小程序组件 -- 带搜索功能的选择器效果组件 search-picker 文件 wxml 文件: <view class="search-picker">< ...
微信小程序组件(标签)—码虫带你飞
微信小程序组件(标签) 组件文档:https://mp.weixin.qq.com/debug/wxadoc/dev/component/ 常用布局标签 <view></view&g ...
微信小程序组件（车牌号输入，支付键盘，滑块验证）
目录车牌号输入组件密码支付键盘组件滑块验证组件车牌号输入组件如图基于微信小程序组件封装,输出值为当前选择车牌号,可回显车牌号. 支持7位8位车牌号,因为我的项目没有此需求,所以没有测试,具 ...

微信小程序组件slider

微信小程序组件slider相关推荐

最新文章

热门文章