├── .browserslistrc
├── .eslintrc.js
├── .gitignore
├── .prettierrc
├── LICENSE
├── README.md
├── babel.config.js
├── docs
    └── README.md
├── examples
    ├── App.vue
    ├── Item.vue
    ├── Test.vue
    ├── api.js
    ├── components
    │   └── SimpleHeader.vue
    ├── iconfont.css
    ├── icons.png
    ├── icons2.png
    ├── item-factory.js
    ├── main.js
    ├── pages
    │   ├── animated.vue
    │   ├── carousel.vue
    │   ├── index.vue
    │   ├── list.vue
    │   ├── mobile.vue
    │   ├── simple.vue
    │   ├── swipe.vue
    │   └── usage.vue
    ├── router.js
    └── store.js
├── package.json
├── postcss.config.js
├── public
    ├── favicon.ico
    └── index.html
├── src
    ├── affix.js
    ├── slide.js
    ├── swipe.js
    ├── utils.js
    └── v-switcher.vue
├── vue.config.js
└── yarn.lock


/.browserslistrc:
--------------------------------------------------------------------------------
1 | > 1%
2 | last 2 versions
3 | not ie <= 8
4 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   env: {
 4 |     node: true
 5 |   },
 6 |   extends: ['plugin:vue/recommended', '@vue/prettier'],
 7 |   rules: {
 8 |     'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
 9 |     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
10 |   },
11 |   parserOptions: {
12 |     parser: 'babel-eslint'
13 |   }
14 | }
15 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | # local env files
 6 | .env.local
 7 | .env.*.local
 8 | 
 9 | # Log files
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 | 
14 | # Editor directories and files
15 | .idea
16 | .vscode
17 | *.suo
18 | *.ntvs*
19 | *.njsproj
20 | *.sln
21 | *.sw*
22 | 


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 |   "semi": false,
3 |   "singleQuote": true
4 | }
5 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2013-present, Yuxi (Evan) You
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in
13 | all copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21 | THE SOFTWARE.


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # v-switcher
 2 | 
 3 | ### usage
 4 | ```sh
 5 | yarn add v-switcher
 6 | // or
 7 | npm i v-switcher
 8 | ```
 9 | 
10 | ```javascript
11 | import Vue from 'vue'
12 | import VSwitcher from 'v-switcher'
13 | import 'v-switcher/dist/v-switcher.css'
14 | 
15 | Vue.component(VSwitcher.name, VSwitcher)
16 | ```
17 | 
18 | ### props
19 | | name | type | default  | required | description |
20 | | --- | --- | --- | --- | --- |
21 | | headers | Array | [] | Y | tab-header 的数组，支持 icon |
22 | | default-index | Number | 0 | N | 默认选中的 tab index |
23 | | routable | Boolean | false | N | 设为 true 则为路由模式 |
24 | | animated | Boolean | false | N | 是否支持切换动画 | 
25 | | duration | Number | 300 | N | 切换动画的时长，ms |
26 | | align | String | start | N | tab 的展示模式 ['around', 'start', 'center', 'end', 'vertical'] |
27 | | swipe | Boolean | false | N | 是否支持左右手势滑动 | 
28 | | headerTrigger | String | click | N | 头部动画触发的方式 ['click', 'hover'] |
29 | | anchorTrigger | String | click | N | 锚点动画触发的方式 ['click', 'hover'] |
30 | | anchorPadding | Number | 0 | N | 锚点元素的 padding 值 |
31 | | autoplay | Number | 0 | N | 自动切换的时长（ms）默认不自动切换 |
32 | | contentWidth | String | 100% | N | 每个 content 的宽度，默认 100% |
33 | | headerHeight | Number | 40 | N | 每个 item 的高度(px)，默认 40 |
34 | | fixedTop | Number | undefined | N | 如果设值，就为 headers fixed 时距离顶部的高度 |
35 | | sticky | Boolean | false | N | 是否使用 100% 高度布局 |
36 | | disabledSwipe | Boolean | false | N | 是否禁止 swipe 的 touch 事件 |
37 | | continuousSwipe | Boolean | false | N | 当使用 swipe 的时候，是否是无限滚动模式，如果 autoplay > 0 则强制为 true |
38 | 
39 | ### example
40 | > 用例比较多，比较复杂，等之后有时间了补在线 demo，现在先把项目 clone 到本地 npm run dev 查看吧
41 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   presets: [
 3 |     [
 4 |       '@vue/app',
 5 |       {
 6 |         useBuiltIns: false
 7 |       }
 8 |     ]
 9 |   ]
10 | }
11 | 


--------------------------------------------------------------------------------
/docs/README.md:
--------------------------------------------------------------------------------
1 | # Hello VuePress!
2 | 


--------------------------------------------------------------------------------
/examples/App.vue:
--------------------------------------------------------------------------------
  1 | <style lang="scss">
  2 | body {
  3 |   margin: 0;
  4 |   width: 100%;
  5 |   overflow-x: hidden;
  6 | 
  7 |   a {
  8 |     text-decoration: none;
  9 |     color: #222;
 10 |   }
 11 | 
 12 |   .header {
 13 |     .v-switcher {
 14 |       &-header {
 15 |         &-anchor {
 16 |           bottom: 0;
 17 |           height: 100%;
 18 |           background-color: #00a1d6;
 19 |           opacity: 0.1;
 20 |         }
 21 |       }
 22 |     }
 23 |   }
 24 | 
 25 |   .v-switcher {
 26 |     &-header-item {
 27 |       padding: 0 20px;
 28 |       box-sizing: border-box;
 29 | 
 30 |       &.is-active {
 31 |         color: palevioletred;
 32 |       }
 33 |     }
 34 |   }
 35 | 
 36 |   .banner {
 37 |     height: 150px;
 38 |     background-color: #4fc08d;
 39 |     color: #fff;
 40 |   }
 41 |   /*
 42 |   .demo-list {
 43 |     list-style-type: none;
 44 |     margin: 0;
 45 |     padding: 0;
 46 |     padding-top: 10px;
 47 | 
 48 |     li {
 49 |       padding: 0 10px 10px;
 50 | 
 51 |       div {
 52 |         height: 100px;
 53 |         line-height: 100px;
 54 |         text-align: center;
 55 |         border-radius: 5px;
 56 |       }
 57 |     }
 58 |   }
 59 | 
 60 |   .end {
 61 |     text-align: center;
 62 |   }
 63 |   */
 64 | 
 65 |   .container {
 66 |     width: 1160px;
 67 |     max-width: 100%;
 68 |     margin: 0 auto;
 69 | 
 70 |     section {
 71 |       display: flex;
 72 |       flex-direction: row;
 73 |       justify-content: flex-start;
 74 |       align-items: flex-start;
 75 |       margin-bottom: 50px;
 76 | 
 77 |       main {
 78 |         width: 900px;
 79 |         max-width: 100%;
 80 |         @media (min-width: 768px) {
 81 |           padding-right: 20px;
 82 |         }
 83 |       }
 84 | 
 85 |       aside {
 86 |         flex-grow: 1;
 87 |       }
 88 |     }
 89 |   }
 90 | 
 91 |   .demo-item {
 92 |     background-color: #e5e9ef;
 93 |     height: 400px;
 94 |     display: flex;
 95 |     flex-direction: row;
 96 |     justify-content: center;
 97 |     align-items: center;
 98 |   }
 99 | }
100 | </style>
101 | 
102 | <template>
103 |   <div id="app">
104 |     <div class="container header">
105 |       <v-switcher :headers="headers" :routable="true" anchor-trigger="hover">
106 |         <router-link
107 |           v-for="(item, index) in headers"
108 |           :key="index"
109 |           :slot="`tab-${index}`"
110 |           :to="item.route"
111 |           v-text="item.name"
112 |         ></router-link>
113 |         <router-link slot="header-after" to="/list">
114 |           测试列表
115 |         </router-link>
116 |       </v-switcher>
117 |     </div>
118 |     <div class="banner">vue layout tab</div>
119 |     <div class="container">
120 |       <router-view></router-view>
121 |     </div>
122 |   </div>
123 | </template>
124 | 
125 | <script>
126 | export default {
127 |   name: 'app',
128 |   data() {
129 |     return {
130 |       headers: [
131 |         {
132 |           name: '首页',
133 |           route: '/homepage'
134 |         },
135 |         {
136 |           name: '简单用例',
137 |           route: '/simple'
138 |         },
139 |         {
140 |           name: '带切换动画',
141 |           route: '/animated'
142 |         },
143 |         {
144 |           name: '带手势操作',
145 |           route: '/swipe'
146 |         },
147 |         {
148 |           name: '自动轮播',
149 |           route: '/carousel'
150 |         }
151 |       ]
152 |     }
153 |   },
154 |   mounted() {
155 |     setTimeout(() => {
156 |       this.headers.push({
157 |         name: '生产实例',
158 |         route: '/usage'
159 |       })
160 |       this.headers.push({
161 |         name: 'H5实例',
162 |         route: '/mobile'
163 |       })
164 |     }, 1000)
165 |   }
166 | }
167 | </script>
168 | 


--------------------------------------------------------------------------------
/examples/Item.vue:
--------------------------------------------------------------------------------
 1 | <style lang="scss">
 2 | .comp-item {
 3 |   padding: 0 10px;
 4 |   height: 110px;
 5 | 
 6 |   .outer {
 7 |     padding-top: 10px;
 8 |   }
 9 | 
10 |   .inner {
11 |     border-radius: 5px;
12 |     height: 100px;
13 |     line-height: 100px;
14 |     text-align: center;
15 |   }
16 | }
17 | </style>
18 | 
19 | <template>
20 |   <div v-if="item" class="comp-item">
21 |     <div class="outer">
22 |       <div class="inner" :style="{ backgroundColor: item.style.color }" @click="handleClick">
23 |         count：{{ index + 1 }}，id：{{ item.id }}，click：{{ click }}
24 |       </div>
25 |     </div>
26 |   </div>
27 | </template>
28 | 
29 | <script>
30 | export default {
31 |   name: 'Item',
32 |   props: {
33 |     item: {
34 |       type: Object,
35 |       default: null
36 |     },
37 |     index: {
38 |       type: Number,
39 |       required: true
40 |     }
41 |   },
42 |   data() {
43 |     return {
44 |       click: 0
45 |     }
46 |   },
47 |   beforeUpdate() {
48 |     console.log('item re-render')
49 |   },
50 |   methods: {
51 |     handleClick() {
52 |       this.click++
53 |     }
54 |   }
55 | }
56 | </script>
57 | 


--------------------------------------------------------------------------------
/examples/Test.vue:
--------------------------------------------------------------------------------
 1 | <style lang="scss">
 2 | </style>
 3 | 
 4 | <template>
 5 |   <p v-text="text" />
 6 | </template>
 7 | 
 8 | <script>
 9 | export default {
10 |   name: 'Test',
11 |   props: {
12 |     text: {
13 |       type: String,
14 |       required: true
15 |     }
16 |   },
17 |   data() {
18 |     return {}
19 |   },
20 |   beforeUpdate() {
21 |     console.log('beforeUpdate')
22 |   }
23 | }
24 | </script>
25 | 


--------------------------------------------------------------------------------
/examples/api.js:
--------------------------------------------------------------------------------
 1 | import ItemFactory from './item-factory'
 2 | 
 3 | export const getListByPage = ({ page, count, index }) => {
 4 |   console.log('getListByPage', index)
 5 |   return new Promise(resolve => {
 6 |     const total = 1024
 7 |     const hasFetch = (page - 1) * count
 8 |     const getLength = total - hasFetch >= count ? count : total - hasFetch
 9 |     const no_more = getLength + hasFetch >= total
10 |     setTimeout(() => {
11 |       const result = ItemFactory.get(getLength)
12 |       resolve({
13 |         result,
14 |         no_more,
15 |         total
16 |       })
17 |     }, 500)
18 |   })
19 | }
20 | 


--------------------------------------------------------------------------------
/examples/components/SimpleHeader.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <v-switcher :headers="headers">
 3 |     <div
 4 |       v-for="(item, index) in headers"
 5 |       :key="index"
 6 |       :slot="`${index}`"
 7 |     >
 8 |       {{ item }}
 9 |     </div>
10 |   </v-switcher>
11 | </template>
12 | 
13 | <script>
14 | export default {
15 |   name: 'SimpleHeader',
16 |   computed: {
17 |     headers() {
18 |       return ['游戏', '动漫', '话题']
19 |     }
20 |   }
21 | }
22 | </script>
23 | 


--------------------------------------------------------------------------------
/examples/iconfont.css:
--------------------------------------------------------------------------------
  1 | @font-face {font-family: "iconfont";
  2 |   src: url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2')
  3 | }
  4 | 
  5 | .iconfont {
  6 |   font-family: "iconfont" !important;
  7 |   font-size: 16px;
  8 |   font-style: normal;
  9 |   -webkit-font-smoothing: antialiased;
 10 |   -moz-osx-font-smoothing: grayscale;
 11 | }
 12 | 
 13 | .ic-qq_connect:before {
 14 |   content: "\e603";
 15 | }
 16 | 
 17 | .ic-douban:before {
 18 |   content: "\e601";
 19 | }
 20 | 
 21 | .ic-close:before {
 22 |   content: "\e631";
 23 | }
 24 | 
 25 | .ic-catalog:before {
 26 |   content: "\e694";
 27 | }
 28 | 
 29 | .ic-arrow-pulldown:before {
 30 |   content: "\e64d";
 31 | }
 32 | 
 33 | .ic-google_oauth2:before {
 34 |   content: "\e600";
 35 | }
 36 | 
 37 | .ic-tiaozhuan:before {
 38 |   content: "\e6a7";
 39 | }
 40 | 
 41 | .ic-wechat:before {
 42 |   content: "\e604";
 43 | }
 44 | 
 45 | .ic-weibo:before {
 46 |   content: "\e605";
 47 | }
 48 | 
 49 | .ic-signed-author:before {
 50 |   content: "\e60e";
 51 | }
 52 | 
 53 | .ic-mode-night:before {
 54 |   content: "\e64e";
 55 | }
 56 | 
 57 | .ic-notification-subscribed:before {
 58 |   content: "\e630";
 59 | }
 60 | 
 61 | .ic-notification-fail:before {
 62 |   content: "\e65b";
 63 | }
 64 | 
 65 | .ic-notification-addcollection:before {
 66 |   content: "\e65c";
 67 | }
 68 | 
 69 | .ic-user:before {
 70 |   content: "\e65e";
 71 | }
 72 | 
 73 | .ic-list-comments:before {
 74 |   content: "\e661";
 75 | }
 76 | 
 77 | .ic-list-like:before {
 78 |   content: "\e662";
 79 | }
 80 | 
 81 | .ic-list-read:before {
 82 |   content: "\e664";
 83 | }
 84 | 
 85 | .ic-followed:before {
 86 |   content: "\e610";
 87 | }
 88 | 
 89 | .ic-follow:before {
 90 |   content: "\e611";
 91 | }
 92 | 
 93 | .ic-friends:before {
 94 |   content: "\e617";
 95 | }
 96 | 
 97 | .ic-woman:before {
 98 |   content: "\e645";
 99 | }
100 | 
101 | .ic-man:before {
102 |   content: "\e646";
103 | }
104 | 
105 | .ic-password:before {
106 |   content: "\e614";
107 | }
108 | 
109 | .ic-ios:before {
110 |   content: "\e612";
111 | }
112 | 
113 | .ic-error:before {
114 |   content: "\e648";
115 | }
116 | 
117 | .ic-android:before {
118 |   content: "\e65f";
119 | }
120 | 
121 | .ic-verify:before {
122 |   content: "\e61f";
123 | }
124 | 
125 | .ic-show:before {
126 |   content: "\e621";
127 | }
128 | 
129 | .ic-hide:before {
130 |   content: "\e622";
131 | }
132 | 
133 | .ic-link:before {
134 |   content: "\e616";
135 | }
136 | 
137 | .ic-more:before {
138 |   content: "\e620";
139 | }
140 | 
141 | .ic-appdownload:before {
142 |   content: "\e69d";
143 | }
144 | 
145 | .ic-selected:before {
146 |   content: "\e69e";
147 | }
148 | 
149 | .ic-openinapp:before {
150 |   content: "\e6a5";
151 | }
152 | 
153 | .ic-back:before {
154 |   content: "\e6a6";
155 | }
156 | 
157 | .ic-write:before {
158 |   content: "\e6aa";
159 | }
160 | 
161 | .ic-question:before {
162 |   content: "\e613";
163 | }
164 | 
165 | .ic-zan-active:before {
166 |   content: "\e6bd";
167 | }
168 | 
169 | .ic-comment:before {
170 |   content: "\e6be";
171 | }
172 | 
173 | .ic-zan:before {
174 |   content: "\e6bf";
175 | }
176 | 
177 | .ic-like-active:before {
178 |   content: "\e6c7";
179 | }
180 | 
181 | .ic-like:before {
182 |   content: "\e6ca";
183 | }
184 | 
185 | .ic-comment-close:before {
186 |   content: "\e6cb";
187 | }
188 | 
189 | .ic-bottombar-comment:before {
190 |   content: "\e6cc";
191 | }
192 | 
193 | .ic-alert-info:before {
194 |   content: "\e6e0";
195 | }
196 | 
197 | .ic-alert-success:before {
198 |   content: "\e6e1";
199 | }
200 | 
201 | .ic-alert-error:before {
202 |   content: "\e6e2";
203 | }
204 | 
205 | .ic-search-change:before {
206 |   content: "\e6e3";
207 | }
208 | 
209 | .ic-more-vert:before {
210 |   content: "\e6e4";
211 | }
212 | 
213 | .ic-read:before {
214 |   content: "\e6e5";
215 | }
216 | 
217 | .ic-switch-order:before {
218 |   content: "\e6e6";
219 | }
220 | 
221 | .ic-latest:before {
222 |   content: "\e6e7";
223 | }
224 | 
225 | .ic-mode-fontsize:before {
226 |   content: "\e6e8";
227 | }
228 | 
229 | .ic-alipay:before {
230 |   content: "\e6e9";
231 | }
232 | 
233 | .ic-wechat-pay:before {
234 |   content: "\e6ea";
235 | }
236 | 
237 | .ic-points:before {
238 |   content: "\e60b";
239 | }
240 | 
241 | .ic-share-android:before {
242 |   content: "\e6ee";
243 | }
244 | 
245 | .ic-share-ios:before {
246 |   content: "\e6ef";
247 | }
248 | 
249 | .ic-tag:before {
250 |   content: "\e6f3";
251 | }
252 | 
253 | .ic-note-show:before {
254 |   content: "\e606";
255 | }
256 | 
257 | .ic-club:before {
258 |   content: "\e6fb";
259 | }
260 | 
261 | .ic-audio:before {
262 |   content: "\e602";
263 | }
264 | 
265 | .ic-coupon:before {
266 |   content: "\e6fc";
267 | }
268 | 
269 | .ic-sign-about:before {
270 |   content: "\e607";
271 | }
272 | 
273 | .ic-sign:before {
274 |   content: "\e608";
275 | }
276 | 
277 | .ic-sign-notification:before {
278 |   content: "\e609";
279 | }
280 | 
281 | .ic-sign-close:before {
282 |   content: "\e60d";
283 | }
284 | 
285 | .ic-icon_jewel:before {
286 |   content: "\e61c";
287 | }
288 | 
289 | .ic-icon_:before {
290 |   content: "\e61d";
291 | }
292 | 
293 | .ic-xiadie:before {
294 |   content: "\e60c";
295 | }
296 | 
297 | .ic-shangzhang:before {
298 |   content: "\e60f";
299 | }
300 | 
301 | .ic-list-money:before {
302 |   content: "\e63e";
303 | }
304 | 
305 | .ic-icon_comment_photo:before {
306 |   content: "\e626";
307 | }
308 | 
309 | .ic-pinglunhuifu:before {
310 |   content: "\e627";
311 | }
312 | 
313 | .ic-icon_comment_like:before {
314 |   content: "\e628";
315 | }
316 | 
317 | .ic-like1:before {
318 |   content: "\e62b";
319 | }
320 | 
321 | .ic-reward-more:before {
322 |   content: "\e62d";
323 | }
324 | 
325 | .ic-liked:before {
326 |   content: "\e62e";
327 | }
328 | 
329 | .ic-icon_jewel_list_bott:before {
330 |   content: "\e669";
331 | }
332 | 
333 | .ic-icon_jewel_list_top:before {
334 |   content: "\e66a";
335 | }
336 | 
337 | .ic-icon_jewel_lv_arrow:before {
338 |   content: "\e673";
339 | }
340 | 
341 | .ic-H-liked:before {
342 |   content: "\e618";
343 | }
344 | 
345 | .ic-H-like:before {
346 |   content: "\e619";
347 | }
348 | 
349 | .ic-Hweixian:before {
350 |   content: "\e634";
351 | }
352 | 
353 | .ic-Hlink:before {
354 |   content: "\e635";
355 | }
356 | 
357 | .ic-icon_comment_like_active:before {
358 |   content: "\e638";
359 | }
360 | 
361 | .ic-bangdan:before {
362 |   content: "\e639";
363 | }
364 | 
365 | .ic-icon_more_arrow:before {
366 |   content: "\e63a";
367 | }
368 | 
369 | .ic-zuan:before {
370 |   content: "\e63b";
371 | }
372 | 
373 | .ic-share:before {
374 |   content: "\e61e";
375 | }
376 | 
377 | .ic-save:before {
378 |   content: "\e623";
379 | }
380 | 
381 | 


