在微信小程序中如何使用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