微信小程序实现双向滑动快捷选择价格(价格区间)

实现样子

提示:效果可以自己自定义,自己将文字样式更改为自己项目属性即可

实现达到方法

1、左边为最低价,右边为最高价格,可以拖动左边最低价选择价格。拖动右边为最高价。

2、当两个价格重合时,继续拖动,向左边,左边最低价会跟着变低,直到为边端,反之右边最高价会跟着变高。

3、输入相应的标尺会显示不同价格尺度

4、颜色、拖动模块都可以自定义

5、价格拖动已经封装成组件,简单调用即可实现相应的方法

建议:建议不在组件拖动频繁调用setdata赋值,会导致性能增高

实现步骤

步骤一:下载资源,在组件引用组件(不作过多介绍,资源在结尾下载)

步骤二:在页面调用组件

json:{"usingComponents": {"range-slider": "/components/range/range-slider"}
}js:
const app = getApp()
Page({data: {minValue: 0,maxValue: 20,rangeValues: [0, 20]},onLoad: function() {},onRangeChange: function(e) {this.setData({rangeValues: [Math.round(e.detail.minValue), Math.round(e.detail.maxValue)],});},onTest: function() {this.setData({rangeValues: [0, 20]});}
})wxml:
<view style="width:600rpx"><range-slider width='600' height='100' block-size='50' min='0' max='20' values='{{rangeValues}}' bind:rangechange='onRangeChange'><view slot='minBlock' class='range-slider-block'></view><view slot='maxBlock' class='range-slider-block'></view></range-slider></view>css:
.container {display: flex;flex-direction: column;align-items: center;margin-top: 230rpx;
}.range-slider-block {border-radius: 15rpx;width: 100%;height: 100%;background-color: #fc4029;box-shadow: 0px 2rpx 14rpx 0px rgba(72,126,255,0.35);color:#fff;font-size: 17rpx;text-align: center;line-height: 29rpx;
}.range-text {font-size: 18px;
}

小结

现在很多网上流行拖动来选择价格,方便快捷高效的选择价格,已经慢慢摒弃传统的固定选择价格。组件已经优化,兼容小屏和大屏幕的手机或者平板

喜欢的小伙伴可以下载。资源下载

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/32968.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

家电用PCM板:市场现状研究分析与发展前景预测

家电PCM板属于一种兴起不久的功能性复合材料。属于家电复合外观材料中占比较大的一种。家电复合外观材料主要分为覆膜板&#xff08;VCM&#xff09;系列和有机涂层板&#xff08;PCM&#xff09;系列两大类&#xff1a;VCM系列表面复合各类功能性薄膜&#xff0c;可根据需要实…

搜索插入位置

题目描述&#xff1a; 给定一个排序数组和一个目标值&#xff0c;在数组中找到目标值&#xff0c;并返回其索引。如果目标值不存在于数组中&#xff0c;返回它将会被按顺序插入的位置。 请必须使用时间复杂度为 O(log n) 的算法。 示例 1: 输入: nums [1,3,5,6], target …

pve组网实现公网访问pve,访问电脑,访问pve中的openwrt同时经过openwrt穿透主路由地址nginx全公网访问最佳办法测试研究...

一台路由器 做主路由 工控机 装pve虚拟机 虚拟机里面装一个openwrt, 外网可以直接访问pve,可以访问pve里的openwrt 一台主机 可选择连 有4个口&#xff0c;分别eth0,eth1,eth2,eth3 pve有管理口 这个情况下 &#xff0c;没有openwrt 直接电脑和pve管理口连在一起就能进pve管理界…

C++:Trie字符串统计

Trie字符串统计 维护一个字符串集合&#xff0c;支持两种操作&#xff1a; 1."I x"向集合中插入一个字符串x 2."Q x"询问一个字符串在集合中出现了多少次 共有N个操作&#xff0c;输入的字符串总长度不超过 1 0 5 10^5 105&#xff0c;字符串仅包含小写英…

PyTorch深度学习环境安装(Anaconda、CUDA、cuDNN)及关联PyCharm

1. 关系讲解 Tytorch&#xff1a;Python机器学习库&#xff0c;基于Torch&#xff0c;用于自然语言处理等应用程序 Anaconda&#xff1a;是默认的python包和环境管理工具&#xff0c;安装了anaconda&#xff0c;就默认安装了conda CUDA&#xff1a;CUDA是一种由显卡厂商NVIDI…

AI:03-基于深度神经网络的低空无人机目标检测图像识别的研究

文章目录 数据集收集与预处理深度神经网络模型设计模型训练与优化目标检测与图像识别代码实现:实验结果与分析讨论与展望低空无人机的广泛应用为许多领域带来了巨大的潜力和机会。为了实现无人机的自主导航和任务执行,准确的目标检测和图像识别是至关重要的。本文旨在研究并提…

PHP最简单自定义自己的框架数据库封装调用(五)

1、实现效果调用实现数据增删改查封装 2、创建数据表 CREATE TABLE test (id int(11) NOT NULL AUTO_INCREMENT,name varchar(30) DEFAULT NULL,age int(11) DEFAULT NULL,PRIMARY KEY (id) ) ENGINEMyISAM AUTO_INCREMENT4 DEFAULT CHARSETutf8;3、index.php 入口定义数据库…