--------------------------------------------------------------------------------
/examples/icons.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/falstack/v-switcher/86564b05b99d204761527ce4cd109aa18bf2bb73/examples/icons.png


--------------------------------------------------------------------------------
/examples/icons2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/falstack/v-switcher/86564b05b99d204761527ce4cd109aa18bf2bb73/examples/icons2.png


--------------------------------------------------------------------------------
/examples/item-factory.js:
--------------------------------------------------------------------------------
 1 | const faker = require('faker')
 2 | faker.locale = 'zh_CN'
 3 | 
 4 | let GLOBAL_ID = 0
 5 | 
 6 | export default new class {
 7 |   get(count) {
 8 |     let items = [], i
 9 |     for (i = 0; i < count; i++) {
10 |       const width = 100 + ~~(Math.random() * 50)
11 |       const height = 100
12 |       items[i] = {
13 |         id: ++GLOBAL_ID,
14 |         style: {
15 |           color: this.getRandomColor()
16 |         },
17 |         width,
18 |         height,
19 |         data: Object.assign(faker.helpers.createCard(), {
20 |           number_id: faker.random.number(),
21 |           uuid: faker.random.uuid(),
22 |           follow: false
23 |         }),
24 |         like: false
25 |       }
26 |     }
27 |     return count === 1 ? items[0] : items
28 |   }
29 | 
30 |   getRandomColor() {
31 |     var colors = [
32 |       'rgba(21,174,103,.5)',
33 |       'rgba(245,163,59,.5)',
34 |       'rgba(255,230,135,.5)',
35 |       'rgba(194,217,78,.5)',
36 |       'rgba(195,123,177,.5)',
37 |       'rgba(125,205,244,.5)'
38 |     ]
39 |     return colors[~~(Math.random() * colors.length)]
40 |   }
41 | }()
42 | 


--------------------------------------------------------------------------------
/examples/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import App from './App.vue'
 3 | import router from './router'
 4 | import store from './store'
 5 | import Switcher from '../src/v-switcher'
 6 | import './iconfont.css'
 7 | import VueMixinStore from 'vue-mixin-store'
 8 | 
 9 | Vue.config.productionTip = false
10 | Vue.component(Switcher.name, Switcher)
11 | Vue.component(VueMixinStore.FlowLoader.name, VueMixinStore.FlowLoader)
12 | 
13 | new Vue({
14 |   el: '#app',
15 |   router,
16 |   store,
17 |   render: h => h(App)
18 | })
19 | 


--------------------------------------------------------------------------------
/examples/pages/animated.vue:
--------------------------------------------------------------------------------
 1 | <style lang="scss">
 2 | </style>
 3 | 
 4 | <template>
 5 |   <div id="animated">
 6 |     <h1>切换动画</h1>
 7 |     <h3>header click 切换</h3>
 8 |     <section>
 9 |       <main>
10 |         <v-switcher :headers="headers" :animated="true" align="start">
11 |           <div class="demo-item" slot="0">
12 |             第一个tab
13 |           </div>
14 |           <div class="demo-item" slot="1">
15 |             第二个tab
16 |           </div>
17 |           <div class="demo-item" slot="2">
18 |             第三个tab
19 |           </div>
20 |           <div class="demo-item" slot="3">
21 |             第四个tab
22 |           </div>
23 |           <div class="demo-item" slot="4">
24 |             第五个tab
25 |           </div>
26 |         </v-switcher>
27 |       </main>
28 |     </section>
29 |     <h3>header hover 切换</h3>
30 |     <section>
31 |       <main>
32 |         <v-switcher :headers="headers" :animated="true" header-trigger="hover" align="start">
33 |           <div class="demo-item" slot="0">
34 |             第一个tab
35 |           </div>
36 |           <div class="demo-item" slot="1">
37 |             第二个tab
38 |           </div>
39 |           <div class="demo-item" slot="2">
40 |             第三个tab
41 |           </div>
42 |           <div class="demo-item" slot="3">
43 |             第四个tab
44 |           </div>
45 |           <div class="demo-item" slot="4">
46 |             第五个tab
47 |           </div>
48 |         </v-switcher>
49 |       </main>
50 |     </section>
51 |   </div>
52 | </template>
53 | 
54 | <script>
55 | export default {
56 |   name: 'Animated',
57 |   components: {},
58 |   props: {},
59 |   data() {
60 |     return {
61 |       headers: [
62 |         'tab-1',
63 |         'tab-2',
64 |         'tab-3',
65 |         'tab-4',
66 |         'tab-5'
67 |       ]
68 |     }
69 |   },
70 |   computed: {},
71 |   watch: {},
72 |   created() {},
73 |   mounted() {},
74 |   methods: {}
75 | }
76 | </script>
77 | 


--------------------------------------------------------------------------------
/examples/pages/carousel.vue:
--------------------------------------------------------------------------------
  1 | <style lang="scss">
  2 | #carousel {
  3 | 
  4 | }
  5 | </style>
  6 | 
  7 | <template>
  8 |   <div id="carousel">
  9 |     <h1>自动轮播</h1>
 10 |     <h3>最简单的模式</h3>
 11 |     <section class="many">
 12 |       <main>
 13 |         <v-switcher ref="switch" :headers="headers" align="start" @header-move="handleHeaderMove">
 14 |           <template slot="header-after">
 15 |             <button @click="backward">向后</button>
 16 |             <button @click="forward">向前</button>
 17 |           </template>
 18 |           <div
 19 |             v-for="(item, index) in headers"
 20 |             :slot="`${index}`"
 21 |             :key="index"
 22 |             class="demo-item"
 23 |           >
 24 |             第{{ item }}个tab
 25 |           </div>
 26 |         </v-switcher>
 27 |       </main>
 28 |     </section>
 29 |     <h3>带切换动画和指示器</h3>
 30 |     <section>
 31 |       <main>
 32 |         <v-switcher :headers="headers.slice(0, 5)" :swipe="true" :disabled-swipe="true" :autoplay="2000" item-width="600px">
 33 |           <div :style="{ height: '400px', backgroundColor: 'rgba(21,174,103,.5)' }" slot="0">
 34 |             <button @click="handleClick">第一个tab</button>
 35 |           </div>
 36 |           <div :style="{ height: '400px', backgroundColor: 'rgba(245,163,59,.5)' }" slot="1">
 37 |             <button @click="handleClick">第二个tab</button>
 38 |           </div>
 39 |           <div :style="{ height: '400px', backgroundColor: 'rgba(255,230,135,.5)' }" slot="2">
 40 |             <button @click="handleClick">第三个tab</button>
 41 |           </div>
 42 |           <div :style="{ height: '400px', backgroundColor: 'rgba(194,217,78,.5)' }" slot="3">
 43 |             <button @click="handleClick">第四个tab</button>
 44 |           </div>
 45 |           <div :style="{ height: '400px', backgroundColor: 'rgba(195,123,177,.5)' }" slot="4">
 46 |             <button @click="handleClick">第五个tab</button>
 47 |           </div>
 48 |         </v-switcher>
 49 |       </main>
 50 |     </section>
 51 |   </div>
 52 | </template>
 53 | 
 54 | <script>
 55 | export default {
 56 |   name: 'Carousel',
 57 |   components: {},
 58 |   props: {},
 59 |   data() {
 60 |     return {
 61 |       headers: [
 62 |         'tab-1',
 63 |         'tab-2',
 64 |         'tab-3',
 65 |         'tab-4',
 66 |         'tab-5',
 67 |         'tab-6',
 68 |         'tab-7',
 69 |         'tab-8',
 70 |         'tab-9',
 71 |         'tab-10',
 72 |         'tab-11',
 73 |         'tab-12',
 74 |         'tab-13',
 75 |         'tab-14',
 76 |         'tab-15',
 77 |         'tab-16',
 78 |         'tab-17',
 79 |         'tab-18',
 80 |         'tab-19',
 81 |         'tab-20',
 82 |         'tab-21',
 83 |         'tab-22'
 84 |       ]
 85 |     }
 86 |   },
 87 |   computed: {},
 88 |   watch: {},
 89 |   created() {},
 90 |   mounted() {},
 91 |   methods: {
 92 |     getRandomColor() {
 93 |       var colors = [
 94 |         'rgba(21,174,103,.5)',
 95 |         'rgba(245,163,59,.5)',
 96 |         'rgba(255,230,135,.5)',
 97 |         'rgba(194,217,78,.5)',
 98 |         'rgba(195,123,177,.5)',
 99 |         'rgba(125,205,244,.5)'
100 |       ]
101 |       return colors[~~(Math.random() * colors.length)]
102 |     },
103 |     handleHeaderMove(data) {
104 |       console.log(data)
105 |     },
106 |     backward() {
107 |       this.$refs.switch.backward()
108 |     },
109 |     forward() {
110 |       this.$refs.switch.forward()
111 |     },
112 |     handleClick() {
113 |       console.log('handleClick')
114 |     }
115 |   }
116 | }
117 | </script>
118 | 


--------------------------------------------------------------------------------
/examples/pages/index.vue:
--------------------------------------------------------------------------------
 1 | <style lang="scss">
 2 | </style>
 3 | 
 4 | <template>
 5 |   <div id="index">
 6 |     index page
 7 |   </div>
 8 | </template>
 9 | 
10 | <script>
11 | export default {
12 |   name: 'Index',
13 |   components: {},
14 |   props: {},
15 |   data() {
16 |     return {}
17 |   },
18 |   computed: {},
19 |   watch: {},
20 |   created() {},
21 |   mounted() {},
22 |   methods: {}
23 | }
24 | </script>
25 | 


--------------------------------------------------------------------------------
/examples/pages/list.vue:
--------------------------------------------------------------------------------
  1 | <style lang="scss">
  2 | #list {
  3 |   overflow: hidden;
  4 | 
  5 |   .test {
  6 |     height: 300px;
  7 |     overflow: hidden;
  8 | 
  9 |     >div {
 10 |       height: 100%;
 11 |       overflow-y: auto;
 12 |       -webkit-overflow-scrolling: touch;
 13 |     }
 14 |   }
 15 | }
 16 | </style>
 17 | 
 18 | <template>
 19 |   <div id="list">
 20 |     <h1>start</h1>
 21 |     <button @click="prev">prev</button>
 22 |     <button @click="next">next</button>
 23 |     <button @click="destroy">destroy</button>
 24 |     <button>active：{{ active }}</button>
 25 |     <div class="test" ref="test">
 26 |       <div style="background-color: #00a1d6">
 27 |         <Test text="111111" />
 28 |         <Test text="111111" />
 29 |         <Test text="111111" />
 30 |         <Test text="111111" />
 31 |         <Test text="111111" />
 32 |         <Test text="111111" />
 33 |         <Test text="111111" />
 34 |         <Test text="111111" />
 35 |         <Test text="111111" />
 36 |         <Test text="111111" />
 37 |         <Test text="111111" />
 38 |         <Test text="111111" />
 39 |         <Test text="111111" />
 40 |         <Test text="111111" />
 41 |         <Test text="111111" />
 42 |         <Test text="111111" />
 43 |         <Test text="111111" />
 44 |         <Test text="111111" />
 45 |         <Test text="111111" />
 46 |         <Test text="111111" />
 47 |         <Test text="111111" />
 48 |       </div>
 49 |       <div style="background-color: #4fc08d">
 50 |         <Test text="2222222222222222222222222222222222" />
 51 |         <Test text="2222222222222222222222222222222222" />
 52 |         <Test text="2222222222222222222222222222222222" />
 53 |         <Test text="2222222222222222222222222222222222" />
 54 |         <Test text="2222222222222222222222222222222222" />
 55 |         <Test text="2222222222222222222222222222222222" />
 56 |         <Test text="2222222222222222222222222222222222" />
 57 |         <Test text="2222222222222222222222222222222222" />
 58 |         <Test text="2222222222222222222222222222222222" />
 59 |         <Test text="2222222222222222222222222222222222" />
 60 |         <Test text="2222222222222222222222222222222222" />
 61 |         <Test text="2222222222222222222222222222222222" />
 62 |         <Test text="2222222222222222222222222222222222" />
 63 |         <Test text="2222222222222222222222222222222222" />
 64 |         <Test text="2222222222222222222222222222222222" />
 65 |         <Test text="2222222222222222222222222222222222" />
 66 |         <Test text="2222222222222222222222222222222222" />
 67 |         <Test text="2222222222222222222222222222222222" />
 68 |         <Test text="2222222222222222222222222222222222" />
 69 |         <Test text="2222222222222222222222222222222222" />
 70 |         <Test text="2222222222222222222222222222222222" />
 71 |       </div>
 72 |       <div style="background-color: #657786">
 73 |         <Test text="3333333333333333333333333333333333" />
 74 |         <Test text="3333333333333333333333333333333333" />
 75 |         <Test text="3333333333333333333333333333333333" />
 76 |         <Test text="3333333333333333333333333333333333" />
 77 |         <Test text="3333333333333333333333333333333333" />
 78 |         <Test text="3333333333333333333333333333333333" />
 79 |         <Test text="3333333333333333333333333333333333" />
 80 |         <Test text="3333333333333333333333333333333333" />
 81 |         <Test text="3333333333333333333333333333333333" />
 82 |         <Test text="3333333333333333333333333333333333" />
 83 |         <Test text="3333333333333333333333333333333333" />
 84 |         <Test text="3333333333333333333333333333333333" />
 85 |         <Test text="3333333333333333333333333333333333" />
 86 |         <Test text="3333333333333333333333333333333333" />
 87 |         <Test text="3333333333333333333333333333333333" />
 88 |         <Test text="3333333333333333333333333333333333" />
 89 |         <Test text="3333333333333333333333333333333333" />
 90 |         <Test text="3333333333333333333333333333333333" />
 91 |         <Test text="3333333333333333333333333333333333" />
 92 |         <Test text="3333333333333333333333333333333333" />
 93 |         <Test text="3333333333333333333333333333333333" />
 94 |       </div>
 95 |       <div style="background-color: goldenrod">
 96 |         <Test text="4444444444444444444444444444444444" />
 97 |         <Test text="4444444444444444444444444444444444" />
 98 |         <Test text="4444444444444444444444444444444444" />
 99 |         <Test text="4444444444444444444444444444444444" />
