• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >微信公众号 > 微信开发之slider详解及实例代码

微信开发之slider详解及实例代码

作者:匿名 字体:[增加 减小] 来源:互联网

匿名通过本文主要向大家介绍了微信开发,slider,实例等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com
这篇文章主要介绍了微信小程序 slider 详解及实例代码的相关资料,需要的朋友可以参考下

实现效果图:

slider

滑动选择器

属性名类型默认值说明
minNumber0最小值
maxNumber100最大值
stepNumber1步长,取值必须大于 0,并且可被 (max - min) 整除
disabledBooleanfalse是否禁用
valueNumber0当前取值
show-valueBooleanfalse是否显示当前value
bindchangeEventHandle 完成一次拖动后触发的事件,event.detail = {value:value}

示例代码:

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

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

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

<view class="section section_gap">
 <text class="sectiontitle">设置最小/最大值</text>
 <view class="body-view">
 <slider bindchange="slider4change" min="50" max="200" show-value/>
 </view>
</view>
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)

【相关推荐】

1. 微信公众号平台源码下载

2. 微信投票源码

3. 微信啦啦外卖2.2.4解密开源版 微信魔方源码

以上就是微信开发之slider详解及实例代码的详细内容,更多请关注其它相关文章!

分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • 微信开发教程:自动回复消息和客服消息,文本带链接跳转
  • php 实现微信开发获取用户信息
  • 微信开发实战之模块化的实例详解
  • 微信开发之列表渲染多层嵌套循环
  • 总结一个微信开发的过程实例
  • 微信开发入门(jssdk开发)
  • 微信开发之介绍CreateTime
  • 微信公众号开发--解析CreateTime
  • 微信开发之微信支付
  • 详解微信开发中视图层(xx.xml)和逻辑层(xx.js)

相关文章

  • 微信开发之用户组的介绍
  • 总结关于页面路由实例教程
  • 对关注功能的讲解
  • 传智、黑马微信公众平台开发视频资料分享
  • 微信硬件H5开发之控制灯光
  • 开发实战知乎日报的详细总结
  • 有关微信号的课程推荐10篇
  • java微信开发框架wechat4j入门教程
  • 微信开发asp.net
  • 微信公众平台开发微信支付报关接口

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • thinkphp项目如何自定义微信分享描述内容
    • 制作回到顶部按钮
    • ASP.NET微信开发接口指南详细介绍
    • 微信硬件H5开发之控制灯光
    • 微信开发-Jssdk调用分享实例
    • 微信支付开发 告警通知
    • 微信开发之模板消息回复
    • C#开发微信门户及应用-微信企业号的消息发送(文本、图片、文件、语音、视频、图文消息等)
    • 微信公众平台开发:解决用户上下文(Session)问题
    • 微信开发小店跳转微信商品页接口的方法

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有