微信小程序使用slider设置数据值及switch开关组件功能【附源码下载】

2026-04-15 13:45:59

本文实例讲述了微信小程序使用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

希望本文所述对大家微信小程序开发有所帮助。

微信小程序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组件动态修改标签透明度的方法.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 index.wxml <view class="img" style="opacity:{{imgOpacity}}"></view> <slider min="0" max="1" step="0.1" show-value value=&quo
微信小程序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
微信小程序（二十）slider组件详细介绍

slider滑动组件用的不太多,在其他平台反正我是用的不多主要属性: wxml <slider max="100" step="10" show-value="true" bindchange="listenerSlider" /> js Page({ data:{ // text:"这是一个页面" }, /** * 监听slider */ listenerSlider:function(e)
微信小程序使用image组件显示图片的方法【附源码下载】

本文实例讲述了微信小程序使用image组件显示图片的方法.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 ① index.wxml 复制代码代码如下: <image style="width: 300px; height: 300px; margin:10px;" mode="scaleToFill" src="{{imageSrc}}"></image> ② index.js Page({ data:{
微信小程序中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
微信小程序自定义组件

前言最近接触微信小程序,再次之前公司用的前端框架是vue ,然后对比发现,开发小程序是各种限制,对于开发者非常不友好.各种槽点太多,完全吐槽不过来,所以在此不多说,打算下次专门写一篇文章吐槽一下.本次主要分享下小程序自定义组件的一点思路,小程序官方提供的框架比较简陋,原始,可复用较差,没有实现自定义组件的功能,这让很多使用vue ,react前端开发非常难受.网上存在各种吐槽,也有分享实现自定义组件的方法,但是要么过于复杂,要么是微信小程序升级之后就不兼容,反正是各种坑你没商量.在这分享下本人
微信小程序 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 相关文章: 微信小程序 Button 微信小程序 radio 微信小程序 slider 微信小程序 switch 微信小程序 textarea 微信小程序 picker-view 微信小程序 picker 微信小程序 label 微信小程序 input 微信小程序 form 微信小程序 checkbox 实现效果图: 滑动选择器属性名类型默认值说明 min Number 0 最小值 max Number 100 最大值 step Number 1 步长,取值必须大
微信小程序（二十一）switch组件详细介绍

switch开关组件使用主要属性: wxml  <view>switch类型开关</view> <switch type="switch" checked="true" bindchange="listenerSwitch"/>  <view>checkbox类型开关</view> <s

微信小程序使用slider设置数据值及switch开关组件功能【附源码下载】

相关推荐

随机推荐