這篇文章將為大家詳細講解有關微信小程序中slider的示例分析，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

創新互聯建站是一家專業提供南木林企業網站建設,專注與成都做網站、網站制作、成都外貿網站建設、H5頁面制作、小程序制作等業務。10年已為南木林眾多企業、政府機構等服務。創新互聯專業網站制作公司優惠進行中。

實現效果圖：

滑動選擇器

屬性名	類型	默認值	說明
min	Number	0	最小值
max	Number	100	較大值
step	Number	1	步長，取值必須大于 0，并且可被 (max - min) 整除
disabled	Boolean	false	是否禁用
value	Number	0	當前取值
show-value	Boolean	false	是否顯示當前value
bindchange	EventHandle		完成一次拖動后觸發的事件，event.detail = {value:value}

示例代碼：

<view class="section section_gap">
 <text class="section__title">設置left/right icon</text>
 <view class="body-view">
 <slider bindchange="slider1change" left-icon="cancel" right-icon="success_no_circle"/>
 </view>
</view>

<view class="section section_gap">
 <text class="section__title">設置step</text>
 <view class="body-view">
 <slider bindchange="slider2change" step="5"/>
 </view>
</view>

<view class="section section_gap">
 <text class="section__title">顯示當前value</text>
 <view class="body-view">
 <slider bindchange="slider3change" show-value/>
 </view>
</view>

<view class="section section_gap">
 <text class="section__title">設置最小/較大值</text>
 <view class="body-view">
 <slider bindchange="slider4change" min="50" max="200" show-value/>
 </view>
</view>

var pageData = {}
for(var i = 1; i < 5; ++i) {
 (function (index) {
 pageData[`slider${index}change`] = function(e) {
 console.log(`slider${index}發生change事件，攜帶值為`, e.detail.value)
 }
 })(i);
}
Page(pageData)

關于“微信小程序中slider的示例分析”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。

網站標題：微信小程序中slider的示例分析-創新互聯
分享地址：http://vcdvsql.cn/article42/ccechc.html

成都網站建設公司_創新互聯，為您提供網站策劃、ChatGPT、網站建設、建站公司、服務器托管、電子商務

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