劃動切屏是一種比較常見的頁面交互方式，可以讓用戶通過手指的滑動來瀏覽頁面內容。在vue中，我們可以通過一些插件或者自己寫代碼來實現劃動切屏效果。

最簡單的實現方式就是利用vue提供的transition組件來實現。我們可以在transition組件上綁定一個v-on:swipeleft事件和v-on:swiperight事件，分別觸發向左劃動和向右劃動的效果。可以通過監聽事件獲取touch對象，然后根據touch對象的橫向滑動距離判斷應該移動多少的distance來實現劃動效果。劃動時最好給content添加一個transition屬性，可以讓頁面運動變得更加順滑自然。

.div-container{
position:relative;
width:100%;
overflow:hidden;
}
.content{
width:300%;
transform:translateX(0%);
transition:transform 1s ease;
}
.transition{
transition-property:transform;
transition-duration:1s;
transition-timing-function:ease;
}

不過這種方式的問題在于沒有保障滑動效果的流暢性。如果頁面內容過多，或者劃動速度過快，都可能導致頁面卡頓，影響用戶體驗。因此，我們可以考慮使用better-scroll等第三方滑動插件來實現。

better-scroll是一款功能強大、可自定義樣式、支持PC和移動端的滾動插件，使用起來也非常簡單。首先需要引入better-scroll的庫和樣式文件，然后創建一個包含所有需要劃動的元素的div容器，然后在mounted階段使用better-scroll來初始化容器，并且配置好一些參數，比如滑動方向、回彈閾值、邊界彈性等。當better-scroll初始化完成后，我們可以監聽一些事件（如scrollEnd等），來控制頁面內容的滑動和切換。

mounted () {
const wrapper = document.querySelector('.wrapper');
const content = document.querySelector('.content');
const scrollObj = new BScroll(wrapper,{
scrollX:true,
scrollY:false,
click:true,
bounce:{
top:false,
bottom:false,
left:true,
right:true
},
snap:{
loop:false,
threshold:0.3,
speed:400
},
stopPropagation:false,
eventPassthrough:'horizontal'
});
//事件監聽
scrollObj.on('scrollEnd',()=>{});
}

在使用better-scroll時，我們還需要考慮到一些細節問題。比如，如果頁面中有圖片，我們需要在圖片加載完成后重新計算滑動區域，否則在滑動時會出現跳動閃爍的效果。還有，在移動端需要考慮到瀏覽器兼容性問題，比如IOS下需要添加-webkit-前綴等等。

總的來說，使用better-scroll等第三方插件可以讓頁面的劃動效果更加流暢，并且支持更多自定義的配置，但是需要注意代碼的可復用性和兼容性問題。同時，如果頁面內容比較簡單，可以考慮直接使用transition組件來實現劃動效果。