微信小程序使用slider设置数据值及switch开关组件功能【附源码下载】
本文实例讲述了微信小程序使用slider设置数据值及switch开关组件功能。分享给大家供大家参考,具体如下:
1、效果展示
2、关键代码
① index.wxml
<view>微信小程序组件:滑动选择器slider</view> <slider bindchange="sliderBindchange" min="{{min}}" max="{{max}}" show-value/> <view>最小值:{{min}}</view> <view>最大值:{{max}}</view> <view>当前值:{{text}}</view> <view>---------------------------------</view> <view>微信小程序组件:开关组件switch</view> <switch checked type="switch" bindchange="switchBindchange"/> <view>开关组件当前状态:{{switchState}}</view>
② index.js
Page({ data:{ // text:"这是一个页面" min:'20', max:'150', text:'', switchState:'开' }, sliderBindchange:function(e){ this.setData({ text:e.detail.value }) }, switchBindchange:function(e){ if(e.detail.value){ this.setData({ switchState:'开' }) }else{ this.setData({ switchState:'关' }) } } })
3、源代码点击此处本站下载。
关于slider与switch组件的详细说明与使用方法可参考官网:
https://mp.weixin.qq.com/debug/wxadoc/dev/component/slider.html
https://mp.weixin.qq.com/debug/wxadoc/dev/component/switch.html
希望本文所述对大家微信小程序开发有所帮助。
相关推荐
-
微信小程序基于slider组件动态修改标签透明度的方法示例
本文实例讲述了微信小程序基于slider组件动态修改标签透明度的方法.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 index.wxml <view class="img" style="opacity:{{imgOpacity}}"></view> <slider min="0" max="1" step="0.1" show-value value=&quo
-
微信小程序使用image组件显示图片的方法【附源码下载】
本文实例讲述了微信小程序使用image组件显示图片的方法.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 ① index.wxml 复制代码 代码如下: <image style="width: 300px; height: 300px; margin:10px;" mode="scaleToFill" src="{{imageSrc}}"></image> ② index.js Page({ data:{
-
微信小程序(二十)slider组件详细介绍
slider滑动组件用的不太多,在其他平台反正我是用的不多 主要属性: wxml <slider max="100" step="10" show-value="true" bindchange="listenerSlider" /> js Page({ data:{ // text:"这是一个页面" }, /** * 监听slider */ listenerSlider:function(e)
-
微信小程序picker组件简单用法示例【附demo源码下载】
本文实例讲述了微信小程序picker组件简单用法.分享给大家供大家参考,具体如下: picker滚动选择器,现支持三种选择器,通过mode来区分,分别是普通选择器(mode=selector),时间选择器(mode=time),日期选择器(mode=date),默认是普通选择器. 具体功能说明如下: 普通选择器:mode=selector 属性名 类型 默认值 说明 range Array [] mode为selector时,range有效 value Number 0 mode为selecto
-
微信小程序 slider 详解及实例代码
微信小程序slider 相关文章: 微信小程序 Button 微信小程序 radio 微信小程序 slider 微信小程序 switch 微信小程序 textarea 微信小程序 picker-view 微信小程序 picker 微信小程序 label 微信小程序 input 微信小程序 form 微信小程序 checkbox 实现效果图: 滑动选择器 属性名 类型 默认值 说明 min Number 0 最小值 max Number 100 最大值 step Number 1 步长,取值必须大
-
微信小程序swiper组件用法实例分析【附源码下载】
本文实例讲述了微信小程序swiper组件用法.分享给大家供大家参考,具体如下: 关于视图容器swiper的详细内容可参考官方文档 先来看看运行效果: index.js: Page({ data: { imgUrls: ['http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg', 'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jp
-
微信小程序自定义组件
前言 最近接触微信小程序,再次之前公司用的前端框架是vue ,然后对比发现,开发小程序是各种限制,对于开发者非常不友好.各种槽点太多,完全吐槽不过来,所以在此不多说,打算下次专门写一篇文章吐槽一下.本次主要分享下小程序自定义组件的一点思路,小程序官方提供的框架比较简陋,原始,可复用较差,没有实现自定义组件的功能,这让很多使用vue ,react前端开发非常难受.网上存在各种吐槽,也有分享实现自定义组件的方法,但是要么过于复杂,要么是微信小程序升级之后就不兼容,反正是各种坑你没商量.在这分享下本人
-
微信小程序中button组件的边框设置的实例详解
微信小程序中button组件的边框设置的实例详解 button的边框是用:after方式实现的,用户如果在button上定义边框会出现两条线,需用:after的方式去覆盖默认值. 如果设置了Button的背景色,没有用:after设置边框的颜色,则button的四个角会出现模糊的尖角.如下图所示: 如上图四个角会模糊..wxss代码如下: .clickEncryptBtn{ width:130px; border-radius: 3px; margin:20px auto; padding-to
-
微信小程序 switch组件详解及简单实例
微信小程序switch 相关文章: 微信小程序 Button 微信小程序 radio 微信小程序 slider 微信小程序 switch 微信小程序 textarea 微信小程序 picker-view 微信小程序 picker 微信小程序 label 微信小程序 input 微信小程序 form 微信小程序 checkbox 实现效果图: 开关选择器 属性名 类型 默认值 说明 checked Boolean false 是否选中 disabled Boolean false 是否禁用 typ
-
微信小程序(二十一)switch组件详细介绍
switch开关组件使用主要属性: wxml <!--switch类型开关--> <view>switch类型开关</view> <switch type="switch" checked="true" bindchange="listenerSwitch"/> <!--checkbox类型开关--> <view>checkbox类型开关</view> <s
-
微信小程序 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
随机推荐
- AngularJS使用ng-app自动加载bootstrap框架问题分析
- ASP中SESSION无法保存问题的解决办法
- Linux 中的 Install命令
- SQL Server 2008 数据库中创建只读用户的方法
- js动态创建上传表单通过iframe模拟Ajax实现无刷新
- jQuery动态添加.active 实现导航效果代码思路详解
- js实现瀑布流效果(自动生成新的内容)
- .NET实现XML与DataTable互转的实例代码
- 利用PHP实现短域名互转
- PHP 采集获取指定网址的内容
- 深入分析PHP优化及注意事项
- javascript增加干扰数据实现简单加密效果
- 简单理解JavaScript中的封装与继承特性
- python sqlobject(mysql)中文乱码解决方法
- js 跨域和ajax 跨域问题小结
- Struts2学习笔记(6)-简单的数据校验
- C# 汉字转拼音实例(支持GB2312字符集中所有汉字)
- JavaScript数据类型学习笔记
- JS异步加载的三种实现方式
- 动态获取复选框checkbox选中个数的jquery代码