iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 29
2
自我挑戰組

前端史萊姆與Vue的三十天時光冒險系列 第 29

Day29 Vue CLI專案實作(三):VueScrollTo套件應用

  • 分享至 

  • xImage
  •  

本文同步發表於斜槓女紙部落格:Day29 Vue CLI專案實作(三):VueScrollTo套件應用

Day29 Vue CLI專案實作(三):VueScrollTo套件應用

嗨~今天要來說說實作vue-scrollto 的過程。記得在D22的時候因為無法順利套用,所以很偷懶的直接採用JQuery的方法了。

既然都洗了一半的Vue CLI專案,就來直接試試vue-scrollto套件的實作吧!

NPM安裝

利用下列程式碼在專案中安裝vue-scrollto套件

npm install --save vue-scrollto

基礎設定

我這次是選擇在main.js中直接加入設定,當然也可以另外開一個js檔案新增設定。

首先在檔案中引入vue-scrollto的js檔案,並使用Vue.use(VueScrollTo)啟用套件

var VueScrollTo = require('vue-scrollto');

Vue.use(VueScrollTo)

或者也可以直接寫入基礎設定,如下範例:

Vue.use(VueScrollTo, {
     container: "body",
     duration: 500,
     easing: "ease",
     offset: 0,
     force: true,
     cancelable: true,
     onStart: false,
     onDone: false,
     onCancel: false,
     x: false,
     y: true
 })

詳細參數說明可以參考官方文件。


增加點擊事件

最後在banner.vue中的ScrollDown連結中增加套件自定義的點擊事件方法

v-scroll-to="'#section-rooms'"  //點擊後滑到#section-rooms

這樣就完成囉!

PS.實作的時候不甘心又在原本專案試了一次CDN的方法,發現是可以正常使用的。只是我一開始使用時少添加了Vue.use(VueScrollTo)這個指令啊.../images/emoticon/emoticon20.gif

今天就先跟大家分享到這兒,明天就是最後一天啦~/images/emoticon/emoticon02.gif


上一篇
Day28 Vue CLI專案實作(二):Axios串接API及房間列表畫面
下一篇
Day30 This is not the End,回顧30天來的挑戰
系列文
前端史萊姆與Vue的三十天時光冒險30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言