100 |         <Test text="4444444444444444444444444444444444" />
101 |         <Test text="4444444444444444444444444444444444" />
102 |         <Test text="4444444444444444444444444444444444" />
103 |         <Test text="4444444444444444444444444444444444" />
104 |         <Test text="4444444444444444444444444444444444" />
105 |         <Test text="4444444444444444444444444444444444" />
106 |         <Test text="4444444444444444444444444444444444" />
107 |         <Test text="4444444444444444444444444444444444" />
108 |         <Test text="4444444444444444444444444444444444" />
109 |         <Test text="4444444444444444444444444444444444" />
110 |         <Test text="4444444444444444444444444444444444" />
111 |         <Test text="4444444444444444444444444444444444" />
112 |         <Test text="4444444444444444444444444444444444" />
113 |         <Test text="4444444444444444444444444444444444" />
114 |         <Test text="4444444444444444444444444444444444" />
115 |         <Test text="4444444444444444444444444444444444" />
116 |         <Test text="4444444444444444444444444444444444" />
117 |       </div>
118 |     </div>
119 |     <p>list</p>
120 |     <p>list</p>
121 |     <p>list</p>
122 |     <p>list</p>
123 |     <p>list</p>
124 |     <p>list</p>
125 |     <p>list</p>
126 |     <p>list</p>
127 |     <p>list</p>
128 |     <p>list</p>
129 |     <p>list</p>
130 |     <p>list</p>
131 |     <p>list</p>
132 |     <p>list</p>
133 |     <p>list</p>
134 |     <p>list</p>
135 |     <p>list</p>
136 |     <p>list</p>
137 |     <p>list</p>
138 |     <p>list</p>
139 |     <p>list</p>
140 |     <p>list</p>
141 |     <p>list</p>
142 |     <p>list</p>
143 |     <p>list</p>
144 |     <p>list</p>
145 |     <p>list</p>
146 |     <p>list</p>
147 |     <p>list</p>
148 |     <p>list</p>
149 |     <p>list</p>
150 |     <p>list</p>
151 |     <p>list</p>
152 |     <p>list</p>
153 |     <p>list</p>
154 |     <p>list</p>
155 |     <p>list</p>
156 |     <p>list</p>
157 |     <p>list</p>
158 |     <p>list</p>
159 |     <p>list</p>
160 |     <p>list</p>
161 |     <p>list</p>
162 |     <p>list</p>
163 |     <p>list</p>
164 |     <p>list</p>
165 |     <p>list</p>
166 |     <p>list</p>
167 |     <p>list</p>
168 |     <p>list</p>
169 |     <p>list</p>
170 |     <p>list</p>
171 |     <p>list</p>
172 |     <p>list</p>
173 |     <p>list</p>
174 |     <p>list</p>
175 |     <p>list</p>
176 |     <p>list</p>
177 |     <p>list</p>
178 |     <p>list</p>
179 |     <p>list</p>
180 |     <p>list</p>
181 |     <p>list</p>
182 |     <p>list</p>
183 |     <p>list</p>
184 |     <p>list</p>
185 |     <p>list</p>
186 |     <p>list</p>
187 |     <p>list</p>
188 |     <p>list</p>
189 |     <p>list</p>
190 |     <p>list</p>
191 |     <p>list</p>
192 |     <p>list</p>
193 |     <p>list</p>
194 |     <p>list</p>
195 |     <p>list</p>
196 |     <p>list</p>
197 |     <p>list</p>
198 |     <p>list</p>
199 |     <p>list</p>
200 |     <p>list</p>
201 |     <p>list</p>
202 |     <p>list</p>
203 |     <p>list</p>
204 |     <p>list</p>
205 |     <p>list</p>
206 |     <p>list</p>
207 |     <p>list</p>
208 |     <p>list</p>
209 |     <p>list</p>
210 |     <p>list</p>
211 |     <p>list</p>
212 |     <p>list</p>
213 |     <p>list</p>
214 |     <p>list</p>
215 |     <p>list</p>
216 |     <p>list</p>
217 |     <p>list</p>
218 |     <p>list</p>
219 |     <h1>end</h1>
220 |   </div>
221 | </template>
222 | 
223 | <script>
224 | import Slide from '../../src/slide'
225 | import Test from '../Test'
226 | 
227 | export default {
228 |   components: {
229 |     Test
230 |   },
231 |   data() {
232 |     return {
233 |       slide: null,
234 |       active: 0
235 |     }
236 |   },
237 |   mounted() {
238 |     this.slide = new Slide({
239 |       el: this.$refs.test,
240 |       swipe: true,
241 |       sticky: true,
242 |       duration: 300,
243 |       count: 4,
244 |       index: this.active,
245 |       callback: index => {
246 |         this.active = index
247 |       }
248 |     })
249 |   },
250 |   methods: {
251 |     prev() {
252 |       this.slide.prev()
253 |     },
254 |     next() {
255 |       this.slide.next()
256 |     },
257 |     destroy() {
258 |       this.slide.destroy()
259 |     }
260 |   }
261 | }
262 | </script>
263 | 


--------------------------------------------------------------------------------
/examples/pages/mobile.vue:
--------------------------------------------------------------------------------
  1 | <style lang="scss">
  2 | #h5 {
  3 |   position: fixed;
  4 |   bottom: 0;
  5 |   right: 0;
  6 |   left: 0;
  7 |   top: 0;
  8 |   z-index: 10;
  9 |   background-color: #fff;
 10 |   transform: translateY(0);
 11 |   transition: transform 0.4s ease;
 12 | 
 13 |   &.active {
 14 |     transform: translateY(-120px);
 15 |   }
 16 | 
 17 |   .carousel {
 18 |     width: 100%;
 19 |     height: 120px;
 20 | 
 21 |     .c-item {
 22 |       display: block;
 23 |       height: 120px;
 24 |       background-position: center;
 25 |       background-repeat: no-repeat;
 26 |       background-size: cover;
 27 |     }
 28 | 
 29 |     .v-switcher {
 30 |       &-header {
 31 |         &-wrap {
 32 |           box-sizing: border-box;
 33 |           position: absolute;
 34 |           right: 10px;
 35 |           bottom: 10px;
 36 |           height: 35px;
 37 |           z-index: 1;
 38 |           width: 150px;
 39 |           border-bottom: none;
 40 |         }
 41 | 
 42 |         &-item {
 43 |           margin-left: 8px;
 44 |           width: 18px;
 45 |           height: 18px;
 46 |           background-position: -855px -790px;
 47 |           background-image: url("../icons.png");
 48 |           border-bottom-width: 0;
 49 |           cursor: default;
 50 |           padding: 0;
 51 | 
 52 |           &.is-active {
 53 |             background-position: -855px -727px;
 54 |           }
 55 |         }
 56 |       }
 57 |     }
 58 |   }
 59 | 
 60 |   .content {
 61 |     height: 100%;
 62 |     box-sizing: border-box;
 63 | 
 64 |     .v-switcher-header-anchor {
 65 |       height: 2px;
 66 |       bottom: 0;
 67 |       background-color: palevioletred;
 68 |     }
 69 | 
 70 |     .ul-wrap {
 71 |       margin: 0;
 72 |       padding: 0;
 73 | 
 74 |       .hoz-wrap {
 75 |         width: 100%;
 76 |         height: 150px;
 77 |         overflow: hidden;
 78 |       }
 79 | 
 80 |       .item-wrap {
 81 |         display: inline-block;
 82 |         white-space: nowrap;
 83 |         overflow-x: auto;
 84 |         overflow-y: hidden;
 85 |         height: 110%;
 86 |         padding-bottom: 10%;
 87 |         box-sizing: content-box;
 88 |         width: 100%;
 89 |         -webkit-overflow-scrolling: touch;
 90 | 
 91 |         .item {
 92 |           height: 150px;
 93 |           line-height: 150px;
 94 |           font-size: 24px;
 95 |           display: inline-block;
 96 |           text-align: center;
 97 |           padding: 0 10px;
 98 |           width: 120px;
 99 |           white-space: nowrap;
100 |         }
101 |       }
102 |     }
103 |   }
104 | 
105 |   .flow-loader-state {
106 |     text-align: center;
107 |     height: 40px;
108 |     line-height: 40px;
109 |   }
110 | }
111 | </style>
112 | 
113 | <template>
114 |   <div id="h5" :class="{ 'active': isActive }">
115 |     <!--
116 |     <div class="carousel">
117 |       <v-switcher :headers="headers1" :swipe="true" :autoplay="2000" align="end" :header-height="18">
118 |         <a
119 |           v-for="(item, index) in headers1"
120 |           :key="index"
121 |           :slot="`${index}`"
122 |           :style="{ backgroundColor: getRandomColor() }"
123 |           class="c-item"
124 |           href="javascript:;"
125 |         >
126 |           {{ item.title }}
127 |         </a>
128 |       </v-switcher>
129 |     </div>
130 |     -->
131 |     <div class="content">
132 |       <v-switcher
133 |         :headers="headers2"
134 |         :swipe="true"
135 |         :sticky="true"
136 |         :anchor-padding="20"
137 |         @change="handleTabSwitch"
138 |       >
139 |         <template slot="header-before">
140 |           <router-link to="/list">
141 |             <button>筛选</button>
142 |           </router-link>
143 |         </template>
144 |         <template slot="header-after">
145 |           <button @click="handleBtnClick">筛选</button>
146 |         </template>
147 |         <v-scroller
148 |           v-for="(item, index) in headers2"
149 |           ref="scroll"
150 |           :key="index"
151 |           :event-step="30"
152 |           :slot="`${index}`"
153 |           @bottom="handleLoadMore"
154 |         >
155 |           <div class="ul-wrap">
156 |             <div class="carousel" @touchstart.stop @touchmove.stop>
157 |               <v-switcher :headers="headers1" :swipe="true" :autoplay="2000" align="end" :header-height="18">
158 |                 <a
159 |                   v-for="(item, index) in headers1"
160 |                   :key="index"
161 |                   :slot="`${index}`"
162 |                   :style="{ backgroundColor: getRandomColor() }"
163 |                   class="c-item"
164 |                   href="javascript:;"
165 |                 >
166 |                   {{ item.title }}
167 |                 </a>
168 |               </v-switcher>
169 |             </div>
170 |             <flow-loader
171 |               ref="loader"
172 |               func="getListByPage"
173 |               type="page"
174 |               :auto="0"
175 |               :query="{
176 |                 id: item,
177 |                 count: 10,
178 |                 index
179 |               }"
180 |               :callback="handleCallback"
181 |             >
182 |               <div slot-scope="{ flow }">
183 |                 <ItemComponent
184 |                   v-for="(item, index) in flow"
185 |                   :key="item.id"
186 |                   :item="item"
187 |                   :index="index"
188 |                   :style="{ height: '110px' }"
189 |                 />
190 |               </div>
191 |             </flow-loader>
192 |           </div>
193 |         </v-scroller>
194 |       </v-switcher>
195 |     </div>
196 |   </div>
197 | </template>
198 | 
199 | <script>
200 | import ItemComponent from '../Item'
201 | import VScroller from 'h5-vue-scroller'
202 | 
203 | export default {
204 |   name: 'Mobile',
205 |   components: {
206 |     VScroller,
207 |     ItemComponent
208 |   },
209 |   data() {
210 |     const headers2 = [
211 |       'tab-0',
212 |       'tab-1',
213 |       'tab-5',
214 |       'tab-9',
215 |       'tab-4答',
216 |       'tab-8奥术大',
217 |       'tab-2奥术大师',
218 |       'tab-乔斯达乔瑟夫',
219 |       'tab-6阿斯达稍等',
220 |       'tab-7乔斯达乔纳森',
221 |     ]
222 |     return {
223 |       click: 0,
224 |       ItemComponent,
225 |       isActive: false,
226 |       headers1: [
227 |         {
228 |           text: '',
229 |           title: '成名必备！'
230 |         },
231 |         {
232 |           text: '',
233 |           title: '花泽香菜，甜美来袭！'
234 |         },
235 |         {
236 |           text: '',
237 |           title: '鸡鸣紫陌曙光寒，水转皇州春色阑'
238 |         },
239 |         {
240 |           text: '',
241 |           title: '请查收您的追番清单!'
242 |         },
243 |         {
244 |           text: '',
245 |           title: '欢迎来到天生制造狂的世界'
246 |         }
247 |       ],
248 |       headers2,
249 |       activeIndex: 0
250 |     }
251 |   },
252 |   methods: {
253 |     getRandomColor() {
254 |       var colors = [
255 |         'rgba(21,174,103,.5)',
256 |         'rgba(245,163,59,.5)',
257 |         'rgba(255,230,135,.5)',
258 |         'rgba(194,217,78,.5)',
259 |         'rgba(195,123,177,.5)',
260 |         'rgba(125,205,244,.5)'
261 |       ]
262 |       return colors[~~(Math.random() * colors.length)]
263 |     },
264 |     handleTabSwitch(index) {
265 |       console.log('handleTabSwitch', index)
266 |       this.activeIndex = index
267 |       this.$nextTick(() => {
268 |         this.$refs.loader[index].initData()
269 |       })
270 |     },
271 |     handleLoadMore() {
272 |       this.$refs.loader[this.activeIndex].loadMore()
273 |     },
274 |     handleBtnClick() {
275 |       alert('筛选')
276 |     },
277 |     handleCallback(data) {
278 |       console.log('callback', data)
279 |     }
280 |   }
281 | }
282 | </script>
283 | 


--------------------------------------------------------------------------------
/examples/pages/simple.vue:
--------------------------------------------------------------------------------
  1 | <style lang="scss">
  2 | #simple {
  3 |   .vertical {
  4 |     .v-switcher-header-item-cell.is-active {
  5 |       border-bottom-color: transparent;
  6 |     }
  7 | 
  8 |     .v-switcher-header-anchor {
  9 |       background-color: #ff6881;
 10 |       opacity: 0.1;
 11 |       width: 100%;
 12 |     }
 13 | 
 14 |     .v-switcher-header-item {
 15 |       padding: 10px 20px;
 16 |     }
 17 | 
 18 |     .v-switcher-header-wrap {
 19 |       width: 100px;
 20 |     }
 21 |   }
 22 | 
 23 |   .center-type {
 24 |     .v-switcher-header-anchor {
 25 |       height: 3px;
 26 |       background-color: red;
 27 |       bottom: 0;
 28 |     }
 29 |   }
 30 | }
 31 | </style>
 32 | 
 33 | <template>
 34 |   <div id="simple">
 35 |     <h1>简单用例</h1>
 36 |     <h3>header 展开</h3>
 37 |     <section>
 38 |       <main>
 39 |         <v-switcher :headers="headers" align="around">
 40 |           <div class="demo-item" slot="0">
 41 |             第一个tab
 42 |           </div>
 43 |           <div class="demo-item" slot="1">
 44 |             第二个tab
 45 |           </div>
 46 |           <div class="demo-item" slot="2">
 47 |             第三个tab
 48 |           </div>
 49 |           <div class="demo-item" slot="3">
 50 |             第四个tab
 51 |           </div>
 52 |           <div class="demo-item" slot="4">
 53 |             第五个tab
 54 |           </div>
 55 |           <div class="demo-item" slot="5">
 56 |             第六个tab
 57 |           </div>
 58 |           <div class="demo-item" slot="6">
 59 |             第七个tab
 60 |           </div>
 61 |           <div class="demo-item" slot="7">
 62 |             第八个tab
 63 |           </div>
 64 |           <div class="demo-item" slot="8">
 65 |             第九个tab
 66 |           </div>
 67 |         </v-switcher>
 68 |       </main>
 69 |     </section>
 70 |     <h3>header 居左</h3>
 71 |     <h5>这个模式下，屏幕外的 header 会页面切换时自动滚动到视口内</h5>
 72 |     <section>
 73 |       <main>
 74 |         <v-switcher :headers="headers" align="start">
 75 |           <div class="demo-item" slot="0">
 76 |             第一个tab
 77 |           </div>
 78 |           <div class="demo-item" slot="1">
 79 |             第二个tab
 80 |           </div>
 81 |           <div class="demo-item" slot="2">
 82 |             第三个tab
 83 |           </div>
 84 |           <div class="demo-item" slot="3">
 85 |             第四个tab
 86 |           </div>
 87 |           <div class="demo-item" slot="4">
 88 |             第五个tab
 89 |           </div>
 90 |           <div class="demo-item" slot="5">
 91 |             第六个tab
 92 |           </div>
 93 |           <div class="demo-item" slot="6">
 94 |             第七个tab
 95 |           </div>
 96 |           <div class="demo-item" slot="7">
 97 |             第八个tab
 98 |           </div>
 99 |           <div class="demo-item" slot="8">
100 |             第九个tab
101 |           </div>
102 |         </v-switcher>
103 |       </main>
104 |     </section>
105 |     <h3>header 居中</h3>
106 |     <section class="center-type">
107 |       <main>
108 |         <v-switcher :headers="headerCenter" align="center">
109 |           <div class="demo-item" slot="0">
110 |             第一个tab
111 |           </div>
112 |           <div class="demo-item" slot="1">
113 |             第二个tab
114 |           </div>
115 |           <div class="demo-item" slot="2">
116 |             第三个tab
117 |           </div>
118 |           <div class="demo-item" slot="3">
119 |             第四个tab
120 |           </div>
121 |           <div class="demo-item" slot="4">
122 |             第五个tab
123 |           </div>
124 |           <div class="demo-item" slot="5">
125 |             第六个tab
126 |           </div>
127 |           <div class="demo-item" slot="6">
128 |             第七个tab
129 |           </div>
130 |           <div class="demo-item" slot="7">
131 |             第八个tab
132 |           </div>
133 |           <div class="demo-item" slot="8">
134 |             第九个tab
135 |           </div>
136 |         </v-switcher>
137 |       </main>
138 |     </section>
139 |     <h3>header 居右</h3>
140 |     <section class="center-type">
141 |       <main>
142 |         <v-switcher :headers="headerRight" align="end">
143 |           <div class="demo-item" slot="0">
144 |             第一个tab
145 |           </div>
146 |           <div class="demo-item" slot="1">
147 |             第二个tab
148 |           </div>
149 |           <div class="demo-item" slot="2">
150 |             第三个tab
151 |           </div>
152 |           <div class="demo-item" slot="3">
153 |             第四个tab
154 |           </div>
155 |           <div class="demo-item" slot="4">
156 |             第五个tab
157 |           </div>
158 |           <div class="demo-item" slot="5">
159 |             第六个tab
160 |           </div>
161 |           <div class="demo-item" slot="6">
162 |             第七个tab
163 |           </div>
164 |           <div class="demo-item" slot="7">
165 |             第八个tab
166 |           </div>
167 |           <div class="demo-item" slot="8">
168 |             第九个tab
169 |           </div>
170 |         </v-switcher>
171 |       </main>
172 |     </section>
173 |     <h3>header 垂直</h3>
174 |     <section>
175 |       <main class="vertical">
176 |         <v-switcher :headers="headers2" align="vertical">
177 |           <div class="demo-item" slot="0">
178 |             第一个tab
179 |           </div>
180 |           <div class="demo-item" slot="1">
181 |             第二个tab
182 |           </div>
183 |           <div class="demo-item" slot="2">
184 |             第三个tab
185 |           </div>
186 |           <div class="demo-item" slot="3">
187 |             第四个tab
188 |           </div>
189 |           <div class="demo-item" slot="4">
190 |             第五个tab
191 |           </div>
192 |           <div class="demo-item" slot="5">
193 |             第六个tab
194 |           </div>
195 |           <div class="demo-item" slot="6">
196 |             第七个tab
197 |           </div>
198 |           <div class="demo-item" slot="7">
199 |             第八个tab
200 |           </div>
201 |           <div class="demo-item" slot="8">
202 |             第九个tab
203 |           </div>
204 |         </v-switcher>
205 |       </main>
206 |     </section>
207 |   </div>
208 | </template>
209 | 
210 | <script>
211 | export default {
212 |   name: 'Simple',
213 |   data() {
214 |     return {
215 |       headers: [
216 |         'tab-1',
217 |         'tab-2',
218 |         'tab-3',
219 |         'tab-4',
220 |         'tab-5',
221 |         'tab-6',
222 |         'tab-7',
223 |         'tab-8',
224 |         'tab-9'
225 |       ],
226 |       headers2: [
227 |         'tab-1',
228 |         'tab-2',
229 |         'tab-3',
230 |         'tab-4',
231 |         'tab-5啊啊啊啊啊啊啊啊啊5啊啊啊啊啊啊啊啊啊',
232 |         'tab-6',
233 |         'tab-7',
234 |         'tab-8',
235 |         'tab-9'
236 |       ],
237 |       headerCenter: ['关注', '推荐', '最新'],
238 |       headerRight: [
239 |         {
240 |           name: '最新',
241 |           icon: 'ios',
242 |           'name-active': '最新的',
243 |           'icon-active': 'wechat'
244 |         },
245 |         {
246 |           name: '最热',
247 |           icon: 'android',
248 |           'name-active': '最热的',
249 |           'icon-active': 'weibo'
250 |         }
251 |       ]
252 |     }
253 |   }
254 | }
255 | </script>
256 | 


