【微信小程序】slider滑动选择器(82/100)

在这里插入图片描述
UI布局:

<!--pages/slider/slider.wxml-->
<text class="page__title">slider</text>
<text class="page__desc">滑块</text>

<text class="section__title">设置left/right icon</text>
<view class="body-view">
  <slider bindchange="slider1change" left-icon="cancel" right-icon="success_no_circle" />
</view>

<text class="section__title">设置step</text>
<view class="body-view">
  <slider bindchange="slider2change" step="5" />
</view>

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

<text class="section__title">设置最小/最大值</text>
            <view class="body-view">
                <slider bindchange="slider4change" min="50" max="200" show-value/>
            </view>

功能描述
滑动选择器。

属性说明
属性 类型 默认值 必填 说明 最低版本
min number 0 否 最小值 1.0.0

max number 100 否 最大值 1.0.0

step number 1 否 步长,取值必须大于 0,并且可被(max - min)整除 1.0.0

disabled boolean false 否 是否禁用 1.0.0

value number 0 否 当前取值 1.0.0

color color #e9e9e9 否 背景条的颜色(请使用 backgroundColor) 1.0.0

selected-color color #1aad19 否 已选择的颜色(请使用 activeColor) 1.0.0

activeColor color #1aad19 否 已选择的颜色 1.0.0

backgroundColor color #e9e9e9 否 背景条的颜色 1.0.0

block-size number 28 否 滑块的大小,取值范围为 12 - 28 1.9.0

block-color color #ffffff 否 滑块的颜色 1.9.0

show-value boolean false 否 是否显示当前 value 1.0.0

bindchange eventhandle 否 完成一次拖动后触发的事件,event.detail = {value} 1.0.0

bindchanging eventhandle 否 拖动过程中触发的事件,event.detail = {value} 1.7.0

产品推荐

推荐理由

postman在国内使用已经越来越困难:
1、登录问题严重
2、Mock功能服务基本没法使用
3、版本更新功能已很匮乏
4、某些外力因素导致postman以后能否使用风险较大
出于以上考虑因此笔者自己开发了一款api调试开发工具SmartApi,满足基本日常开发调试api需求

简介

历时一年半多开发终于smartApi-v1.0.0版本在2023-09-15晚十点正式上线
smartApi是一款对标国外的postman的api调试开发工具,由于开发人力就作者一个所以人力有限,因此v1.0.0版本功能进行精简,大功能项有:

  • api参数填写
  • api请求响应数据展示
  • PDF形式的分享文档
  • Mock本地化解决方案
  • api列表数据本地化处理
  • 再加上UI方面的打磨

下面是一段smartApi使用介绍:
在这里插入图片描述

下载地址:

https://pan.baidu.com/s/1kFAGbsFIk3dDR64NwM5y2A?pwd=csdn

### 微信小程序双向滑动选择器实现 在微信小程序中,原生`slider`组件仅支持单向滑动。为了实现双向滑动效果,可以考虑组合两个`slider`组件并调整布局方式[^1]。 #### 方法一:双Slider垂直排列法 此方案涉及创建两个独立的`slider`实例分别处理上下方向上的变化,并通过CSS控制其外观使其看起来像是一个整体控件: ```html <view class="double-slider"> <!-- 上方滑块 --> <slider bindchange="onUpperChange" min="-50" max="50"></slider> <!-- 下方滑块 --> <slider bindchange="onLowerChange" min="-50" max="50"></slider> </view> ``` ```css .double-slider { display: flex; flex-direction: column; /* 垂直堆叠 */ } ``` 这种方法简单易行,但用户体验上可能不如真正的二维滑动流畅自然。 #### 方法二:自定义Canvas绘制 对于更复杂的需求,则推荐采用`canvas`标签来自绘定制图形式的选择区域,在其中模拟出可自由移动指针的效果。这种方式灵活性更高,能够完全按照需求设计交互逻辑与视觉表现[^2]。 ```javascript Page({ data: { startX: 0, startY: 0, endX: 0, endY: 0 }, touchStart(e){ const {touches:[{pageX, pageY}]} = e; this.setData({startX: pageX, startY: pageY}); }, touchMove(e){ const {touches:[{pageX, pageY}]} = e; this.setData({endX: pageX, endY: pageY}); // 更新画布显示... } }) ``` 需要注意的是,当使用`canvas`时要特别注意性能优化以及跨平台兼容性测试等问题。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

lichong951

你的鼓励决定更新的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值