VUE 路由群組件左右滑動切換（移動端）

標籤：back   位移量   mat   active   blog   rod   .com   int   one   

<template><div id="headed"><ul class="tab"><li>                <!-- @click="jump(index)                      index: 切換顏色   代表切換的路由檔案                     :class="{‘active_color‘: index==0}                     當index等於0的時候顯示第一個，index：1 切換排球                --><div class="body_bottom" @click="jump(0)" :class="{‘active_color‘: index==0}">籃球</div></li><li><div class="body_bottom" @click="jump(1)" :class="{‘active_color‘: index==1}">排球</div></li><li><div class="body_bottom" @click="jump(2)" :class="{‘active_color‘: index==2}">足球</div></li></ul><div class="line"></div>        <!-- 是否滑動              boxNum：代表有幾個路由群組件             marginLeft：位移量        --><div :class="{shift: isMove}" :style="{width: boxNum * 360 + ‘px‘, marginLeft: marginLeft + ‘px‘}" @touchstart="start($event)"             @touchmove="move($event)"             @touchend="end($event)">            <!-- 三個路由群組件放置的地方 --><introduce></introduce><agenda></agenda><member></member></div></div></template><script>import Introduce from "./introduce.vue"import Agenda from "./agenda.vue"import Member from "./Member.vue"export default{data(){return {tabNum: 1, // tab 切換的頁面寬度 ( 通過介面的資料計算 )index: 0, // 選中了第幾個選項卡boxNum: 1, // 容器寬度                marginLeft: 0, // 位移量                isMove: true, // 是否在滑動                startX: 0, startY: 0, moveX: 0, movrY: 0, endX: 0, endY: 0,                m_sX: 0, m_sY: 0, e_sX: 0, e_xY: 0, sML: 0}},methods: {jump(index){this.index = index;},start (ev) {                ev.stopPropagation();                this.isMove = false;                this.startX = ev.changedTouches[0].clientX;                this.startY = ev.changedTouches[0].clientY;                this.sML = this.marginLeft;            },            move (ev) {                ev.stopPropagation();                this.moveX = ev.changedTouches[0].clientX;                this.moveY = ev.changedTouches[0].clientY;                this.m_sX = this.moveX - this.startX;                this.m_sY = this.moveY - this.startY;                var marginLeft = this.sML + this.m_sX;                marginLeft = marginLeft > 0 ? 0 : marginLeft;                marginLeft = marginLeft < 360 - this.boxNum * 360 ? 360 - this.boxNum * 360 : marginLeft;                this.marginLeft = marginLeft;            },            end (ev) {                this.isMove = true;                if(Math.abs(this.m_sX) > Math.abs(this.m_sY) && Math.abs(this.m_sX) > 60) {                    var multiple = this.m_sX > 0 ? -1 : 1;                    var index = this.index + multiple;                    index = index < 0 ? 0 : index;                    index = index > this.boxNum - 1 ? this.boxNum - 1 : index;                    this.index = index;                } else {                    this.marginLeft = 0 - this.index * 360;                }            }},mounted(){            //路由群組件的數量            this.boxNum = 3;},components: {            //組件的名稱            Introduce, Agenda, Member        },        watch: {            index: function (newValue, oldValue) {                this.marginLeft = 0 - this.index * 360;                            }        }}</script><style scoped="scoped">#headed{width: 360px;overflow: hidden;}.line{width: 100%;height: 1px;background-color: #e6e6e6;margin-top: -2px;}.tab{overflow: hidden;padding: 0;margin: 0;height: 45px;line-height: 45px;}.tab li{float: left;list-style: none;width: 33.3%;text-align: center;}.body_bottom{width: 30px;height: 42px;    margin: 0 auto;    text-align: center;    font-size: 13px;}.active_color{color: #d22330;border-bottom: 2px solid #d22330 !important; }.shift {        transition-property: margin-left;        transition-duration: 1s;    }</style>

　　、

 詳細GitHub地址：https://github.com/CrazyProgrammer12138/routerslider

 

VUE 路由群組件左右滑動切換（移動端）