--------------------------------------------------------------------------------
/examples/pages/swipe.vue:
--------------------------------------------------------------------------------
 1 | <style lang="scss">
 2 | </style>
 3 | 
 4 | <template>
 5 |   <div id="swipe">
 6 |     <h1>手势切换（仅支持移动端）</h1>
 7 |     <h3>普通使用</h3>
 8 |     <section>
 9 |       <main>
10 |         <v-switcher :headers="headers" :swipe="true" align="start">
11 |           <div class="demo-item" slot="0">
12 |             第一个tab
13 |           </div>
14 |           <div class="demo-item" slot="1">
15 |             第二个tab
16 |           </div>
17 |           <div class="demo-item" slot="2">
18 |             第三个tab
19 |           </div>
20 |           <div class="demo-item" slot="3">
21 |             第四个tab
22 |           </div>
23 |           <div class="demo-item" slot="4">
24 |             第五个tab
25 |           </div>
26 |           <div class="demo-item" slot="5">
27 |             第六个tab
28 |           </div>
29 |           <div class="demo-item" slot="6">
30 |             第七个tab
31 |           </div>
32 |         </v-switcher>
33 |       </main>
34 |     </section>
35 |     <h1>手势切换（仅支持移动端）</h1>
36 |     <h3>不粘手</h3>
37 |     <section>
38 |       <main>
39 |         <v-switcher :headers="headers" :animated="true" align="start">
40 |           <div class="demo-item" slot="0">
41 |             第一个tab
42 |           </div>
43 |           <div class="demo-item" slot="1">
44 |             第二个tab
45 |           </div>
46 |           <div class="demo-item" slot="2">
47 |             第三个tab
48 |           </div>
49 |           <div class="demo-item" slot="3">
50 |             第四个tab
51 |           </div>
52 |           <div class="demo-item" slot="4">
53 |             第五个tab
54 |           </div>
55 |           <div class="demo-item" slot="5">
56 |             第六个tab
57 |           </div>
58 |           <div class="demo-item" slot="6">
59 |             第七个tab
60 |           </div>
61 |         </v-switcher>
62 |       </main>
63 |     </section>
64 |   </div>
65 | </template>
66 | 
67 | <script>
68 | export default {
69 |   name: 'Swipe',
70 |   components: {},
71 |   props: {},
72 |   data() {
73 |     return {
74 |       headers: [
75 |         'tab-1',
76 |         'tab-2',
77 |         'tab-3',
78 |         'tab-4',
79 |         'tab-5',
80 |         'tab-6',
81 |         'tab-7'
82 |       ]
83 |     }
84 |   },
85 |   computed: {},
86 |   watch: {},
87 |   created() {},
88 |   mounted() {},
89 |   methods: {}
90 | }
91 | </script>
92 | 


--------------------------------------------------------------------------------
/examples/pages/usage.vue:
--------------------------------------------------------------------------------
  1 | <style lang="scss">
  2 | #usage {
  3 |   .v-switcher-header-item {
  4 |     cursor: pointer;
  5 |   }
  6 | 
  7 |   .carousel {
  8 |     width: 440px;
  9 |     height: 220px;
 10 |     border-radius: 4px;
 11 |     overflow: hidden;
 12 | 
 13 |     .c-item {
 14 |       display: block;
 15 |       height: 220px;
 16 |       background-position: center;
 17 |       background-repeat: no-repeat;
 18 |       background-size: cover;
 19 | 
 20 |       .title {
 21 |         position: absolute;
 22 |         left: 0;
 23 |         right: 0;
 24 |         bottom: 0;
 25 |         height: 35px;
 26 |         line-height: 35px;
 27 |         display: block;
 28 |         overflow: hidden;
 29 |         white-space: nowrap;
 30 |         text-overflow: ellipsis;
 31 |         color: #fff;
 32 |         font-size: 15px;
 33 |         text-decoration: none;
 34 |         background: -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.5));
 35 |         padding-left: 10px;
 36 |         padding-right: 160px;
 37 |       }
 38 | 
 39 |       .more {
 40 |         display: block;
 41 |         position: absolute;
 42 |         right: 15px;
 43 |         bottom: 35px;
 44 |         color: #fff;
 45 |         background-color: rgba(0, 0, 0, 0.64);
 46 |         width: 50px;
 47 |         height: 24px;
 48 |         line-height: 24px;
 49 |         text-align: center;
 50 |         border-radius: 4px;
 51 |         opacity: 0;
 52 |         transition: all 0.2s linear;
 53 |         font-size: 12px;
 54 |         text-decoration: none;
 55 | 
 56 |         &:hover {
 57 |           text-shadow: 0 0 3px #fff;
 58 |         }
 59 | 
 60 |         &:after {
 61 |           content: '';
 62 |           display: inline-block;
 63 |           width: 6px;
 64 |           height: 12px;
 65 |           margin: -2px 0 0 5px;
 66 |           vertical-align: middle;
 67 |           background: url('../icons.png') -541px -218px;
 68 |         }
 69 |       }
 70 | 
 71 |       &:hover .more {
 72 |         opacity: 1;
 73 |       }
 74 |     }
 75 | 
 76 |     .v-switcher {
 77 |       &-header {
 78 |         &-wrap {
 79 |           box-sizing: border-box;
 80 |           position: absolute;
 81 |           right: 0;
 82 |           bottom: 0;
 83 |           height: 35px;
 84 |           z-index: 1;
 85 |           width: 150px;
 86 |           padding-right: 20px;
 87 |           border-bottom: none;
 88 |         }
 89 | 
 90 |         &-item {
 91 |           margin-left: 8px;
 92 |           width: 18px;
 93 |           height: 18px;
 94 |           background-position: -855px -790px;
 95 |           background-image: url("../icons.png");
 96 |           border-bottom-width: 0;
 97 |           cursor: pointer;
 98 |           padding: 0;
 99 | 
100 |           &:hover {
101 |             background-position: -919px -790px;
102 |           }
103 | 
104 |           &.is-active {
105 |             background-position: -855px -727px;
106 |           }
107 |         }
108 |       }
109 |     }
110 |   }
111 | 
112 |   .bangumi {
113 |     .b-item {
114 |       margin: 26px 20px 40px 0;
115 |       height: 398px;
116 |       background-color: #f6f9fa;
117 |       display: flex;
118 |       flex-direction: row;
119 |       justify-content: center;
120 |       align-items: center;
121 |     }
122 | 
123 |     .v-switcher {
124 |       overflow: visible;
125 |     }
126 | 
127 |     .v-switcher-header {
128 |       &-wrap {
129 |         overflow: visible;
130 |       }
131 | 
132 |       &-item {
133 |         width: 100%;
134 |         font-size: 18px;
135 |         line-height: 39px;
136 |         height: 39px;
137 |         color: #000;
138 |         transition: 0.2s;
139 |         border-bottom: 1px solid #e5e9ef;
140 | 
141 |         &:hover {
142 |           color: #00a1d6;
143 |         }
144 | 
145 |         &.is-active {
146 |           color: #00a1d6;
147 |           border-bottom-color: #00a1d6;
148 |           position: relative;
149 | 
150 |           &:after {
151 |             content: '';
152 |             position: absolute;
153 |             left: 50%;
154 |             margin-left: -3px;
155 |             bottom: 0;
156 |             width: 0;
157 |             height: 0;
158 |             border-bottom: 3px solid #00a1d6;
159 |             border-top: 0;
160 |             border-left: 3px dashed transparent;
161 |             border-right: 3px dashed transparent;
162 |           }
163 |         }
164 |       }
165 |     }
166 | 
167 |     .header-before {
168 |       margin-top: 8px;
169 | 
170 |       i {
171 |         display: inline-block;
172 |         width: 40px;
173 |         height: 40px;
174 |         margin-right: 10px;
175 |         vertical-align: middle;
176 |         float: left;
177 |         margin-top: -10px;
178 |         background-image: url("../icons.png");
179 |         background-position: -141px -140px;
180 |       }
181 | 
182 |       a {
183 |         font-size: 24px;
184 |         line-height: 24px;
185 |         font-weight: 400;
186 |         margin-right: 20px;
187 |         float: left;
188 |         color: #222;
189 |         transition: color 0.2s;
190 |         text-decoration: none;
191 | 
192 |         &:hover {
193 |           color: #00a1d6;
194 |         }
195 |       }
196 |     }
197 | 
198 |     .header-after {
199 |       display: block;
200 |       border: 1px solid #f25d8e;
201 |       width: 104px;
202 |       height: 34px;
203 |       line-height: 34px;
204 |       text-align: center;
205 |       color: #f25d8e;
206 |       font-size: 14px;
207 |       border-radius: 4px;
208 |       transition: 0.1s;
209 |       text-decoration: none;
210 |       margin-left: 30px;
211 | 
212 |       &:hover {
213 |         color: #fff;
214 |         background-color: #f25d8e;
215 | 
216 |         i {
217 |           background-position: -541px -218px;
218 |         }
219 |       }
220 | 
221 |       i {
222 |         display: inline-block;
223 |         vertical-align: middle;
224 |         background-position: -478px -281px;
225 |         width: 6px;
226 |         height: 12px;
227 |         margin: -2px 0 0 5px;
228 |         background-image: url("../icons.png");
229 |       }
230 |     }
231 |   }
232 | 
233 |   .recommended {
234 |     width: 700px;
235 |     height: 220px;
236 |     margin-left: 20px;
237 |     border-radius: 4px;
238 |     overflow: hidden;
239 |     position: relative;
240 | 
241 |     &:hover {
242 |       .indicator {
243 |         opacity: 1;
244 |       }
245 |     }
246 | 
247 |     .indicator {
248 |       position: absolute;
249 |       left: 0;
250 |       top: 0;
251 |       width: 100%;
252 |       height: 100%;
253 |       opacity: 0;
254 |       transition: all 0.3s;
255 |       display: flex;
256 |       flex-direction: row;
257 |       justify-content: space-between;
258 |       align-items: center;
259 |       pointer-events: none;
260 | 
261 |       button {
262 |         width: 20px;
263 |         cursor: pointer;
264 |         font-size: 12px;
265 |         color: #fff;
266 |         text-align: center;
267 |         background-color: rgba(0, 0, 0, 0.6);
268 |         background-image: url("../icons2.png");
269 |         box-sizing: content-box;
270 |         border-width: 0;
271 |         pointer-events: auto;
272 | 
273 |         &:hover,
274 |         &:focus {
275 |           outline-width: 0;
276 |           border-width: 0;
277 |         }
278 |       }
279 | 
280 |       .btn-prev {
281 |         border-radius: 0 4px 4px 0;
282 |         padding: 13px 5px 13px 10px;
283 |         background-position: 6px -1211px;
284 |       }
285 | 
286 |       .btn-next {
287 |         border-radius: 4px 0 0 4px;
288 |         padding: 13px 10px 13px 5px;
289 |         background-position: 25px -1262px;
290 |       }
291 |     }
292 | 
293 |     .v-switcher {
294 |       height: 100%;
295 | 
296 |       &-header-wrap {
297 |         display: none;
298 |       }
299 | 
300 |       &-content {
301 |         height: 220px;
302 | 
303 |         .r-item {
304 |           height: 220px;
305 |           display: flex;
306 |           flex-direction: row;
307 |           justify-content: center;
308 |           align-items: center;
309 |         }
310 |       }
311 |     }
312 |   }
313 | 
314 |   .ranking {
315 |     .header-before {
316 |       font-size: 18px;
317 |       font-weight: 400;
318 |       color: #000;
319 |       margin-right: 8px;
320 |       margin-top: 4px;
321 |     }
322 | 
323 |     .k-item {
324 |       height: 340px;
325 |       display: flex;
326 |       flex-direction: row;
327 |       justify-content: center;
328 |       align-items: center;
329 |     }
330 | 
331 |     .v-switcher {
332 |       &-header {
333 |         &-item {
334 |           margin-left: 12px;
335 |           padding: 0;
336 |           font-size: 12px;
337 |           line-height: 24px;
338 |           height: 24px;
339 |           color: #000;
340 |           transition: 0.2s;
341 |           border-bottom: 1px solid transparent;
342 | 
343 |           &.is-active {
344 |             color: #00a1d6;
345 |             border-bottom-color: #00a1d6;
346 |             position: relative;
347 | 
348 |             &:after {
349 |               content: '';
350 |               position: absolute;
351 |               left: 50%;
352 |               margin-left: -3px;
353 |               bottom: 0;
354 |               width: 0;
355 |               height: 0;
356 |               border-bottom: 3px solid #00a1d6;
357 |               border-top: 0;
358 |               border-left: 3px dashed transparent;
359 |               border-right: 3px dashed transparent;
360 |             }
361 |           }
362 |         }
363 |       }
364 |     }
365 |   }
366 | }
367 | </style>
368 | 
369 | <template>
370 |   <div id="usage">
371 |     <h3>轮播</h3>
372 |     <section>
373 |       <div class="carousel">
374 |         <v-switcher :headers="headers1" :swipe="true" :autoplay="2000" align="end">
375 |           <a
376 |             v-for="(item, index) in headers1"
377 |             :key="index"
378 |             :slot="`${index}`"
379 |             :style="{ backgroundColor: getRandomColor() }"
380 |             class="c-item"
381 |             href="javascript:;"
382 |           >
383 |             <a class="title" href="javascript:;">{{ item.title }}</a>
384 |             <a class="more" href="javascript:;">更多</a>
385 |           </a>
386 |         </v-switcher>
387 |       </div>
388 |       <div class="recommended">
389 |         <v-switcher :headers="headers3" @change="handleChangeRecommended" ref="recommended">
390 |           <div slot="0" class="r-item" style="background-color: rgba(21,174,103,.5)">三日</div>
391 |           <div slot="1" class="r-item" style="background-color: rgba(195,123,177,.5)">一周</div>
392 |           <div slot="2" class="r-item" style="background-color: rgba(125,205,244,.5)">昨日</div>
393 |         </v-switcher>
394 |         <div class="indicator">
395 |           <button class="btn-prev" @click="switchRecommended(false)">{{ tab3LeftText }}</button>
396 |           <button class="btn-next" @click="switchRecommended(true)">{{ tab3RightText }}</button>
397 |         </div>
398 |       </div>
399 |     </section>
400 |     <h3>面板</h3>
401 |     <section>
402 |       <main class="bangumi">
403 |         <v-switcher :headers="headers2" align="around">
404 |           <div
405 |             slot="header-before"
406 |             class="header-before"
407 |           >
408 |             <i></i>
409 |             <a href="javascript:;">番剧</a>
410 |           </div>
411 |           <a
412 |             slot="header-after"
413 |             class="header-after"
414 |             href="javascript:;"
415 |           >
416 |             <span>新番时间表</span>
417 |             <i></i>
418 |           </a>
419 |           <div
420 |             v-for="(item, index) in headers2"
421 |             :key="index"
422 |             :slot="`${index}`"
423 |             class="b-item"
424 |           >{{ index }}</div>
425 |         </v-switcher>
426 |       </main>
427 |       <aside class="ranking">
428 |         <v-switcher :headers="headers4" align="start" :animated="true" header-trigger="hover">
429 |           <div class="header-before" slot="header-before">排行</div>
430 |           <div class="header-after" slot="header-after">三日</div>
431 |           <div class="k-item" slot="0" style="background-color: rgba(21,174,103,.5)">
432 |             0
433 |           </div>
434 |           <div class="k-item" slot="1" style="background-color: rgba(125,205,244,.5)">
435 |             1
436 |           </div>
437 |         </v-switcher>
438 |       </aside>
439 |     </section>
440 |   </div>
441 | </template>
442 | 
443 | <script>
444 | export default {
445 |   name: 'Usage',
446 |   components: {},
447 |   props: {},
448 |   data() {
449 |     return {
450 |       headers1: [
451 |         {
452 |           text: '',
453 |           title: '成名必备！'
454 |         },
455 |         {
456 |           text: '',
457 |           title: '花泽香菜，甜美来袭！'
458 |         },
459 |         {
460 |           text: '',
461 |           title: '鸡鸣紫陌曙光寒，水转皇州春色阑'
462 |         },
463 |         {
464 |           text: '',
465 |           title: '请查收您的追番清单!'
466 |         },
467 |         {
468 |           text: '',
469 |           title: '欢迎来到天生制造狂的世界'
470 |         }
471 |       ],
472 |       headers2: [
473 |         '最新',
474 |         {
475 |           text: '一',
476 |           'text-active': '周一'
477 |         },
478 |         {
479 |           text: '二',
480 |           'text-active': '周二'
481 |         },
482 |         {
483 |           text: '三',
484 |           'text-active': '周三'
485 |         },
486 |         {
487 |           text: '四',
488 |           'text-active': '周四'
489 |         },
490 |         {
491 |           text: '五',
492 |           'text-active': '周五'
493 |         },
494 |         {
495 |           text: '六',
496 |           'text-active': '周六'
497 |         },
498 |         {
499 |           text: '日',
500 |           'text-active': '周日'
501 |         }
502 |       ],
503 |       headers3: ['', '', ''],
504 |       tab3Index: 0,
505 |       headers4: ['全部', '原创']
506 |     }
507 |   },
508 |   computed: {
509 |     tab3LeftText() {
510 |       const index = this.tab3Index
511 |       if (index === 0) {
512 |         return '昨日'
513 |       } else if (index === 1) {
514 |         return '三日'
515 |       }
516 |       return '一周'
517 |     },
518 |     tab3RightText() {
519 |       const index = this.tab3Index
520 |       if (index === 0) {
521 |         return '一周'
522 |       } else if (index === 1) {
523 |         return '昨日'
524 |       }
525 |       return '三日'
526 |     }
527 |   },
528 |   watch: {},
529 |   created() {},
530 |   mounted() {},
531 |   methods: {
532 |     handleChangeRecommended(index) {
533 |       this.tab3Index = index
534 |     },
535 |     getRandomColor() {
536 |       var colors = [
537 |         'rgba(21,174,103,.5)',
538 |         'rgba(245,163,59,.5)',
539 |         'rgba(255,230,135,.5)',
540 |         'rgba(194,217,78,.5)',
541 |         'rgba(195,123,177,.5)',
542 |         'rgba(125,205,244,.5)'
543 |       ]
544 |       return colors[~~(Math.random() * colors.length)]
545 |     },
546 |     switchRecommended(isNext) {
547 |       isNext ? this.$refs.recommended.next() : this.$refs.recommended.prev()
548 |     }
549 |   }
550 | }
551 | </script>
552 | 


