微信小程序----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項目地址

微信小程序實例列表

前端筆記列表

游戲列表