甜橘子，专注成都网站制作网站设计与营销型网站建设与优化

QQ :532337155
电话：028-86922220
 
成都网站建设设计

将想法与焦点和您一起共享

微信小程序slider组件使用详解

本文为大家分享了微信小程序slider组件的使用方法，供大家参考，具体内容如下

创新互联建站专注于阳春网站建设服务及定制，我们拥有丰富的企业做网站经验。 热诚为您提供阳春营销型网站建设，阳春网站制作、阳春网页设计、阳春网站官网定制、小程序设计服务，打造阳春网络公司原创品牌,更为您提供阳春网站排名全网营销落地服务。

效果图

微信小程序slider组件使用详解

WXML


 设置step,当前设置步伐为5,当前值：{{slider1}}
 
  
 


 是否在右侧显示当前值
 
  
 


 设置最大值、最小值
 
  
 


 滑动选择器设置名称
 
  
   选择
  
  
   {{slider4}}

WXSS

.tui-slider-head,.tui-slider-box{
 height: 80rpx;
 line-height: 80rpx;
 font-size: 35rpx;
 color: #666;
}

JS

Page({
 data: {
  slider1: 50,
  slider2: 50,
  slider3: 50,
  slider4: 50
 },
 changeSlider1(e) {
  this.setData({ slider1: e.detail.value })
 },
 changeSlider2(e){
  this.setData({ slider2: e.detail.value})
 },
 changeSlider3(e) {
  this.setData({ slider3: e.detail.value })
 },
 changeSlider4(e) {
  this.setData({ slider4: e.detail.value })
 }
})

注意：slider组件的两个事件：bindchanging拖动过程中触发，bindchange完成一次拖动后触发！

DEMO下载

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持创新互联。


当前名称：微信小程序slider组件使用详解
转载源于：http://chengdu.cdxwcx.cn/article/jssdid.html

其他资讯