--------------------------------------------------------------------------------
/examples/router.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import VueRouter from 'vue-router'
 3 | 
 4 | Vue.use(VueRouter)
 5 | 
 6 | export default new VueRouter({
 7 |   mode: 'history',
 8 |   routes: [
 9 |     {
10 |       path: '/',
11 |       name: 'index',
12 |       redirect: '/homepage'
13 |     },
14 |     {
15 |       path: '/homepage',
16 |       name: 'homepage',
17 |       component: () => import('./pages/index')
18 |     },
19 |     {
20 |       path: '/simple',
21 |       name: 'simple',
22 |       component: () => import('./pages/simple')
23 |     },
24 |     {
25 |       path: '/animated',
26 |       name: 'animated',
27 |       component: () => import('./pages/animated')
28 |     },
29 |     {
30 |       path: '/swipe',
31 |       name: 'swipe',
32 |       component: () => import('./pages/swipe')
33 |     },
34 |     {
35 |       path: '/carousel',
36 |       name: 'carousel',
37 |       component: () => import('./pages/carousel')
38 |     },
39 |     {
40 |       path: '/usage',
41 |       name: 'usage',
42 |       component: () => import('./pages/usage')
43 |     },
44 |     {
45 |       path: '/mobile',
46 |       name: 'mobile',
47 |       component: () => import('./pages/mobile')
48 |     },
49 |     {
50 |       path: '/list',
51 |       name: 'list',
52 |       component: () => import('./pages/list')
53 |     }
54 |   ]
55 | })
56 | 


--------------------------------------------------------------------------------
/examples/store.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Vuex from 'vuex'
 3 | import VueMixinStore from 'vue-mixin-store'
 4 | import * as api from './api'
 5 | 
 6 | const flow = VueMixinStore.FlowStore(api, true)
 7 | 
 8 | Vue.use(Vuex)
 9 | 
10 | export default new Vuex.Store({
11 |   modules: {
12 |     flow
13 |   }
14 | })
15 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "v-switcher",
 3 |   "version": "1.1.2",
 4 |   "main": "dist/v-switcher.umd.min.js",
 5 |   "files": [
 6 |     "dist"
 7 |   ],
 8 |   "keywords": [
 9 |     "vue",
10 |     "switcher",
11 |     "carousel",
12 |     "tab"
13 |   ],
14 |   "author": "falstack <icesilt@outlook.com>",
15 |   "license": "MIT",
16 |   "bugs": {
17 |     "url": "https://github.com/falstack/v-switcher/issues"
18 |   },
19 |   "homepage": "https://github.com/falstack/v-switcher",
20 |   "scripts": {
21 |     "dev": "vue-cli-service serve",
22 |     "build": "vue-cli-service build --target lib --name v-switcher src/v-switcher.vue",
23 |     "lint": "eslint --fix ./src",
24 |     "docs:dev": "vuepress dev docs",
25 |     "docs:build": "vuepress build docs"
26 |   },
27 |   "dependencies": {
28 |     "vue": "^2.6.11"
29 |   },
30 |   "devDependencies": {
31 |     "@vue/cli-plugin-babel": "^4.3.1",
32 |     "@vue/cli-plugin-eslint": "^4.3.1",
33 |     "@vue/cli-service": "^4.3.1",
34 |     "@vue/eslint-config-prettier": "^6.0.0",
35 |     "babel-eslint": "^10.1.0",
36 |     "eslint": "^6.8.0",
37 |     "eslint-plugin-prettier": "^3.1.3",
38 |     "eslint-plugin-vue": "^6.2.2",
39 |     "faker": "^4.1.0",
40 |     "h5-vue-scroller": "^1.0.2",
41 |     "less-loader": "^6.0.0",
42 |     "node-sass": "^4.14.1",
43 |     "sass-loader": "^8.0.2",
44 |     "vue-flow-render": "^1.0.5",
45 |     "vue-mixin-store": "^1.3.10",
46 |     "vue-router": "^3.1.6",
47 |     "vue-template-compiler": "^2.6.11",
48 |     "vuepress": "^1.4.1",
49 |     "vuex": "^3.3.0"
50 |   }
51 | }
52 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     autoprefixer: {}
4 |   }
5 | }
6 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/falstack/v-switcher/86564b05b99d204761527ce4cd109aa18bf2bb73/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title>vue-layout-tab</title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but vue-layout-tab doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   <script crossorigin="anonymous" integrity="sha384-yZ+hPrJT+nSFUqLzkC+6zUaAHcSj+lgz43nKaFalKUYG2HKHuK7oJCbG+fCNLAbq" src="https://lib.baomitu.com/vConsole/3.3.2/vconsole.min.js"></script>
17 |   <script>
18 |       new VConsole()
19 |   </script>
20 |   </body>
21 | </html>
22 | 


--------------------------------------------------------------------------------
/src/affix.js:
--------------------------------------------------------------------------------
 1 | import { on, off, getScroll, getOffset, getScrollTarget } from './utils'
 2 | 
 3 | export default {
 4 |   props: {
 5 |     fixedTop: { // eslint-disable-line
 6 |       type: Number
 7 |     }
 8 |   },
 9 |   data() {
10 |     return {
11 |       isFixed: false,
12 |       showFixedShim: false,
13 |       fixedShimStyle: {},
14 |       fixedHeaderStyle: {}
15 |     }
16 |   },
17 |   mounted() {
18 |     if (this.fixedTop !== undefined) {
19 |       const target = getScrollTarget(this.$el)
20 |       on(target, 'scroll', this.handleScroll)
21 |       on(target, 'resize', this.handleScroll)
22 |       this.$nextTick(() => {
23 |         this.handleScroll()
24 |       })
25 |     }
26 |   },
27 |   beforeDestroy() {
28 |     if (this.fixedTop !== undefined) {
29 |       const target = getScrollTarget(this.$el)
30 |       off(target, 'scroll', this.handleScroll)
31 |       off(target, 'resize', this.handleScroll)
32 |     }
33 |   },
34 |   methods: {
35 |     handleScroll() {
36 |       const isFixed = this.isFixed
37 |       const scrollTop = getScroll(window, true)
38 |       const elOffset = getOffset(this.$el)
39 |       // Fixed Top
40 |       if (elOffset.top - this.fixedTop < scrollTop && !isFixed) {
41 |         this.isFixed = true
42 |         this.fixedShimStyle = {
43 |           width: this.$refs.headerWrap.clientWidth + 'px',
44 |           height: this.$refs.headerWrap.clientHeight + 'px'
45 |         }
46 |         this.showFixedShim = true
47 |         this.fixedHeaderStyle = {
48 |           top: `${this.fixedTop}px`,
49 |           left: `${elOffset.left}px`,
50 |           width: `${this.$el.offsetWidth}px`
51 |         }
52 |         this.$emit('on-fixed', true)
53 |       } else if (elOffset.top - this.fixedTop > scrollTop && isFixed) {
54 |         this.showFixedShim = false
55 |         this.fixedShimStyle = {}
56 |         this.isFixed = false
57 |         this.fixedHeaderStyle = null
58 |         this.$emit('on-fixed', false)
59 |       }
60 |     }
61 |   }
62 | }
63 | 


--------------------------------------------------------------------------------
/src/slide.js:
--------------------------------------------------------------------------------
  1 | export default class {
  2 |   /**
  3 |    *  sticky：默认为 true，滑动的时候会跟随手指
  4 |    *  swipe：默认为 true，touchend 时会翻到下一页或返回上一页
  5 |    */
  6 |   constructor(options = {}) {
  7 |     if (!(options.el instanceof Element)) {
  8 |       return
  9 |     }
 10 |     this._calcCssPrefix()
 11 |     this._setupConst()
 12 |     this._setupProps(options)
 13 |     this._setupSizes()
 14 |     this._setupIndex()
 15 |     this._setupStyle()
 16 |     this._setupTouchEvents()
 17 |     return this
 18 |   }
 19 | 
 20 |   prev(custom = true) {
 21 |     if (this.moving || (this.activeIndex === 0 && !this.continuous)) {
 22 |       return
 23 |     }
 24 |     if (this.activeIndex === 0 && this.continuous) {
 25 |       this._continuousAnimation(false)
 26 |       return
 27 |     }
 28 |     if (custom) {
 29 |       this.activeIndex--
 30 |     } else {
 31 |       if (this._isValidSlide()) {
 32 |         this._calcActiveIndex(false)
 33 |         this._animation()
 34 |         return
 35 |       }
 36 |       this._animation(false)
 37 |     }
 38 |   }
 39 | 
 40 |   next(custom = true) {
 41 |     if (
 42 |       this.moving ||
 43 |       (this.activeIndex === this.slideCount - 1 && !this.continuous)
 44 |     ) {
 45 |       return
 46 |     }
 47 |     if (this.activeIndex === this.slideCount - 1 && this.continuous) {
 48 |       this._continuousAnimation(true)
 49 |       return
 50 |     }
 51 |     if (custom) {
 52 |       this.activeIndex++
 53 |     } else {
 54 |       if (this._isValidSlide()) {
 55 |         this._calcActiveIndex(true)
 56 |         this._animation()
 57 |         return
 58 |       }
 59 |       this._animation(false)
 60 |     }
 61 |   }
 62 | 
 63 |   slide(index) {
 64 |     if (
 65 |       this.moving ||
 66 |       index === this.activeIndex ||
 67 |       index < 0 ||
 68 |       index > this.slideCount - 1
 69 |     ) {
 70 |       return
 71 |     }
 72 |     this.activeIndex = index
 73 |     this._animation()
 74 |   }
 75 | 
 76 |   scroll(left) {
 77 |     this.moving = true
 78 |     const { cssPrefix, duration, style } = this
 79 |     requestAnimationFrame(() => {
 80 |       style[`${cssPrefix}transition-duration`] = `${duration}ms`
 81 |       style[`${cssPrefix}transform`] = `translateX(${left}px)`
 82 |       setTimeout(() => {
 83 |         style[`${cssPrefix}transition-duration`] = ''
 84 |         this.currentLeft = left
 85 |         this.lastLeft = left
 86 |         this.moving = false
 87 |       }, duration)
 88 |     })
 89 |   }
 90 | 
 91 |   update(options = {}) {
 92 |     if (!this.cssPrefix) {
 93 |       return
 94 |     }
 95 |     if (this.adjust) {
 96 |       this.slideCount = this.el.children.length
 97 |     }
 98 |     if (options) {
 99 |       if (options.index !== undefined) {
100 |         this.activeIndex = options.index
101 |       }
102 |       if (options.maxLeft !== undefined) {
103 |         this.maxLeft = Math.abs(options.maxLeft)
104 |       }
105 |     }
106 |     this.destroy()
107 |     this._setupSizes()
108 |     this._setupIndex()
109 |     this._setupTouchEvents()
110 |   }
111 | 
112 |   play(timeout = 1000) {
113 |     const time = Math.max(timeout, this.duration)
114 |     if (this.autoplayTimer) {
115 |       return
116 |     }
117 |     this.continuous = true
118 |     this.sticky = false
119 |     this.autoplayTimer = setInterval(() => {
120 |       this.next()
121 |     }, time)
122 |   }
123 | 
124 |   stop() {
125 |     if (!this.autoplayTimer) {
126 |       return
127 |     }
128 |     clearInterval(this.autoplayTimer)
129 |     this.autoplayTimer = 0
130 |   }
131 | 
132 |   destroy() {
133 |     const { el, events } = this
134 |     if (!el) {
135 |       return
136 |     }
137 |     el.removeEventListener('touchstart', events.touchstart, {
138 |       capture: true,
139 |       passive: true
140 |     })
141 |     el.removeEventListener('touchmove', events.touchmove, true)
142 |     el.removeEventListener('touchend', events.touchend, {
143 |       capture: true,
144 |       passive: true
145 |     })
146 |     this.stop()
147 |   }
148 | 
149 |   _setupTouchEvents() {
150 |     const { el, events } = this
151 |     if (!el) {
152 |       return
153 |     }
154 |     events.touchstart = this._start.bind(this)
155 |     events.touchmove = this._move.bind(this)
156 |     events.touchend = this._end.bind(this)
157 |     el.addEventListener('touchstart', events.touchstart, {
158 |       capture: true,
159 |       passive: true
160 |     })
161 |     el.addEventListener('touchmove', events.touchmove, true)
162 |     el.addEventListener('touchend', events.touchend, {
163 |       capture: true,
164 |       passive: true
165 |     })
166 |   }
167 | 
168 |   _setupConst() {
169 |     this.startPoint = {
170 |       x: 0,
171 |       y: 0
172 |     }
173 |     this.deltaPoint = {
174 |       x: 0,
175 |       y: 0
176 |     }
177 |     this.maxDeltaPoint = {
178 |       x: 0,
179 |       y: 0
180 |     }
181 |     this.lastLeft = 0
182 |     this.currentLeft = 0
183 |     this.moving = false
184 |     this.startAt = 0
185 |     this.events = {}
186 |     this.autoplayTimer = 0
187 |   }
188 | 
189 |   _setupProps(options) {
190 |     const duration =
191 |       options.duration === undefined ? 300 : Math.abs(options.duration)
192 |     this.el = options.el
193 |     this.style = options.el.style
194 |     this.duration = duration
195 |     this.sticky = duration
196 |       ? options.sticky === undefined
197 |         ? true
198 |         : options.sticky
199 |       : false
200 |     this.swipe = options.swipe === undefined ? true : options.swipe
201 |     this.disabled = options.disabled || false
202 |     this.continuous = options.continuous || false
203 |     this.adjust = options.adjust === undefined ? true : options.adjust
204 |     this.maxLeft = options.maxLeft ? Math.abs(options.maxLeft) : 0
205 |     this.autoCalcMaxLeft = !options.maxLeft
206 |     this.callback = options.callback
207 |     this.beforeCallback = options.beforeCallback
208 |     this.slideCount = Math.max(options.el.children.length, 1)
209 |     this.activeIndex = options.index
210 |       ? Math.max(Math.min(options.index, this.slideCount - 1), 0)
211 |       : 0
212 |   }
213 | 
214 |   _setupStyle() {
215 |     if (!this.adjust) {
216 |       return
217 |     }
218 |     const { style, slideCount, slideWidth } = this
219 |     style.width = `${slideCount * 100}%`
220 |     if (slideCount > 1) {
221 |       const slides = this.el.children
222 |       ;[].forEach.call(slides, item => {
223 |         const { style } = item
224 |         style.width = `${slideWidth}px`
225 |         style.float = 'left'
226 |       })
227 |     }
228 |   }
229 | 
230 |   _setupIndex() {
231 |     if (!this.activeIndex) {
232 |       return
233 |     }
234 |     const left = (-this.activeIndex * this.maxLeft) / (this.slideCount - 1)
235 |     this.lastLeft = left
236 |     this.currentLeft = left
237 |     this._translate(left)
238 |   }
239 | 
240 |   _setupSizes() {
241 |     if (!this.el) {
242 |       return
243 |     }
244 |     const offsetWidth = this.el.parentNode.offsetWidth
245 |     this.slideWidth = offsetWidth
246 |     if (this.autoCalcMaxLeft) {
247 |       this.maxLeft = offsetWidth * this.slideCount - offsetWidth
248 |     }
249 |   }
250 | 
251 |   _start(event) {
252 |     if (this.moving || this.disabled) {
253 |       return
254 |     }
255 |     const point = event.touches[0]
256 |     this.startPoint = {
257 |       x: point.pageX,
258 |       y: point.pageY
259 |     }
260 |     this.startAt = +new Date()
261 |     this._lockedSwipeEvents()
262 |   }
263 | 
264 |   _move(event) {
265 |     if (this.moving || this.disabled) {
266 |       return
267 |     }
268 |     const point = event.touches[0]
269 |     const start = this.startPoint
270 |     const max = this.maxDeltaPoint
271 |     const delta = {
272 |       x: point.pageX - start.x,
273 |       y: point.pageY - start.y
274 |     }
275 |     this.maxDeltaPoint = {
276 |       x: Math.max(max.x, Math.abs(delta.x)),
277 |       y: Math.max(max.y, Math.abs(delta.y))
278 |     }
279 |     if (this._isVerticalScroll(this.maxDeltaPoint)) {
280 |       return
281 |     }
282 |     this.deltaPoint = delta
283 |     const lastLeft = this.lastLeft
284 |     let resultX = delta.x + lastLeft
285 |     if (resultX > 0) {
286 |       resultX = 0
287 |     } else if (resultX + this.maxLeft < 0) {
288 |       resultX = -this.maxLeft
289 |     }
290 |     if (resultX === this.currentLeft) {
291 |       return
292 |     }
293 |     if (this.sticky) {
294 |       this._translate(resultX)
295 |       this.currentLeft = resultX
296 |     }
297 |   }
298 | 
299 |   _end() {
300 |     if (this.moving || this.disabled) {
301 |       return
302 |     }
303 |     this.lastLeft = this.currentLeft
304 |     this.maxDeltaPoint = {
305 |       x: 0,
306 |       y: 0
307 |     }
308 |     this._unlockSwipeEvents()
309 |     const delta = this.deltaPoint
310 |     if (!this.sticky && this._isVerticalScroll(delta)) {
311 |       return
312 |     }
313 |     if (this.swipe) {
314 |       delta.x > 0 ? this.prev(false) : this.next(false)
315 |     } else {
316 |       this._calcActiveIndex(delta.x < 0)
317 |     }
318 |   }
319 | 
320 |   _continuousAnimation(isNext) {
321 |     this.moving = true
322 |     const {
323 |       cssPrefix,
324 |       slideCount,
325 |       duration,
326 |       slideWidth,
327 |       style,
328 |       el,
329 |       beforeCallback
330 |     } = this
331 |     const slides = el.children
332 |     const slide = isNext ? slides[0] : slides[slideCount - 1]
333 |     const left = isNext ? -slideCount * slideWidth : slideWidth
334 |     const activeIndex = isNext ? 0 : slideCount - 1
335 |     slide.style[`${cssPrefix}transform`] = `translateX(${(isNext ? 100 : -100) *
336 |       slideCount}%)`
337 |     beforeCallback && beforeCallback(activeIndex)
338 |     requestAnimationFrame(() => {
339 |       style[`${cssPrefix}transition-duration`] = `${duration}ms`
340 |       style[`${cssPrefix}transform`] = `translateX(${left}px)`
341 |       setTimeout(() => {
342 |         const finalLeft = isNext ? 0 : -activeIndex * slideWidth
343 |         style[`${cssPrefix}transition-duration`] = ''
344 |         style[`${cssPrefix}transform`] = `translateX(${finalLeft}px)`
345 |         slide.style[`${cssPrefix}transform`] = ''
346 |         this.currentLeft = finalLeft
347 |         this.lastLeft = finalLeft
348 |         this.activeIndex = activeIndex
349 |         this.moving = false
350 |         this.callback && this.callback(activeIndex)
351 |       }, duration)
352 |     })
353 |   }
354 | 
355 |   _animation(emit = true) {
356 |     this.moving = true
357 |     const { cssPrefix, duration, activeIndex, style, beforeCallback } = this
358 |     const left = -activeIndex * this.slideWidth
359 |     beforeCallback && beforeCallback(activeIndex)
360 |     requestAnimationFrame(() => {
361 |       style[`${cssPrefix}transition-duration`] = `${duration}ms`
362 |       style[`${cssPrefix}transform`] = `translateX(${left}px)`
363 |       setTimeout(() => {
364 |         style[`${cssPrefix}transition-duration`] = ''
365 |         this.currentLeft = left
366 |         this.lastLeft = left
367 |         this.moving = false
368 |         if (emit) {
369 |           this.callback && this.callback(activeIndex)
370 |         }
371 |       }, duration)
372 |     })
373 |   }
374 | 
375 |   _translate(left) {
376 |     requestAnimationFrame(() => {
377 |       this.style[`${this.cssPrefix}transform`] = `translateX(${left}px)`
378 |     })
379 |   }
380 | 
381 |   _lockedSwipeEvents() {
382 |     this.style['touch-action'] = 'none'
383 |     this.style.willChange = 'transform'
384 |   }
385 | 
386 |   _unlockSwipeEvents() {
387 |     this.style['touch-action'] = 'auto'
388 |     this.style.willChange = ''
389 |   }
390 | 
391 |   _isVerticalScroll(delta) {
392 |     return Math.abs(delta.x) < Math.abs(delta.y) * 3
393 |   }
394 | 
395 |   _calcCssPrefix() {
396 |     let result = ''
397 |     const regex = /^(Webkit|Khtml|Moz|ms|O)(?=[A-Z])/
398 |     const styleDeclaration = document.getElementsByTagName('script')[0].style
399 |     // eslint-disable-next-line no-unused-vars
400 |     for (const prop in styleDeclaration) {
401 |       if (regex.test(prop)) {
402 |         result = '-' + prop.match(regex)[0].toLowerCase() + '-'
403 |       }
404 |     }
405 | 
406 |     if (!result && 'WebkitOpacity' in styleDeclaration) {
407 |       result = '-webkit-'
408 |     }
409 |     if (!result && 'KhtmlOpacity' in styleDeclaration) {
410 |       result = '-khtml-'
411 |     }
412 |     this.cssPrefix = result
413 |   }
414 | 
415 |   _calcActiveIndex(isNext) {
416 |     if (this.sticky) {
417 |       this.activeIndex = isNext
418 |         ? Math.ceil(Math.abs(this.currentLeft) / this.slideWidth)
419 |         : Math.floor(Math.abs(this.currentLeft) / this.slideWidth)
420 |     } else {
421 |       isNext ? this.activeIndex++ : this.activeIndex--
422 |     }
423 |   }
424 | 
425 |   _isValidSlide() {
426 |     const x = Math.abs(this.deltaPoint.x)
427 |     return (
428 |       (Number(+new Date() - this.startAt) < 250 && x > 20) ||
429 |       x > this.slideWidth / 2
430 |     )
431 |   }
432 | }
433 | 


