整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
所接觸到的Slider滑塊應用的場景，主要有圖片的放大縮小，調節聲音的大小。不知道小伙伴們的應用場景都有哪些呢？歡迎在文章下方留言討論哈。
準備工作：
{
path: '/slider',
name: 'slider',
component: ()=> import('./views/Slider.vue')
}
<a href="javascript：void(0)" @click="$router.push('/slider')">
<van-col span="6" class="marb20">
<van-icon name="gift" />
<div>Slider 滑塊</div>
</van-col>
</a>
至今為止呢，我們的首頁顯示的樣式子是這樣滴?不知道不覺間我們已經學完了25個組件了！哇噢，為自己歡呼一下吧！如果想看更多的內容，歡迎關注我，每天都有更新哈。
代碼演示Slider滑塊：
基礎方法：
<van-slider
v-model="value"
@change="onChange"
/>
data() {
return {
value: 30,
}
},
methods: {
onChange(value) {
console.log(value)
},
}
van-slider的值與數據結構里的value進行雙向數據綁定。惟一一個事件就是change事件，當我們在滑動滑塊的時候，就會觸發change事件，當然change事件里會有個value值，這個value值即為當前的進度。在開發過程不中，我們可以將這個值得出來后，利用ajax請求，將這個值傳給后端讓他們做處理。
指定選擇范圍：
van-slider的取值范圍是0-100 。有時候我們的需求呢取值范圍并不是從0到100,而是從中間一個位置到指定一個位置結束，這時候怎么辦？只需要設置一下其max和min值就可以，如下：
<van-slider v-model="value" :min="50" :max="80" @change="onChange" />
這兩張圖分別顯示了可滑動的范圍，從初始位置到終點位置。
指定步長及自定義滑塊的高度：
通常根據項目的需要，會設定不一樣的步長值以及不一樣的高度，可以這樣定義一下：
<van-slider v-model="value" :step="20" bar-height="6px" @change="onChange" />
:step: 這樣每次滑動只能滑動20
bar-height: 設置滑塊的高度。這里是以px為計量單位的。
這個組件的應用就是這么簡單。組件雖然簡單，最重要的還是在項目中如何去應用它，當我們遇到類似的應用時，我們應該即時想起這個組件，以及是否是這個組件的變形。
好啦，我們又學會一個組件了！鼓掌吧！我們的開發效率又提高了一點點呢。每天積累一點點，一年后會發現收獲滿滿。期待聽到大家的成果噢！
今天就到這里啦。休息休息一會兒吧?明天繼續加油噢！加油
有你能用上的插件（vue插件總結）
框架
編輯器
slider
圖表
日歷
地址選擇
地圖
播放器
滾動scroll
文件上傳
圖片處理
總有你能用上的插件（vue插件總結）
提示
進度條
其他
總有你能用上的插件（vue插件總結）
具體組件地址，請點擊下方“了解更多”！
更多資源敬請關注！
Vue官方資源（未翻譯）https://github.com/vuejs/awesome-vue
此篇來源@web秀 https://www.toutiao.com/a6599426533952061956/
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
