热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

详解微信小程序组件:slider滑动选择器

这篇文章主要为大家详解微信小程序组件:slider滑动选择器的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
slider滑动选择器组件说明:

滑动选择器。

slider滑动选择器示例代码运行效果如下:

下面是WXML代码:


  设置left/right icon
  
    
  


  设置step
  
    
  


  显示当前value
  
    
  


  设置最小/最大值
  
    
  

下面是JS代码:

var pageData = {}
for (var i = 1; i <5; i++) {
  (function (index) {
    pageData[&#39;slider&#39; + index + &#39;change&#39;] = function(e) {
      console.log(&#39;slider&#39; + &#39;index&#39; + &#39;发生 change 事件,携带值为&#39;, e.detail.value)
    }
  })(i)
}
Page(pageData)

下面是WXSS代码:

.page {
    min-height: 100%;
    flex: 1;
    background-color: #FBF9FE;
    font-size: 32rpx;
    overflow: hidden;
}

slider滑动选择器的主要属性

属性名

类型

默认值

说明


minNumber0最小值
maxNumber100最大值
stepNumber1步长,取值必须大于0,并且可被(max - min)整除
disabledBooleanfalse是否禁用
valueNumber0当前取值
show-valueBooleanfalse是否显示当前 value
bindchangeEventHandle完成一次拖动后触发的事件,event.detail = {value: value}个人经验:min为负数

滑动选择器。
既然min和max是Number类型,那么将min设置为负数是否可以?

下面是WXML代码:


  设置最小/最大值
  
    
  

下面是JS代码:

var pageData = {}
for (var i = 1; i <5; i++) {
  (function (index) {
    pageData[&#39;slider&#39; + index + &#39;change&#39;] = function(e) {
      console.log(&#39;slider&#39; + &#39;index&#39; + &#39;发生 change 事件,携带值为&#39;, e.detail.value)
    }
  })(i)
}
Page(pageData)

下面是WXSS代码:

.page {
    min-height: 100%;
    flex: 1;
    background-color: #FBF9FE;
    font-size: 32rpx;
    overflow: hidden;
}

分析:可以看到min可以设置为负数,而且,默认滑块显示到0的位置(说明value这个属性是控制这个的)。然后还可以往左拖动,然后显示出负数;

个人经验:min如果大于max

我以为会报错,结果出乎我的意料。它居然不报错,然后显示到max位置,滑块也是不能够拖动的。这是一个明显的大坑啊!

下面是WXML代码:


  设置最小/最大值
  
    
  

下面是JS代码:

var pageData = {}
for (var i = 1; i <5; i++) {
  (function (index) {
    pageData[&#39;slider&#39; + index + &#39;change&#39;] = function(e) {
      console.log(&#39;slider&#39; + &#39;index&#39; + &#39;发生 change 事件,携带值为&#39;, e.detail.value)
    }
  })(i)
}
Page(pageData)

下面是WXSS代码:

.page {
    min-height: 100%;
    flex: 1;
    background-color: #FBF9FE;
    font-size: 32rpx;
    overflow: hidden;
}

这个控件估计后面会改吧。请大家避免这个坑。
另外,max还可以和min相等。

个人经验:两个滑块

我之前用过slider,人家滑块可以是设置两个的。这个文档上没写,我也是够了,只能说不成熟吧。

个人经验:使用wx.showToast显示value

下面是WXML代码:


  使用toast显示当前value
  
    
  

下面是JS代码:

var pageData = {}
for (var i = 1; i <5; i++) {
  (function (index) {
    pageData[&#39;slider&#39; + index + &#39;change&#39;] = function(e) {
      console.log(&#39;slider&#39; + &#39;index&#39; + &#39;发生 change 事件,携带值为&#39;, e.detail.value)
      wx.showToast({
        title: &#39;您选择了&#39;+ e.detail.value,
        icon: &#39;success&#39;,
        duration: 2000
      })
    }
  })(i)
}
Page(pageData)

下面是WXSS代码:

.page {
    min-height: 100%;
    flex: 1;
    background-color: #FBF9FE;
    font-size: 32rpx;
    overflow: hidden;
}

以上就是详解微信小程序组件:slider滑动选择器的详细内容,更多请关注 第一PHP社区 其它相关文章!


推荐阅读
  • 一般的网页我的项目能够很容易的实现换肤性能,能够通过js扭转link元素中引入的css主题款式链接。然而微信小程序不能动静扭转wxss文件,所以须要其余的计划来实现。 ... [详细]
  • 微信小程序导航跟随的实现方法
    本文介绍了在微信小程序中实现导航跟随的方法。通过设置导航的position属性和绑定滚动事件,可以实现页面向下滚动到导航位置时,导航固定在页面最上方;页面向上滚动到导航位置时,导航恢复到原始位置;点击导航可以平滑跳转到相应位置。代码示例也给出了具体实现方法。 ... [详细]
  • wxParse 0.3:微信小程序中的高级 HTML 和 Markdown 富文本解析器,全面支持多级嵌套与 Emoji 表情
    wxParse 0.3 是一款专为微信小程序设计的高级富文本解析器,支持 HTML 和 Markdown 转换为 WXML 可视化格式。该组件不仅能够处理复杂的多级嵌套结构,还全面支持 Emoji 表情,极大地提升了内容展示的多样性和用户体验。 ... [详细]
  • 在微信小程序中实现外部链接跳转,可以通过微信官方提供的组件来完成。具体而言,有以下两种方法:1. 首先,可以通过创建一个新的 `` 组件来加载外部网页。这个组件允许在小程序内部嵌入一个网页视图,从而实现外部链接的展示和交互。2. 另一种方法是使用 `wx.navigateToMiniProgram` API,通过调用该接口可以跳转到其他已安装的小程序,实现更丰富的跨应用交互功能。这两种方法各有优缺点,开发者可以根据实际需求选择合适的方式。 ... [详细]
  • 当前,众多初创企业对全栈工程师的需求日益增长,但市场中却存在大量所谓的“伪全栈工程师”,尤其是那些仅掌握了Node.js技能的前端开发人员。本文旨在深入探讨全栈工程师在现代技术生态中的真实角色与价值,澄清对这一角色的误解,并强调真正的全栈工程师应具备全面的技术栈和综合解决问题的能力。 ... [详细]
  • 在本文中,我们将探讨如何使用 UniApp 封装小程序 API 请求接口的最佳实践。通过创建 `request.js` 文件,定义基础 URL 并传入后端提供的 URL 作为请求参数。同时,配置请求方法(如 GET、POST)和请求头(例如包含 token 的认证信息),以实现高效、安全的 API 调用。此外,我们还将介绍如何处理请求和响应的错误,以及如何优化请求性能,确保应用在不同平台上的兼容性和稳定性。 ... [详细]
  • 如何构建并优化微信小程序页面的设计与功能
    本文将深入探讨微信小程序页面的设计与优化方法,旨在帮助开发者高效构建功能完备且用户体验良好的小程序。通过实例分析与技术详解,读者能够掌握从页面布局到功能实现的全过程,提升开发技能与应用质量。 ... [详细]
  • 手机上编写和运行PHP代码的最佳软件推荐 ... [详细]
  • 本文详细介绍了如何在微信小程序中使用JavaScript实现图片上传至PHP服务器的方法。通过具体的代码示例,帮助开发者掌握从客户端选择图片、处理图片数据到服务器端接收并保存图片的完整流程。同时,文章还提供了常见问题的解决方案和优化建议,确保上传过程的高效性和稳定性。 ... [详细]
  • 本书《.NET Core 2.* 开发者指南》是面向开发者的全面学习与实践手册,涵盖了从基础到高级的各个层面。书中详细解析了 .NET Core 的核心概念,包括如何创建 .NET Core 网站,并通过视频教程直观展示操作过程。此外,还深入探讨了 Startup 类的作用、项目目录结构的组织方式以及如何在应用中使用静态文件等内容。对于希望深入了解 .NET Core 架构和开发技巧的开发者来说,本书提供了丰富的实践案例和详尽的技术指导。 ... [详细]
  • 浅解XXE与Portswigger Web Sec
    XXE与PortswiggerWebSec​相关链接:​博客园​安全脉搏​FreeBuf​XML的全称为XML外部实体注入,在学习的过程中发现有回显的XXE并不多,而 ... [详细]
  • 如何在微信文章中插入附件文档:详细教程与技巧分享
    对于众多企业和教育机构的微信公众号而言,在发布信息时常常需要在文章中嵌入各类文档附件,例如应聘申请表、健康声明书、数据记录表、疫情防控登记表、项目申报评分表及各类公告通知等。本文将详细介绍如何在微信文章中高效地插入不同类型的文档附件,并分享一些实用技巧,帮助用户提升内容发布的专业性和便捷性。 ... [详细]
  • 在微信小程序中,页面的加载机制与传统应用类似,每次打开新页面时都会创建一个新的视图对象并进行叠加。当用户点击返回按钮时,当前页面会被关闭并从堆栈中移除。这一过程涉及页面管理与资源释放,确保了用户体验的流畅性和系统的稳定性。微信小程序支持同时打开的页面数量有限制,最多可同时保持10个页面的打开状态,以避免内存溢出和性能下降。 ... [详细]
  • 本文深入对比了Unity HTML5与Unity 5.0在技术特性、应用场景及开发难度等方面的不同。分析指出,尽管两者均需一定的编程基础,但HTML5作为前端开发语言,对开发者的技术要求相对更高,尤其是在英语文档阅读和理解方面。相比之下,Unity 5.0更加侧重于游戏和交互式内容的视觉表现,更适合具备美术背景的开发者使用。此外,文章还探讨了两者在不同平台上的适应性和未来发展趋势。 ... [详细]
  • PyQt5 QTextEdit:深入解析Python中多功能GUI库的应用与实现
    本文详细探讨了 PyQt5 中 QTextEdit 组件在 Python 多功能 GUI 库中的应用与实现。PyQt5 是 Qt 框架的 Python 绑定,提供了超过 620 个类和 6000 个函数及方法,广泛应用于跨平台应用程序开发。QTextEdit 作为其中的重要组件,支持丰富的文本编辑功能,如富文本格式、文本高亮和自定义样式等。PyQt5 的流行性不仅在于其强大的功能,还在于其易用性和灵活性,使其成为开发复杂用户界面的理想选择。 ... [详细]
author-avatar
2012hellen_887
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有