--------------------------------------------------------------------------------
/src/swipe.js:
--------------------------------------------------------------------------------
  1 | /*
  2 |  * Swipe 2.0
  3 |  *
  4 |  * Brad Birdsall
  5 |  * Copyright 2013, MIT License
  6 |  *
  7 |  */
  8 | export default function Swipe(container, options) {
  9 |   'use strict'
 10 | 
 11 |   // utilities
 12 |   var noop = function() {} // simple no operation function
 13 |   var offloadFn = function(fn) {
 14 |     setTimeout(fn || noop, 0)
 15 |   } // offload a functions execution
 16 | 
 17 |   var isAndroid = /android/.test(window.navigator.userAgent.toLocaleLowerCase())
 18 |   var lastMoveAt = 0
 19 | 
 20 |   // quit if no root element
 21 |   if (!container) return
 22 |   var element = container.children[0]
 23 |   var slides, slidePos, width
 24 |   options = options || {}
 25 |   var index = parseInt(options.startSlide, 10) || 0
 26 |   var speed = options.speed || 300
 27 |   var disabled = options.disabled || false
 28 |   options.continuous =
 29 |     options.continuous !== undefined ? options.continuous : true
 30 | 
 31 |   function setup() {
 32 |     // cache slides
 33 |     slides = element.children
 34 | 
 35 |     // set continuous to false if only one slide
 36 |     if (slides.length < 2) options.continuous = false
 37 | 
 38 |     //special case if two slides
 39 |     if (options.continuous && slides.length < 3) {
 40 |       element.appendChild(slides[0].cloneNode(true))
 41 |       element.appendChild(element.children[1].cloneNode(true))
 42 |       slides = element.children
 43 |     }
 44 | 
 45 |     // create an array to store current positions of each slide
 46 |     slidePos = new Array(slides.length)
 47 | 
 48 |     // determine width of each slide
 49 |     width = slides[0].getBoundingClientRect().width || slides[0].offsetWidth
 50 | 
 51 |     element.style.width = slides.length * width + 'px'
 52 |     element.parentElement.style.width = width + 'px'
 53 | 
 54 |     // stack elements
 55 |     var pos = slides.length
 56 |     while (pos--) {
 57 |       var slide = slides[pos]
 58 | 
 59 |       slide.style.width = width + 'px'
 60 |       slide.setAttribute('data-index', pos)
 61 | 
 62 |       slide.style.left = pos * -width + 'px'
 63 |       slide.style.zIndex = slides.length - pos
 64 |       move(pos, index > pos ? -width : index < pos ? width : 0, 0)
 65 |     }
 66 | 
 67 |     // reposition elements before and after index
 68 |     if (options.continuous) {
 69 |       move(circle(index - 1), -width, 0)
 70 |       move(circle(index + 1), width, 0)
 71 |     }
 72 | 
 73 |     container.style.visibility = 'visible'
 74 |   }
 75 | 
 76 |   function prev() {
 77 |     if (options.continuous) slide(index - 1)
 78 |     else if (index) slide(index - 1)
 79 |   }
 80 | 
 81 |   function next() {
 82 |     if (options.continuous) slide(index + 1)
 83 |     else if (index < slides.length - 1) slide(index + 1)
 84 |   }
 85 | 
 86 |   function circle(index) {
 87 |     // a simple positive modulo using slides.length
 88 |     return (slides.length + (index % slides.length)) % slides.length
 89 |   }
 90 | 
 91 |   function slide(to, slideSpeed) {
 92 |     // do nothing if already on requested slide
 93 |     if (index === to) return
 94 | 
 95 |     var direction = Math.abs(index - to) / (index - to) // 1: backward, -1: forward
 96 | 
 97 |     // get the actual position of the slide
 98 |     if (options.continuous) {
 99 |       var natural_direction = direction
100 |       direction = -slidePos[circle(to)] / width
101 | 
102 |       // if going forward but to < index, use to = slides.length + to
103 |       // if going backward but to > index, use to = -slides.length + to
104 |       if (direction !== natural_direction) to = -direction * slides.length + to
105 |     }
106 | 
107 |     var diff = Math.abs(index - to) - 1
108 | 
109 |     // move all the slides between index and to in the right direction
110 |     while (diff--)
111 |       move(circle((to > index ? to : index) - diff - 1), width * direction, 0)
112 | 
113 |     to = circle(to)
114 | 
115 |     move(index, width * direction, slideSpeed || speed)
116 |     move(to, 0, slideSpeed || speed)
117 | 
118 |     if (options.continuous)
119 |       move(circle(to - direction), -(width * direction), 0) // we need to get the next in place
120 | 
121 |     index = to
122 |     offloadFn(options.callback && options.callback(index, slides[index]))
123 |     lastMoveAt = Date.now()
124 |   }
125 | 
126 |   function move(index, dist, speed) {
127 |     translate(index, dist, speed)
128 |     slidePos[index] = dist
129 |   }
130 | 
131 |   function translate(index, dist, speed) {
132 |     var slide = slides[index]
133 |     var style = slide && slide.style
134 | 
135 |     if (!style) return
136 | 
137 |     style.webkitTransitionDuration = style.MozTransitionDuration = style.msTransitionDuration = style.OTransitionDuration = style.transitionDuration =
138 |       speed + 'ms'
139 | 
140 |     style.webkitTransform = style.msTransform = style.MozTransform = style.OTransform =
141 |       'translateX(' + dist + 'px)'
142 |   }
143 | 
144 |   // setup auto slideshow
145 |   var delay = options.auto || 0
146 |   var interval
147 | 
148 |   function begin() {
149 |     interval = setTimeout(next, delay)
150 |   }
151 | 
152 |   function stop() {
153 |     delay = 0
154 |     interval && clearTimeout(interval)
155 |   }
156 | 
157 |   // setup initial vars
158 |   var start = {}
159 |   var delta = {}
160 |   var isScrolling
161 | 
162 |   // setup event capturing
163 |   var events = {
164 |     handleEvent: function(event) {
165 |       switch (event.type) {
166 |         case 'touchstart':
167 |           this.start(event)
168 |           break
169 |         case 'touchmove':
170 |           this.move(event)
171 |           break
172 |         case 'touchend':
173 |           offloadFn(this.end(event))
174 |           break
175 |         case 'webkitTransitionEnd':
176 |         case 'msTransitionEnd':
177 |         case 'oTransitionEnd':
178 |         case 'otransitionend':
179 |         case 'transitionend':
180 |           offloadFn(this.transitionEnd(event))
181 |           break
182 |         case 'resize':
183 |           offloadFn(setup)
184 |           break
185 |       }
186 | 
187 |       if (options.stopPropagation) event.stopPropagation()
188 |     },
189 |     start: function(event) {
190 |       if (disabled) {
191 |         return
192 |       }
193 | 
194 |       var touches = event.touches[0]
195 | 
196 |       // measure start values
197 |       start = {
198 |         // get initial touch coords
199 |         x: touches.pageX,
200 |         y: touches.pageY,
201 | 
202 |         // store time to determine touch duration
203 |         time: +new Date()
204 |       }
205 | 
206 |       // used for testing first move event
207 |       isScrolling = undefined
208 | 
209 |       // reset delta and end measurements
210 |       delta = {}
211 | 
212 |       // attach touchmove and touchend listeners
213 |       element.addEventListener('touchmove', this, false)
214 |       element.addEventListener('touchend', this, false)
215 |     },
216 |     move: function(event) {
217 |       if (disabled) {
218 |         return
219 |       }
220 | 
221 |       // ensure swiping with one touch and not pinching
222 |       if (event.touches.length > 1 || (event.scale && event.scale !== 1)) return
223 | 
224 |       if (options.disableScroll) event.preventDefault()
225 | 
226 |       var touches = event.touches[0]
227 | 
228 |       // measure change in x and y
229 |       delta = {
230 |         x: touches.pageX - start.x,
231 |         y: touches.pageY - start.y
232 |       }
233 | 
234 |       // determine if scrolling test has run - one time test
235 |       if (typeof isScrolling === 'undefined') {
236 |         isScrolling = !!(isScrolling || Math.abs(delta.x) < Math.abs(delta.y))
237 |       }
238 | 
239 |       // if user is not trying to scroll vertically
240 |       if (!isScrolling) {
241 |         // prevent native scrolling
242 |         event.preventDefault()
243 |         if (isAndroid) {
244 |           if (Math.abs(delta.x) < Math.abs(delta.y) * 3) {
245 |             stop()
246 |             return
247 |           }
248 |         } else {
249 |           event.stopPropagation()
250 |         }
251 | 
252 |         // stop slideshow
253 |         stop()
254 | 
255 |         // increase resistance if first or last slide
256 |         if (options.continuous) {
257 |           // we don't add resistance at the end
258 | 
259 |           translate(circle(index - 1), delta.x + slidePos[circle(index - 1)], 0)
260 |           translate(index, delta.x + slidePos[index], 0)
261 |           translate(circle(index + 1), delta.x + slidePos[circle(index + 1)], 0)
262 |         } else {
263 |           delta.x =
264 |             delta.x /
265 |             ((!index && delta.x > 0) || // if first slide and sliding left
266 |             (index === slides.length - 1 && // or if last slide and sliding right
267 |               delta.x < 0) // and if sliding at all
268 |               ? Math.abs(delta.x) / width + 1 // determine resistance level
269 |               : 1) // no resistance if false
270 | 
271 |           if (index === 0 && delta.x > 0) {
272 |             return
273 |           }
274 |           if (index === element.children.length - 1 && delta.x < 0) {
275 |             return
276 |           }
277 |           // translate 1:1
278 |           translate(index - 1, delta.x + slidePos[index - 1], 0)
279 |           translate(index, delta.x + slidePos[index], 0)
280 |           translate(index + 1, delta.x + slidePos[index + 1], 0)
281 |         }
282 |       }
283 |     },
284 |     end: function() {
285 |       // measure duration
286 |       var duration = +new Date() - start.time
287 | 
288 |       // determine if slide attempt triggers next/prev slide
289 |       var isValidSlide =
290 |         (Number(duration) < 250 && // if slide duration is less than 250ms
291 |           Math.abs(delta.x) > 20) || // and if slide amt is greater than 20px
292 |         Math.abs(delta.x) > width / 2 // or if slide amt is greater than half the width
293 | 
294 |       // determine if slide attempt is past start and end
295 |       var isPastBounds =
296 |         (!index && delta.x > 0) || // if first slide and slide amt is greater than 0
297 |         (index === slides.length - 1 && delta.x < 0) // or if last slide and slide amt is less than 0
298 | 
299 |       if (options.continuous) isPastBounds = false
300 | 
301 |       // determine direction of swipe (true:right, false:left)
302 |       var direction = delta.x < 0
303 | 
304 |       // if not scrolling vertically
305 |       if (!isScrolling) {
306 |         if (isValidSlide && !isPastBounds) {
307 |           if (direction) {
308 |             if (options.continuous) {
309 |               // we need to get the next in this direction in place
310 | 
311 |               move(circle(index - 1), -width, 0)
312 |               move(circle(index + 2), width, 0)
313 |             } else {
314 |               move(index - 1, -width, 0)
315 |             }
316 | 
317 |             move(index, slidePos[index] - width, speed)
318 |             move(circle(index + 1), slidePos[circle(index + 1)] - width, speed)
319 |             index = circle(index + 1)
320 |           } else {
321 |             if (options.continuous) {
322 |               // we need to get the next in this direction in place
323 | 
324 |               move(circle(index + 1), width, 0)
325 |               move(circle(index - 2), -width, 0)
326 |             } else {
327 |               move(index + 1, width, 0)
328 |             }
329 | 
330 |             move(index, slidePos[index] + width, speed)
331 |             move(circle(index - 1), slidePos[circle(index - 1)] + width, speed)
332 |             index = circle(index - 1)
333 |           }
334 |           lastMoveAt = Date.now()
335 |           options.callback && options.callback(index, slides[index])
336 |         } else {
337 |           if (options.continuous) {
338 |             move(circle(index - 1), -width, speed)
339 |             move(index, 0, speed)
340 |             move(circle(index + 1), width, speed)
341 |           } else {
342 |             move(index - 1, -width, speed)
343 |             move(index, 0, speed)
344 |             move(index + 1, width, speed)
345 |           }
346 |         }
347 |       }
348 | 
349 |       // kill touchmove and touchend event listeners until touchstart called again
350 |       element.removeEventListener('touchmove', events, false)
351 |       element.removeEventListener('touchend', events, false)
352 |     },
353 |     transitionEnd: function(event) {
354 |       if (parseInt(event.target.getAttribute('data-index'), 10) === index) {
355 |         if (delay) begin()
356 | 
357 |         options.transitionEnd &&
358 |           options.transitionEnd.call(event, index, slides[index])
359 |       }
360 |     }
361 |   }
362 | 
363 |   // trigger setup
364 |   setup()
365 | 
366 |   // start auto slideshow if applicable
367 |   if (delay) begin()
368 | 
369 |   // add event listeners
370 |   element.addEventListener('touchstart', events, false)
371 |   element.addEventListener('webkitTransitionEnd', events, false)
372 |   element.addEventListener('msTransitionEnd', events, false)
373 |   element.addEventListener('oTransitionEnd', events, false)
374 |   element.addEventListener('otransitionend', events, false)
375 |   element.addEventListener('transitionend', events, false)
376 |   window.addEventListener('resize', events, false)
377 | 
378 |   // expose the Swipe API
379 |   return {
380 |     slide: function(to, speed) {
381 |       if (speed && Date.now() - lastMoveAt <= speed) {
382 |         return
383 |       }
384 |       // cancel slideshow
385 |       stop()
386 | 
387 |       slide(to, speed)
388 |     },
389 |     prev: function() {
390 |       // cancel slideshow
391 |       stop()
392 | 
393 |       prev()
394 |     },
395 |     next: function() {
396 |       // cancel slideshow
397 |       stop()
398 | 
399 |       next()
400 |     }
401 |   }
402 | }
403 | 


