在微信小程序中如何使用slider组件

来源：懂视网责编：小OO 时间：2020-11-27 19:39:24

在微信小程序中如何使用slider组件

本文为大家分享了微信小程序slider组件的使用方法，供大家参考，具体内容如下：效果图；WXML；，<；view class="；tui-content"；>；<；view class="；tui-slider-head"；>；设置step，当前设置步伐为5。WXSS；.tui-slider-head，.tui-slider-box{ height： 80rpx；line-height： 80rpx；font-size： 35rpx；color： #666；}。JS；

推荐度：

点击下载本文 文档为doc格式

导读本文为大家分享了微信小程序slider组件的使用方法，供大家参考，具体内容如下：效果图；WXML；，<；view class="；tui-content"；>；<；view class="；tui-slider-head"；>；设置step，当前设置步伐为5。WXSS；.tui-slider-head，.tui-slider-box{ height： 80rpx；line-height： 80rpx；font-size： 35rpx；color： #666；}。JS；

这篇文章主要为大家详细介绍了微信小程序slider组件的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文为大家分享了微信小程序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;
}

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

上面是我整理给大家的，希望今后会对大家有帮助。

使用vue.js如何实现被选中的改变方法

在vue中如何阻止click事件冒泡

Vue.js 点击按钮显示/隐藏内容

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。TEL:177 7030 7066 E-MAIL:11247931@qq.com