微信小程序----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完成一次拖动后触发！

WXRUI体验二维码

如果文章对你有帮助的话，请打开微信扫一下二维码，点击一下广告，支持一下作者！谢谢！

其他

我的博客，欢迎交流！

我的CSDN博客，欢迎交流！

微信小程序专栏

前端笔记专栏

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

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

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

微信小程序实例列表

前端笔记列表

游戏列表