--------------------------------------------------------------------------------
/src/utils.js:
--------------------------------------------------------------------------------
 1 | export const getMatchedRouteIndex = (headers, path) => {
 2 |   let result = -1
 3 |   headers
 4 |     .map(_ => _.route)
 5 |     .forEach((route, index) => {
 6 |       if (path.startsWith(route)) {
 7 |         result = index
 8 |       }
 9 |     })
10 |   return result
11 | }
12 | 
13 | export const on = (function() {
14 |   if (typeof window === 'undefined') {
15 |     return
16 |   }
17 |   if (document.addEventListener) {
18 |     return function(element, event, handler) {
19 |       if (element && event && handler) {
20 |         element.addEventListener(event, handler, false)
21 |       }
22 |     }
23 |   } else {
24 |     return function(element, event, handler) {
25 |       if (element && event && handler) {
26 |         element.attachEvent('on' + event, handler)
27 |       }
28 |     }
29 |   }
30 | })()
31 | 
32 | export const off = (function() {
33 |   if (typeof window === 'undefined') {
34 |     return
35 |   }
36 |   if (document.removeEventListener) {
37 |     return function(element, event, handler) {
38 |       if (element && event) {
39 |         element.removeEventListener(event, handler, false)
40 |       }
41 |     }
42 |   } else {
43 |     return function(element, event, handler) {
44 |       if (element && event) {
45 |         element.detachEvent('on' + event, handler)
46 |       }
47 |     }
48 |   }
49 | })()
50 | 
51 | export const getScroll = (target, top) => {
52 |   const prop = top ? 'pageYOffset' : 'pageXOffset'
53 |   const method = top ? 'scrollTop' : 'scrollLeft'
54 |   let ret = target[prop]
55 |   if (typeof ret !== 'number') {
56 |     ret = window.document.documentElement[method]
57 |   }
58 |   return ret
59 | }
60 | 
61 | export const getOffset = element => {
62 |   const rect = element.getBoundingClientRect()
63 |   const scrollTop = getScroll(window, true)
64 |   const scrollLeft = getScroll(window)
65 |   const docEl = window.document.body
66 |   const clientTop = docEl.clientTop || 0
67 |   const clientLeft = docEl.clientLeft || 0
68 |   return {
69 |     top: rect.top + scrollTop - clientTop,
70 |     left: rect.left + scrollLeft - clientLeft
71 |   }
72 | }
73 | 
74 | export const getScrollTarget = dom => {
75 |   let el = dom
76 |   if (!el) {
77 |     return null
78 |   }
79 |   while (
80 |     el &&
81 |     el.tagName !== 'HTML' &&
82 |     el.tagName !== 'BOYD' &&
83 |     el.nodeType === 1
84 |   ) {
85 |     const overflowY = window.getComputedStyle(el).overflowY
86 |     if (overflowY === 'scroll' || overflowY === 'auto') {
87 |       if (el.tagName === 'HTML' || el.tagName === 'BODY') {
88 |         return document
89 |       }
90 |       return el
91 |     }
92 |     el = el.parentNode
93 |   }
94 |   return document
95 | }
96 | 


