微信小程序----slider组件

DEMO下载

效果图

WXML

<view class="tui-content"> <view class="tui-slider-head">设置step,当前设置步伐为5,当前值：{{slider1}}</view> <view class="tui-slider-box"> <slider bindchange="changeSlider1" step="5" value="{{slider1}}"/> </view> </view> <view class="tui-content"> <view class="tui-slider-head">是否在右侧显示当前值</view> <view class="tui-slider-box"> <slider bindchange="changeSlider2" value="{{slider2}}" show-value/> </view> </view> <view class="tui-content"> <view class="tui-slider-head">设置最大值、最小值</view> <view class="tui-slider-box"> <slider bindchange="changeSlider3" min="20" max="90" value="{{slider3}}" show-value/> </view> </view> <view class="tui-content"> <view class="tui-slider-head">滑动选择器设置名称</view> <view class="tui-slider-box"> <view class="tui-fl"> 选择 </view> <view class="tui-fl"> {{slider4}} </view> <view style="overflow:hidden"> <slider bindchanging="changeSlider4" value="{{slider4}}"/> </view> </view> </view>

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完成一次拖动后触发！

其他

我的博客，欢迎交流！

我的CSDN博客，欢迎交流！

微信小程序专栏

前端笔记专栏

微信小程序实现部分高德地图功能的DEMO下载

微信小程序实现MUI的部分效果的DEMO下载

微信小程序实现MUI的GIT项目地址

微信小程序实例列表

前端笔记列表

游戏列表