欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

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

程序员文章站 2022-07-04 23:54:49
本文为大家分享了微信小程序slider组件的使用方法，供大家参考，具体内容如下 效果图 wxml

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

效果图

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

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

demo下载

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

上一篇： 美丽说某站多处SQL注入漏洞

下一篇： BT5中的常见工具操作技巧总结

推荐阅读