--------------------------------------------------------------------------------
/src/v-switcher.vue:
--------------------------------------------------------------------------------
  1 | <style lang="scss">
  2 | @mixin transition {
  3 |   transition-property: transform;
  4 |   transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
  5 | }
  6 | 
  7 | .v-switcher {
  8 |   overflow: hidden;
  9 |   position: relative;
 10 | 
 11 |   &.v-switcher-vertical {
 12 |     .v-switcher-header {
 13 |       &-wrap {
 14 |         float: left;
 15 |         height: 100% !important;
 16 |       }
 17 | 
 18 |       &-item {
 19 |         display: block;
 20 |         white-space: normal;
 21 |       }
 22 | 
 23 |       &-anchor {
 24 |         top: 0;
 25 |       }
 26 |     }
 27 | 
 28 |     .v-switcher-content {
 29 |       overflow: hidden;
 30 |     }
 31 |   }
 32 | 
 33 |   &.v-switcher-sticky {
 34 |     height: 100%;
 35 | 
 36 |     .v-switcher-content-wrap,
 37 |     .v-switcher-content,
 38 |     .v-switcher-content-panel {
 39 |       height: 100%;
 40 |     }
 41 | 
 42 |     .v-switcher-content-wrap {
 43 |       box-sizing: border-box;
 44 |     }
 45 |   }
 46 | 
 47 |   &-header {
 48 |     position: relative;
 49 |     font-size: 0;
 50 |     z-index: 1;
 51 |     padding: 0;
 52 |     margin: 0;
 53 |     white-space: nowrap;
 54 |     flex-grow: 1;
 55 | 
 56 |     &-start {
 57 |       text-align: left;
 58 |       display: flex;
 59 |       flex-direction: row;
 60 |       @include transition();
 61 | 
 62 |       .v-switcher-header-item {
 63 |         flex-shrink: 0;
 64 |       }
 65 |     }
 66 | 
 67 |     &-wrap {
 68 |       box-sizing: border-box;
 69 |       display: flex;
 70 |       flex-direction: row;
 71 |       justify-content: space-between;
 72 |       align-items: center;
 73 |       overflow: hidden;
 74 | 
 75 |       &-fixed {
 76 |         background-color: #fff;
 77 |         position: fixed;
 78 |         z-index: 10;
 79 |       }
 80 |     }
 81 | 
 82 |     &-center {
 83 |       text-align: center;
 84 |     }
 85 | 
 86 |     &-end {
 87 |       text-align: right;
 88 |     }
 89 | 
 90 |     &-anchor {
 91 |       display: block;
 92 |       position: absolute;
 93 |       left: 0;
 94 |       @include transition();
 95 |       transition-property: width, height, transform;
 96 |       will-change: transform;
 97 |       pointer-events: none;
 98 |     }
 99 | 
100 |     &-tabs {
101 |       overflow: hidden;
102 |       height: 100%;
103 |       flex-grow: 1;
104 |       order: 1;
105 |     }
106 | 
107 |     &-before,
108 |     &-after {
109 |       position: relative;
110 |       flex-shrink: 0;
111 |       z-index: 1;
112 |     }
113 | 
114 |     &-before {
115 |       float: left;
116 |       order: 0;
117 |     }
118 | 
119 |     &-after {
120 |       float: right;
121 |       order: 3;
122 |     }
123 | 
124 |     &-item {
125 |       display: inline-block;
126 |       text-align: center;
127 |       font-size: 15px;
128 |       color: #657786;
129 |       vertical-align: middle;
130 |       white-space: nowrap;
131 |     }
132 |   }
133 | 
134 |   &-content {
135 |     z-index: 0;
136 | 
137 |     &-animated {
138 |       display: flex;
139 |       flex-direction: row;
140 |       @include transition();
141 |     }
142 | 
143 |     &-panel {
144 |       overflow: hidden;
145 |       will-change: transform;
146 |     }
147 | 
148 |     &-swipe {
149 |       overflow: hidden;
150 |       visibility: hidden;
151 |       position: relative;
152 | 
153 |       .v-switcher-content {
154 |         overflow: hidden;
155 |         position: relative;
156 |         box-sizing: border-box;
157 | 
158 |         &-panel {
159 |           float: left;
160 |           position: relative;
161 |           background-color: #fff;
162 |         }
163 |       }
164 |     }
165 | 
166 |     &-wrap {
167 |       position: relative;
168 |     }
169 |   }
170 | }
171 | </style>
172 | 
173 | <template>
174 |   <div
175 |     class="v-switcher"
176 |     :class="[
177 |       { 'v-switcher-vertical': align === 'vertical' },
178 |       { 'v-switcher-sticky': sticky }
179 |     ]"
180 |     @mouseenter="cursorInner = true"
181 |     @mouseleave="cursorInner = false"
182 |     @touchstart="touchInner = true"
183 |     @touchend="touchInner = false"
184 |   >
185 |     <div
186 |       ref="headerWrap"
187 |       class="v-switcher-header-wrap"
188 |       :class="{ 'v-switcher-header-wrap-fixed': isFixed }"
189 |       :style="[{ height: `${headerHeight}px` }, fixedHeaderStyle]"
190 |     >
191 |       <div class="v-switcher-header-before">
192 |         <slot name="header-before"></slot>
193 |       </div>
194 |       <div class="v-switcher-header-after">
195 |         <slot name="header-after"></slot>
196 |       </div>
197 |       <div ref="tabWrap" class="v-switcher-header-tabs">
198 |         <ul
199 |           v-show="!hiddenTabs"
200 |           ref="header"
201 |           class="v-switcher-header"
202 |           :class="[`v-switcher-header-${align}`, `v-switcher-header-translate`]"
203 |           :style="headerStyle"
204 |           @touchstart.stop="_handleHeaderTouchStart"
205 |           @touchmove.stop="_handleHeaderTouchMove"
206 |           @touchend.stop="_handleHeaderTouchEnd"
207 |           @mouseleave="_resetAnchorStyle"
208 |         >
209 |           <li
210 |             v-for="(item, index) in formatHeaders"
211 |             :key="index"
212 |             ref="tab"
213 |             :style="headerItemStyle"
214 |             :class="{ 'is-active': index === focusIndex }"
215 |             class="v-switcher-header-item"
216 |             @mouseenter="_handleAnchorTrigger(index)"
217 |             @mouseleave="_handleAnchorTrigger(focusIndex)"
218 |             @click="_handleTabSwitch(index)"
219 |           >
220 |             <slot :name="`tab-${index}`">
221 |               <i v-if="item.icon" :class="item.icon"></i>
222 |               <span v-text="item.text"></span>
223 |             </slot>
224 |           </li>
225 |           <li class="v-switcher-header-anchor" :style="anchorStyle">
226 |             <slot name="anchor"></slot>
227 |           </li>
228 |         </ul>
229 |       </div>
230 |     </div>
231 |     <div v-show="showFixedShim" ref="fixed" :style="fixedShimStyle" />
232 |     <div
233 |       v-if="!routable"
234 |       ref="content"
235 |       class="v-switcher-content-wrap"
236 |       :class="{ 'v-switcher-content-swipe': swipe }"
237 |       :style="contentWrapStyle"
238 |     >
239 |       <div
240 |         class="v-switcher-content"
241 |         :class="[{ 'v-switcher-content-animated': animated && !swipe }]"
242 |         :style="contentStyle"
243 |         @touchstart="_handleContentTouchStart"
244 |         @touchmove="_handleContentTouchMove"
245 |         @touchend="_handleContentTouchEnd"
246 |       >
247 |         <div
248 |           v-for="(item, index) in headers"
249 |           :key="index"
250 |           :style="_computePanelStyle(index)"
251 |           class="v-switcher-content-panel"
252 |         >
253 |           <slot :name="index" />
254 |         </div>
255 |       </div>
256 |     </div>
257 |   </div>
258 | </template>
259 | 
260 | <script>
261 | import Swipe from './swipe.js'
262 | import affix from './affix.js'
263 | import { getMatchedRouteIndex, on, off } from './utils'
264 | 
265 | export default {
266 |   name: 'VSwitcher',
267 |   mixins: [affix],
268 |   props: {
269 |     headers: {
270 |       type: Array,
271 |       required: true
272 |     },
273 |     defaultIndex: {
274 |       type: Number,
275 |       default: 0
276 |     },
277 |     routable: {
278 |       type: Boolean,
279 |       default: false
280 |     },
281 |     animated: {
282 |       type: Boolean,
283 |       default: false
284 |     },
285 |     duration: {
286 |       type: Number,
287 |       default: 300
288 |     },
289 |     align: {
290 |       type: String,
291 |       default: 'start',
292 |       validator: val =>
293 |         ~['around', 'start', 'center', 'end', 'vertical'].indexOf(val)
294 |     },
295 |     headerTrigger: {
296 |       type: String,
297 |       default: 'click',
298 |       validator: val => ~['click', 'hover'].indexOf(val)
299 |     },
300 |     anchorTrigger: {
301 |       type: String,
302 |       default: 'click',
303 |       validator: val => ~['click', 'hover'].indexOf(val)
304 |     },
305 |     anchorPadding: {
306 |       type: Number,
307 |       default: 0,
308 |       validator: val => val >= 0
309 |     },
310 |     swipe: {
311 |       type: Boolean,
312 |       default: false
313 |     },
314 |     autoplay: {
315 |       type: Number,
316 |       default: 0
317 |     },
318 |     contentWidth: {
319 |       type: String,
320 |       default: '100%'
321 |     },
322 |     headerHeight: {
323 |       type: Number,
324 |       default: 40,
325 |       validator: val => val >= 0
326 |     },
327 |     sticky: {
328 |       type: Boolean,
329 |       default: false
330 |     },
331 |     disabledSwipe: {
332 |       type: Boolean,
333 |       default: false
334 |     },
335 |     continuousSwipe: {
336 |       type: Boolean,
337 |       default: false
338 |     }
339 |   },
340 |   data() {
341 |     let focusIndex
342 |     if (this.routable) {
343 |       focusIndex = getMatchedRouteIndex(this.headers, this.$route.path)
344 |     } else {
345 |       focusIndex = this.defaultIndex
346 |     }
347 |     return {
348 |       cursorInner: false,
349 |       touchInner: false,
350 |       focusIndex,
351 |       anchorStyle: {},
352 |       headerStyle: {},
353 |       timer: 0,
354 |       headerLeft: 0,
355 |       headerLastPoint: 0,
356 |       contentStartPoint: {
357 |         x: 0,
358 |         y: 0
359 |       },
360 |       contentDeltaPoint: {
361 |         x: 0,
362 |         y: 0
363 |       },
364 |       swiper: null,
365 |       lastSlide: 0,
366 |       sizeCache: {
367 |         tabs: [],
368 |         header: null,
369 |         headerSize: 0,
370 |         headerTabsWidth: 0,
371 |         headerWrapWidth: 0,
372 |         headerListWidth: 0,
373 |         headerScrollHeight: 0,
374 |         curScreenIndex: 0,
375 |         maxScreenCount: 1
376 |       }
377 |     }
378 |   },
379 |   computed: {
380 |     hiddenTabs() {
381 |       return this.autoplay && this.headerCount <= 1
382 |     },
383 |     formatHeaders() {
384 |       const result = []
385 |       this.headers.forEach((item, index) => {
386 |         result.push({
387 |           text: this._computeItemText(item, index),
388 |           icon: this._computeItemIcon(item, index)
389 |         })
390 |       })
391 |       return result
392 |     },
393 |     headerCount() {
394 |       return this.headers.length
395 |     },
396 |     headerItemStyle() {
397 |       const result = {}
398 |       if (!this.autoplay && this.align !== 'vertical') {
399 |         result.height = `${this.headerHeight}px`
400 |         result.lineHeight = `${this.headerHeight}px`
401 |       }
402 |       if (this.align === 'around') {
403 |         result.width = `${100 / this.headerCount}%`
404 |       }
405 |       return result
406 |     },
407 |     contentWrapStyle() {
408 |       const style = {}
409 |       if (this.sticky) {
410 |         style.paddingTop = `${this.headerHeight}px`
411 |         style.marginTop = `-${this.headerHeight}px`
412 |       }
413 |       return style
414 |     },
415 |     contentStyle() {
416 |       const style = {}
417 |       if (this.swipe) {
418 |         return style
419 |       }
420 |       if (this.animated) {
421 |         style.width = `${this.headerCount * 100}%`
422 |         style.transform = `translateX(${(this.focusIndex / this.headerCount) *
423 |           -100}%)`
424 |         style.transitionDuration = `${this.duration}ms`
425 |       }
426 |       return style
427 |     },
428 |     notTouchDevice() {
429 |       return typeof document === 'undefined'
430 |         ? true
431 |         : !('ontouchstart' in document.documentElement)
432 |     }
433 |   },
434 |   beforeMount() {
435 |     if (this.routable) {
436 |       this.$watch('$route', newVal => {
437 |         const currentIndex = getMatchedRouteIndex(this.headers, newVal.path)
438 |         if (currentIndex < 0) {
439 |           this.focusIndex = -1
440 |           this._resetAnchorStyle()
441 |         } else {
442 |           this._handleTabSwitch(currentIndex, true)
443 |         }
444 |       })
445 |     }
446 |     this.$watch('headers', newVal => {
447 |       this.$nextTick(() => {
448 |         const beforeIndex = this.focusIndex
449 |         this._cacheComponentSize()
450 |         if (this.routable) {
451 |           this.focusIndex = getMatchedRouteIndex(newVal, this.$route.path)
452 |         }
453 |         if (beforeIndex !== this.focusIndex) {
454 |           this._computeAnchorStyle(this.focusIndex)
455 |           this._computeHeaderStyle(beforeIndex)
456 |         }
457 |       })
458 |     })
459 |     this.$watch('focusIndex', (newVal, oldVal) => {
460 |       this._computeAnchorStyle(newVal)
461 |       this._computeHeaderStyle(oldVal)
462 |       this.$emit('change', newVal)
463 |     })
464 |   },
465 |   mounted() {
466 |     this.$nextTick(() => {
467 |       this._cacheComponentSize()
468 |       this._initSwipe()
469 |       this._initCarousel()
470 |       this.$emit('change', this.focusIndex)
471 |       this.$nextTick(() => {
472 |         this._computeAnchorStyle(this.focusIndex)
473 |         this._computeHeaderStyle(0)
474 |       })
475 |       on(window, 'resize', this._cacheComponentSize)
476 |     })
477 |   },
478 |   beforeDestroy() {
479 |     off(window, 'resize', this._cacheComponentSize)
480 |     if (this.timer) {
481 |       window.clearInterval(this.timer)
482 |     }
483 |   },
484 |   methods: {
485 |     _initCarousel() {
486 |       if (!this.autoplay) {
487 |         return
488 |       }
489 |       this.timer = window.setInterval(() => {
490 |         if (Date.now() - this.lastSlide < this.duration) {
491 |           return
492 |         }
493 |         if (this.notTouchDevice) {
494 |           if (this.cursorInner) {
495 |             return
496 |           }
497 |         } else {
498 |           if (this.touchInner) {
499 |             return
500 |           }
501 |         }
502 |         this._switchTrigger(true)
503 |       }, this.autoplay)
504 |     },
505 |     _initSwipe() {
506 |       if (!this.swipe) {
507 |         return
508 |       }
509 |       this.swiper = Swipe(this.$refs.content, {
510 |         startSlide: this.focusIndex,
511 |         speed: this.duration,
512 |         disabled: this.disabledSwipe,
513 |         continuous: this.continuousSwipe || !!this.autoplay,
514 |         callback: this._swipeCallback
515 |       })
516 |     },
517 |     _triggerSwiper() {
518 |       if (!this.swipe) {
519 |         return
520 |       }
521 |       this.swiper.slide(this.focusIndex, this.duration)
522 |     },
523 |     _computeHeaderStyle(beforeIndex) {
524 |       /**
525 |        * 只支持 align 是 start
526 |        */
527 |       if (this.align !== 'start' || this.sizeCache.maxScreenCount <= 1) {
528 |         return
529 |       }
530 |       const index = this.focusIndex
531 |       if (index < 0) {
532 |         return
533 |       }
534 | 
535 |       /**
536 |        * left <= 0
537 |        */
538 |       let left = this.headerLeft
539 |       const max = 0
540 |       const min = this.sizeCache.headerScrollHeight
541 |       if (!index) {
542 |         left = max
543 |       } else if (index === this.headerCount - 1) {
544 |         left = min
545 |       } else {
546 |         /**
547 |          * 如果设置了 beforeHeader 则 tabs[0].left 不为 0
548 |          */
549 |         const baseLeft = this._getComponentSize('tabs', 0).left
550 |         const curTabRect = this._getComponentSize('tabs', index)
551 |         if (beforeIndex > index) {
552 |           /**
553 |            * 向前切换
554 |            * 取当前 focus 的前一个 tab 来 check
555 |            * 如果 checkTab 的左边在视口外，则重置 left
556 |            */
557 |           const checkTabRect = this._getComponentSize('tabs', index - 1)
558 |           if (checkTabRect.left + left < baseLeft) {
559 |             left = baseLeft - checkTabRect.left
560 |           }
561 |           /**
562 |            * 如果下一个 tab 的宽度过大
563 |            * 导致当前 tab 无法完全展示在屏幕内
564 |            * 则重置 left
565 |            */
566 |           const condition =
567 |             curTabRect.right - baseLeft - this.sizeCache.headerTabsWidth
568 |           if (condition > left > 0) {
569 |             left = -condition
570 |           }
571 |         } else {
572 |           /**
573 |            * 向后切换
574 |            * 取当前 focus 的后一个 tab 来 check
575 |            * 如果 checkTab 的右边
576 |            */
577 |           const checkTabRect = this._getComponentSize('tabs', index + 1)
578 |           const result =
579 |             checkTabRect.right - baseLeft - this.sizeCache.headerTabsWidth
580 |           if (result > 0) {
581 |             left = -result
582 |           }
583 |           /**
584 |            * 如果上一个 tab 的宽度过大
585 |            * 导致当前 tab 无法完全展示在屏幕内
586 |            * 则重置 left 为当前 tab 的 left
587 |            */
588 |           const condition = curTabRect.left - baseLeft
589 |           if (left + condition < 0) {
590 |             left = -condition
591 |           }
592 |         }
593 |       }
594 |       if (left < min) {
595 |         left = min
596 |       } else if (left > max) {
597 |         left = max
598 |       }
599 |       this._setHeaderScroll(left)
600 |       this._computeCurrentScreenIndex(left)
601 |       this.headerLeft = left
602 |     },
603 |     _setHeaderScroll(left, duration = true) {
604 |       this.headerStyle = {
605 |         transform: `translateX(${left}px)`,
606 |         transitionDuration: `${duration ? this.duration : 0}ms`
607 |       }
608 |     },
609 |     _computePanelStyle(index) {
610 |       if (this.swipe) {
611 |         return {
612 |           width: this.contentWidth
613 |         }
614 |       }
615 |       if (this.animated) {
616 |         return {
617 |           width: `${100 / this.headerCount}%`
618 |         }
619 |       }
620 |       if (this.focusIndex !== index) {
621 |         return {
622 |           display: 'none'
623 |         }
624 |       }
625 |       return {}
626 |     },
627 |     _computeMaxScreenCount() {
628 |       if (this.align !== 'start') {
629 |         return
630 |       }
631 |       const tabSize = this._getComponentSize('tabs', this.headerCount - 1)
632 |       const header = this._getComponentSize('header')
633 |       if (!tabSize || !header) {
634 |         return
635 |       }
636 |       const fullWidth = tabSize.left + tabSize.width - header.left
637 |       this.sizeCache.maxScreenCount = Math.ceil(
638 |         fullWidth / this.sizeCache.headerListWidth
639 |       )
640 |       this.$emit('calc-screen-count', this.sizeCache.maxScreenCount)
641 |     },
642 |     _computeAnchorStyle(index, loop = 0) {
643 |       if (index < 0) {
644 |         return
645 |       }
646 |       const tabSize = this._getComponentSize('tabs', index)
647 |       if (!tabSize) {
648 |         // 这个地方 DOM 可能还没渲染好，refs 不存在，循环 5 次来取值
649 |         if (loop < 5) {
650 |           setTimeout(() => {
651 |             this._computeAnchorStyle(this.focusIndex, loop + 1)
652 |           }, 200)
653 |         }
654 |         return
655 |       }
656 |       const anchorPadding = +this.anchorPadding
657 |       const header = this._getComponentSize('header')
658 |       if (this.align === 'vertical') {
659 |         this.anchorStyle = {
660 |           height: `${tabSize.height - anchorPadding * 2}px`,
661 |           transform: `translateY(${tabSize.top -
662 |             header.top +
663 |             anchorPadding}px)`,
664 |           transitionDuration: `${this.duration}ms`
665 |         }
666 |       } else {
667 |         this.anchorStyle = {
668 |           width: `${tabSize.width - anchorPadding * 2}px`,
669 |           transform: `translateX(${tabSize.left -
670 |             header.left +
671 |             anchorPadding}px)`,
672 |           transitionDuration: `${this.duration}ms`
673 |         }
674 |       }
675 |     },
676 |     _resetAnchorStyle() {
677 |       if (this.focusIndex > -1) {
678 |         return
679 |       }
680 |       if (this.align === 'vertical') {
681 |         this.anchorStyle.transform = 'translateY(-100%)'
682 |       } else {
683 |         this.anchorStyle.transform = 'translateX(-100%)'
684 |       }
685 |     },
686 |     _computeItemText(item, curIndex) {
687 |       let result
688 |       if (typeof item === 'string') {
689 |         result = item
690 |       } else {
691 |         result = item.label || item.name || item.text
692 |         if (this.focusIndex === curIndex) {
693 |           const temp =
694 |             item['label-active'] || item['name-active'] || item['text-active']
695 |           if (temp) {
696 |             result = temp
697 |           }
698 |         }
699 |       }
700 |       return result
701 |     },
702 |     _computeItemIcon(item, curIndex) {
703 |       let result
704 |       if (typeof item === 'string' || !item.icon) {
705 |         result = ''
706 |       } else {
707 |         result = `iconfont ic-${item.icon.replace('ic-', '')}`
708 |         if (this.focusIndex === curIndex && item['icon-active']) {
709 |           result = `iconfont ic-${item['icon-active'].replace('ic-', '')}`
710 |         }
711 |       }
712 |       return result
713 |     },
714 |     _swipeCallback(index) {
715 |       if (isNaN(index)) {
716 |         return
717 |       }
718 |       this.lastSlide = Date.now()
719 |       this._handleTabSwitch(index, false, false)
720 |     },
721 |     _handleTabSwitch(index, force = false, move = true) {
722 |       if (this.routable && !force) {
723 |         return
724 |       }
725 |       let newIndex = index
726 |       if (this.autoplay && index >= this.headerCount) {
727 |         newIndex = (newIndex - this.headerCount) % 2 ? this.headerCount - 1 : 0
728 |       }
729 |       if (this.focusIndex !== newIndex) {
730 |         this.focusIndex = newIndex
731 |       }
732 |       move && this._triggerSwiper()
733 |     },
734 |     _switchTrigger(isNext) {
735 |       if (Date.now() - this.lastSlide < this.duration) {
736 |         return
737 |       }
738 |       let result
739 |       if (isNext) {
740 |         if (this.focusIndex === this.headerCount - 1) {
741 |           result = 0
742 |         } else {
743 |           result = this.focusIndex + 1
744 |         }
745 |       } else {
746 |         if (this.focusIndex === 0) {
747 |           result = this.headerCount - 1
748 |         } else {
749 |           result = this.focusIndex - 1
750 |         }
751 |       }
752 |       this._handleTabSwitch(result)
753 |     },
754 |     _handleAnchorTrigger(index) {
755 |       if (this.anchorTrigger === 'hover') {
756 |         this._computeAnchorStyle(index)
757 |       }
758 |       if (this.headerTrigger === 'hover') {
759 |         this._handleTabSwitch(index)
760 |       }
761 |     },
762 |     _moveHeader(targetScreenCount) {
763 |       const left = -targetScreenCount * this.sizeCache.headerListWidth
764 |       this._setHeaderScroll(left)
765 |       this.headerLeft = left
766 |       this.sizeCache.curScreenIndex = targetScreenCount
767 |       this.$emit('header-move', {
768 |         is_first: targetScreenCount === 0,
769 |         is_last: targetScreenCount + 1 === this.sizeCache.maxScreenCount
770 |       })
771 |     },
772 |     _handleContentTouchStart(e) {
773 |       if (this.swipe || !this.animated) {
774 |         return
775 |       }
776 |       const point = e.touches ? e.touches[0] : e
777 |       this.contentStartPoint = {
778 |         x: point.pageX,
779 |         y: point.pageY
780 |       }
781 |     },
782 |     _handleContentTouchMove(e) {
783 |       if (this.swipe || !this.animated) {
784 |         return
785 |       }
786 |       const point = e.touches ? e.touches[0] : e
787 |       const lastPoint = this.contentStartPoint
788 |       this.contentDeltaPoint = {
789 |         x: point.pageX - lastPoint.x,
790 |         y: point.pageY - lastPoint.y
791 |       }
792 |     },
793 |     _handleContentTouchEnd() {
794 |       if (this.swipe || !this.animated) {
795 |         return
796 |       }
797 |       const delta = this.contentDeltaPoint
798 |       if (Math.abs(delta.x) < Math.abs(delta.y)) {
799 |         return
800 |       }
801 |       if (Math.abs(delta.x) * 3 < this.sizeCache.headerWrapWidth) {
802 |         return
803 |       }
804 |       if (delta.x > 0) {
805 |         if (!this.focusIndex) {
806 |           return
807 |         }
808 |         this.prev()
809 |       } else {
810 |         if (this.focusIndex >= this.headerCount - 1) {
811 |           return
812 |         }
813 |         this.next()
814 |       }
815 |       this.lastSlide = Date.now()
816 |     },
817 |     _handleHeaderTouchStart(e) {
818 |       if (this.sizeCache.maxScreenCount <= 1) {
819 |         return
820 |       }
821 |       const point = e.touches ? e.touches[0] : e
822 |       this.headerLastPoint =
823 |         this.align === 'vertical' ? point.pageY : point.pageX
824 |     },
825 |     _handleHeaderTouchMove(e) {
826 |       if (this.sizeCache.maxScreenCount <= 1) {
827 |         return
828 |       }
829 |       const point = e.touches ? e.touches[0] : e
830 |       const isVertical = this.align === 'vertical'
831 |       const curPoint = isVertical ? point.pageY : point.pageX
832 |       const delta = curPoint - this.headerLastPoint
833 |       this.headerLastPoint = curPoint
834 |       let left = this.headerLeft + delta
835 |       if (isVertical) {
836 |         // 到顶了
837 |         if (delta < 0 && left < 0) {
838 |           return
839 |         }
840 |         // TODO：暂不支持垂直滚动吧~~~
841 |         return
842 |       } else {
843 |         // 到开头了
844 |         if (left > 0 && delta > 0) {
845 |           left = 0
846 |         } else if (
847 |           delta < 0 &&
848 |           left + this.sizeCache.headerSize < this.sizeCache.headerTabsWidth
849 |         ) {
850 |           left = this.sizeCache.headerScrollHeight
851 |         }
852 |       }
853 |       this.headerLeft = left
854 |       this._setHeaderScroll(left, false)
855 |     },
856 |     _handleHeaderTouchEnd() {
857 |       if (this.sizeCache.maxScreenCount <= 1) {
858 |         return
859 |       }
860 |       this._computeCurrentScreenIndex(this.headerLeft)
861 |     },
862 |     _computeCurrentScreenIndex(left) {
863 |       const result = Math.round(Math.abs(left / this.sizeCache.headerWrapWidth))
864 |       this.sizeCache.curScreenIndex = result
865 |       this.$emit('header-move', {
866 |         is_first: result === 0,
867 |         is_last: result + 1 === this.sizeCache.maxScreenCount
868 |       })
869 |     },
870 |     _computeComponentSize() {
871 |       const lastRect = this._getComponentSize('tabs', this.headerCount - 1)
872 |       const firstRect = this._getComponentSize('tabs', 0)
873 |       if (!firstRect || !lastRect) {
874 |         return
875 |       }
876 |       this.sizeCache.headerSize =
877 |         this.align === 'vertical'
878 |           ? firstRect.top - lastRect.bottom
879 |           : lastRect.right - firstRect.left
880 |     },
881 |     _cacheComponentSize() {
882 |       const tabs = this.$refs.tab
883 |       if (tabs) {
884 |         const tabSize = []
885 |         tabs.forEach(tab => {
886 |           const rect = tab.getBoundingClientRect()
887 |           tabSize.push({
888 |             top: rect.top,
889 |             left: rect.left,
890 |             right: rect.right,
891 |             bottom: rect.bottom,
892 |             width: rect.width,
893 |             height: rect.height
894 |           })
895 |         })
896 |         this.sizeCache.tabs = tabSize
897 |         this._computeComponentSize()
898 |       }
899 |       const headerWrap = this.$refs.headerWrap
900 |       if (headerWrap) {
901 |         this.sizeCache.headerWrapWidth = headerWrap.clientWidth
902 |       }
903 |       const tabsWrap = this.$refs.tabWrap
904 |       if (tabsWrap) {
905 |         this.sizeCache.headerTabsWidth = tabsWrap.clientWidth
906 |       }
907 |       const header = this.$refs.header
908 |       if (header) {
909 |         const headerRect = header.getBoundingClientRect()
910 |         this.sizeCache.header = {
911 |           top: headerRect.top,
912 |           left: headerRect.left,
913 |           right: headerRect.right,
914 |           bottom: headerRect.bottom
915 |         }
916 |         this.sizeCache.headerListWidth = headerRect.width
917 |         this._computeMaxScreenCount()
918 |       }
919 |       this.sizeCache.headerScrollHeight =
920 |         this.sizeCache.headerTabsWidth - this.sizeCache.headerSize
921 |     },
922 |     _getComponentSize(type, index = -1) {
923 |       const value = this.sizeCache[type]
924 |       if (!value) {
925 |         return null
926 |       }
927 |       if (index >= 0) {
928 |         if (!value[index]) {
929 |           return null
930 |         }
931 |         return value[index]
932 |       }
933 |       return value
934 |     },
935 |     next() {
936 |       if (this.swiper) {
937 |         this.swiper.next()
938 |       } else {
939 |         this._switchTrigger(true)
940 |       }
941 |     },
942 |     prev() {
943 |       if (this.swiper) {
944 |         this.swiper.prev()
945 |       } else {
946 |         this._switchTrigger(false)
947 |       }
948 |     },
949 |     forward() {
950 |       if (
951 |         this.align !== 'start' ||
952 |         this.sizeCache.curScreenIndex + 1 >= this.sizeCache.maxScreenCount
953 |       ) {
954 |         this.$emit('header-move', {
955 |           is_first: false,
956 |           is_last: true
957 |         })
958 |       } else {
959 |         this._moveHeader(this.sizeCache.curScreenIndex + 1)
960 |       }
961 |     },
962 |     backward() {
963 |       if (this.align !== 'start' || this.sizeCache.curScreenIndex === 0) {
964 |         this.$emit('header-move', {
965 |           is_first: true,
966 |           is_last: false
967 |         })
968 |       } else {
969 |         this._moveHeader(this.sizeCache.curScreenIndex - 1)
970 |       }
971 |     }
972 |   }
973 | }
974 | </script>
975 | 


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
 1 | const webpack = require('webpack')
 2 | const npmCfg = require('./package.json')
 3 | const CopyWebpackPlugin = require('copy-webpack-plugin')
 4 | 
 5 | const banner = [
 6 |   npmCfg.name + ' v' + npmCfg.version,
 7 |   '(c) ' + new Date().getFullYear() + ' ' + npmCfg.author,
 8 |   npmCfg.homepage
 9 | ].join('\n')
10 | 
11 | module.exports = {
12 |   productionSourceMap: false,
13 |   pages: {
14 |     index: {
15 |       entry: 'examples/main.js',
16 |       template: 'public/index.html',
17 |       filename: 'index.html'
18 |     }
19 |   },
20 |   configureWebpack: {
21 |     plugins: [
22 |       new webpack.BannerPlugin(banner),
23 |       new CopyWebpackPlugin([
24 |         { from: './src/v-switcher.vue' },
25 |         { from: './src/swipe.js' },
26 |         { from: './src/affix.js' },
27 |         { from: './src/utils.js' }
28 |       ])
29 |     ]
30 |   },
31 |   css: {
32 |     extract: true
33 |   }
34 | }
35 | 


--------------------------------------------------------------------------------