微信小程序的滑块控件Slider

第一步的创建我们的页面的文件：

然后的话就是我们的wxml文件：
详细的页面布局代码：

<!-- todo 在我们的这个位置的话就是设置和创建我们的相关的滑块控件 -->
<view  class="page"><view class="page_hd"><!-- todo 在我们的这个位置的话就是设置我们的文本 --><text class="title">slider</text><text class="page_desc">滑块控件</text></view><view class="page_bd"><view class="section section_gap"><text class="section_title">设置右侧的icon</text><!-- todo 在我们的这个位置的话就是设置我们的bodyview --><view class="body-view"><!--  todo  在我们的这个位置的话就是设置我们的相关的方法--><slider bindchange="slider1Change" left-icon = "cancel" right-icon = "success_no_circle"></slider></view></view><!-- todo 在我们的这个位置的话就是设置我们的相关的方法 --><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><!-- todo 在我们的这个位置的话就是设置我们的最大的值和我们的最小的值 --><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></view>
</view>

然后的话就是编写我们的js逻辑代码：
详细的代码：

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)

然后的话就是我们程序运行的结果：

参考来自微信开发者文档：

微信小程序的滑块控件Slider相关推荐

wxss 点击样式_微信小程序点击控件修改样式实例详解
微信小程序点击控件修改样式实例详解现在要在微信小程序中实现点击控件修改样式,如下: 微信小程序中不支持直接操作dom,要实现这种效果,我们需要通过设置data,然后利用数据和界面的双向绑定来实现它. ...
微信小程序音乐播放控件，监听播放事件，音乐播放的基本实现
下面我将会为大家初步讲解利用微信小程序的音乐控件制作音乐播放器,以及会遇到的一些问题,最后会附上源码包喔! 图片以及音乐都必须使用网络链接体播放器播放之后闪退,是因为音乐的链接失效了所以闪退监 ...
微信小程序加减控件
微信小程序加减控件  <view class='stepper'><text class='{{minusStatus}}' type ...
微信小程序 input 输入框控件 bindinput 没有响应
微信小程序 input 输入框控件 bindinput 没有响应问题: 微信小程序 input 输入框控件 bindinput 没有响应原因: 我以为是我这边的问题,检查很多遍检查不出来,最后换个 ...
微信小程序 view 内控件位置问题、以及定位问题（column（显示为多行）和 row （显示为一行））
一.首先需要知道: 小程序的page中的.wxml中有一个默认的最外层布局"page"(在wxml中并未显示出来),默认的width和height是适应内容大小的.可以在.wxss ...
微信小程序日期选择器控件xxxx-xx-xx格式
这个时间选择器,不用在util里面写,直接在js里面写就好啦.这个是2022-08-09格式的,和上一个不太一样,看自己需求选择合适的选择器. 1.indx.js文件 const date = new ...
微信小程序-学习笔记6-组件
基础内容组件:icon.text.progress <view class="container"><progress percent="20" ...
计算机毕业设计之微信小程序的快递取件及上门服务系统的论文
本科毕业设计快递取件及上门服务院系: 姓名:xxx 学号:xxxxxxxxxx 专业: 年级: 指导教师: 职称:讲师完成日期:2021年月摘要社会的发展和科学技术的进步,互 ...
微信小程序实现滑块验证码
老规矩,先上Demo: 思路创建2个canvas,一个当作背景,一个当作拼图. 传入3个参数,x:canvas中裁剪区域的横坐标,y:canvas中裁剪区域的纵坐标,l:拼图的边长背景图使用fi ...

微信小程序的滑块控件Slider

微信小程序的滑块控件Slider相关推荐

最新文章

热门文章