matplotlib 笔记 注释annotate

在图中的特定位置添加文本注释、箭头和连接线&#xff0c;以便更清晰地解释图形中的数据或信息 主要参数 text文本内容xy箭头指向的目标点的坐标xytext注释文本的坐标arrowprops 一个字典&#xff0c;指定注释箭头的属性&#xff0c;如颜色、箭头样式等 没有arrowprops的时候…

PE启动盘和U启动盘(第三十六课)

PE启动盘和U启动盘(第三十六课) 一 WindowsPE工具盘 1. 制作WinPE镜像光盘 双击WePE64_V2.2-是-点击右下角光盘图标-选择ISO的输出位置-立即生成ISO 2. 通过光盘启动WinPE

JavaScript:ES6中类与继承

在JavaScript编程中&#xff0c;ES6引入了一种更现代、更清晰的方式来定义对象和实现继承&#xff0c;那就是通过类和继承机制。本文将以通俗易懂的方式解释ES6中类与继承的概念&#xff0c;帮助你更好地理解和应用这些特性。 1. 类的创建与使用 类是一种模板&#xff0c;用于…

深入理解PyTorch中的NoamOpt优化器

深入理解PyTorch中的NoamOpt优化器 作者&#xff1a;安静到无声 个人主页 今天&#xff0c;我们将深入探讨一个在自然语言处理领域广泛使用的优化器——NoamOpt。这个优化器是基于PyTorch实现的&#xff0c;并且在"Attention is All You Need"这篇论文中首次提出。…

NLP(六十四)使用FastChat计算LLaMA-2模型的token长度

LLaMA-2模型部署 在文章NLP&#xff08;五十九&#xff09;使用FastChat部署百川大模型中&#xff0c;笔者介绍了FastChat框架&#xff0c;以及如何使用FastChat来部署百川模型。   本文将会部署LLaMA-2 70B模型&#xff0c;使得其兼容OpenAI的调用风格。部署的Dockerfile文件…

VMware上的Centos设置静态IP

服务器环境一般都是Centos7&#xff0c;而且很多软件在Linux环境上也能支持得更好&#xff0c;所以我需要在本机上使用虚拟机安装Linux&#xff0c;因为需要访问Linux上安装的软件&#xff0c;所以需要固定IP&#xff0c;不然每次更改也不方便。 基础环境准备 安装VMware在VM…

Linux 基础(五)常用命令-文件属性

文件属性 文件权限文件属性修改文件权限属性 文件所有者 文件权限 文件属性 Linux中文件权限 可以通过文件属性体现&#xff1b; 使用 ll 查看文件列表 最前面的 l d 表示文件类型 1 5 表示硬链接数 或者 子文件夹个数 所属用户 所属用户组 文件大小 创建/更新时间 文件&…

java使用正则表达式时遇到的问题

标准的正则表达式是什么样的 Node.js(JavaScript) 在正则表达式中&#xff0c;斜杠&#xff08;/&#xff09;用来表示正则表达式的开始和结束。在JavaScript中&#xff0c;正则表达式可以使用斜杠包裹起来&#xff0c;以表示这是一个正则表达式的字面量。 在Node.js中&…

Linux基础命令

命令 //关闭防火墙1 systemctl stop firewalld.service //关闭防火墙程序 systemctl disable firewalld.service//关闭开机自启动 //关闭防火墙2 firewall-cmd--set-defaut-zonetrusted//关闭虚拟化 systemctl stop libvirtd.service //关闭虚拟化程序 systemctl disable ibvi…

Flutter系列文章-Flutter UI进阶

在本篇文章中&#xff0c;我们将深入学习 Flutter UI 的进阶技巧&#xff0c;涵盖了布局原理、动画实现、自定义绘图和效果、以及 Material 和 Cupertino 组件库的使用。通过实例演示&#xff0c;你将更加了解如何创建复杂、令人印象深刻的用户界面。 第一部分&#xff1a;深入…

c51单片机串行通信示例代码(单片机--单片机通信)(附带proteus线路图)

//这个发送端代码 #include "reg51.h" #include "myheader.h" #define uchar unsigned char long int sleep_i0; long int main_i0; void main() {uchar sendx[6]{2,0,2,3,8,1};sleep(2000);TMOD0x20;TH10XF4;//根据波特率计算公式这里需要设置为这么多才能…

用vim打开后中文乱码怎么办

Vim中打开文件乱码主要是文件编码问题。用户可以参考如下解决方法。 1、用vim打开.vimrc配置文件 vim ~/.vimrc**注意&#xff1a;**如果用户根目录下没有.vimrc文件就把/etc/vim/vimrc文件复制过来直接用 cp /etc/vim/vimrc ~/.vimrc2、在.vimrc中加入如下内容 set termen…

将达梦DM8数据库JDBC驱动注册到本地Maven仓库安装

这里写目录标题 1下载DmJdbcDriver18.jar2,以管理员身份运行CMD窗口&#xff0c;然后执行如下安装命令&#xff1a;3.pom文件添加引用 1下载DmJdbcDriver18.jar 我本地放在d:\DmJdbcDriver.jar 2,以管理员身份运行CMD窗口&#xff0c;然后执行如下安装命令&#xff1a; mvn …