├── static
    └── .gitkeep
├── .gitattributes
├── pic
    ├── 1.png
    ├── 2.png
    ├── 3.png
    └── 4.png
├── config
    ├── prod.env.js
    ├── dev.env.js
    └── index.js
├── src
    ├── assets
    │   ├── card.jpg
    │   └── logo.png
    ├── App.vue
    ├── router
    │   └── index.js
    ├── main.js
    └── components
    │   ├── Toolbar.vue
    │   ├── Drawer.vue
    │   └── Container.vue
├── .editorconfig
├── .gitignore
├── .babelrc
├── .postcssrc.js
├── index.html
├── LICENSE
├── package.json
└── README.md


/static/.gitkeep:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/.gitattributes:
--------------------------------------------------------------------------------
1 | *.js linguist-language=vue


--------------------------------------------------------------------------------
/pic/1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itning/DouBanMovieForVue/master/pic/1.png


--------------------------------------------------------------------------------
/pic/2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itning/DouBanMovieForVue/master/pic/2.png


--------------------------------------------------------------------------------
/pic/3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itning/DouBanMovieForVue/master/pic/3.png


--------------------------------------------------------------------------------
/pic/4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itning/DouBanMovieForVue/master/pic/4.png


--------------------------------------------------------------------------------
/config/prod.env.js:
--------------------------------------------------------------------------------
1 | 'use strict'
2 | module.exports = {
3 |   NODE_ENV: '"production"'
4 | }
5 | 


--------------------------------------------------------------------------------
/src/assets/card.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itning/DouBanMovieForVue/master/src/assets/card.jpg


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/itning/DouBanMovieForVue/master/src/assets/logo.png


--------------------------------------------------------------------------------
/config/dev.env.js:
--------------------------------------------------------------------------------
1 | 'use strict'
2 | const merge = require('webpack-merge')
3 | const prodEnv = require('./prod.env')
4 | 
5 | module.exports = merge(prodEnv, {
6 |   NODE_ENV: '"development"'
7 | })
8 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | root = true
 2 | 
 3 | [*]
 4 | charset = utf-8
 5 | indent_style = space
 6 | indent_size = 2
 7 | end_of_line = lf
 8 | insert_final_newline = true
 9 | trim_trailing_whitespace = true
10 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules/
 3 | /dist/
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | 
 8 | # Editor directories and files
 9 | .idea
10 | .vscode
11 | *.suo
12 | *.ntvs*
13 | *.njsproj
14 | *.sln
15 | 


--------------------------------------------------------------------------------
/.babelrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "presets": [
 3 |     ["env", {
 4 |       "modules": false,
 5 |       "targets": {
 6 |         "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
 7 |       }
 8 |     }],
 9 |     "stage-2"
10 |   ],
11 |   "plugins": ["transform-vue-jsx", "transform-runtime"]
12 | }
13 | 


--------------------------------------------------------------------------------
/.postcssrc.js:
--------------------------------------------------------------------------------
 1 | // https://github.com/michael-ciniawsky/postcss-load-config
 2 | 
 3 | module.exports = {
 4 |   "plugins": {
 5 |     "postcss-import": {},
 6 |     "postcss-url": {},
 7 |     // to edit target browsers: use "browserslist" field in package.json
 8 |     "autoprefixer": {}
 9 |   }
10 | }
11 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <toolbar/>
 4 |     <drawer/>
 5 |     <router-view/>
 6 |   </div>
 7 | </template>
 8 | 
 9 | <script>
10 |   import toolbar from './components/Toolbar'
11 |   import drawer from './components/Drawer'
12 | 
13 |   export default {
14 |     name: 'App',
15 |     components: {
16 |       toolbar, drawer
17 |     }
18 |   }
19 | </script>
20 | 
21 | <style>
22 | 
23 | </style>
24 | 


--------------------------------------------------------------------------------
/src/router/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Router from 'vue-router'
 3 | 
 4 | import Container from '../components/Container'
 5 | 
 6 | Vue.use(Router);
 7 | 
 8 | export default new Router({
 9 |   mode: 'hash',
10 |   routes: [
11 |     {
12 |       path: '/',
13 |       redirect: '/in_theaters'
14 |     },
15 |     {
16 |       path: '/:list',
17 |       component: Container,
18 |       props: true
19 |     }
20 |   ]
21 | })
22 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | // The Vue build version to load with the `import` command
 2 | // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
 3 | import Vue from 'vue'
 4 | import App from './App'
 5 | import router from './router'
 6 | import VueResource from 'vue-resource'
 7 | 
 8 | Vue.config.productionTip = false;
 9 | 
10 | Vue.use(VueResource);
11 | 
12 | /* eslint-disable no-new */
13 | new Vue({
14 |   el: '#app',
15 |   router,
16 |   components: {App},
17 |   template: '<App/>'
18 | });
19 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |   <meta charset="utf-8">
 5 |   <meta name="viewport" content="width=device-width,initial-scale=1.0">
 6 |   <title>豆瓣电影 Power By Vue.JS</title>
 7 |   <link rel="stylesheet" href="//cdn.bootcss.com/mdui/0.4.0/css/mdui.min.css">
 8 |   <script src="//cdn.bootcss.com/mdui/0.4.0/js/mdui.min.js"></script>
 9 | </head>
10 | <body class="mdui-drawer-body-left mdui-appbar-with-toolbar mdui-theme-primary-indigo mdui-theme-accent-pink">
11 | <div id="app"></div>
12 | </body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/src/components/Toolbar.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <header class="mdui-appbar mdui-appbar-fixed">
 3 |     <div class="mdui-toolbar mdui-color-theme">
 4 |       <a href="javascript:" class="mdui-btn mdui-btn-icon" mdui-drawer="{target: '#left-drawer'}"><i
 5 |         class="mdui-icon material-icons">menu</i></a>
 6 |       <p>豆瓣电影</p>
 7 |       <div class="mdui-toolbar-spacer"></div>
 8 |       <a href="javascript:window.location.reload();" class="mdui-btn mdui-btn-icon"><i
 9 |         class="mdui-icon material-icons">refresh</i></a>
10 |     </div>
11 |   </header>
12 | </template>
13 | 
14 | <script>
15 |     export default {
16 |         name: "toolbar"
17 |     }
18 | </script>
19 | 
20 | <style scoped>
21 | 
22 | </style>
23 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2017 a1837634447
 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 all
13 | 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 THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "douban_movie_for_vue",
 3 |   "version": "1.0.0",
 4 |   "description": "A project that displays movie information DouBan api use Vue.js",
 5 |   "author": "ITNING <3579677768@qq.com>",
 6 |   "private": true,
 7 |   "scripts": {
 8 |     "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
 9 |     "start": "npm run dev",
10 |     "build": "node build/build.js"
11 |   },
12 |   "dependencies": {
13 |     "vue": "^2.5.2",
14 |     "vue-resource": "^1.3.5",
15 |     "vue-router": "^3.0.1"
16 |   },
17 |   "devDependencies": {
18 |     "autoprefixer": "^7.1.2",
19 |     "babel-core": "^6.26.3",
20 |     "babel-helper-vue-jsx-merge-props": "^2.0.3",
21 |     "babel-loader": "^7.1.1",
22 |     "babel-plugin-syntax-jsx": "^6.18.0",
23 |     "babel-plugin-transform-runtime": "^6.22.0",
24 |     "babel-plugin-transform-vue-jsx": "^3.5.0",
25 |     "babel-preset-env": "^1.7.0",
26 |     "babel-preset-stage-2": "^6.22.0",
27 |     "chalk": "^2.0.1",
28 |     "copy-webpack-plugin": "^4.0.1",
29 |     "css-loader": "^0.28.11",
30 |     "extract-text-webpack-plugin": "^3.0.2",
31 |     "file-loader": "^1.1.4",
32 |     "friendly-errors-webpack-plugin": "^1.6.1",
33 |     "html-webpack-plugin": "^2.30.1",
34 |     "node-notifier": "^5.1.2",
35 |     "optimize-css-assets-webpack-plugin": "^3.2.0",
36 |     "ora": "^1.2.0",
37 |     "portfinder": "^1.0.13",
38 |     "postcss-import": "^11.0.0",
39 |     "postcss-loader": "^2.0.8",
40 |     "postcss-url": "^7.2.1",
41 |     "rimraf": "^2.6.0",
42 |     "semver": "^5.3.0",
43 |     "shelljs": "^0.7.6",
44 |     "uglifyjs-webpack-plugin": "^1.1.1",
45 |     "url-loader": "^0.5.8",
46 |     "vue-loader": "^13.3.0",
47 |     "vue-style-loader": "^3.0.1",
48 |     "vue-template-compiler": "^2.5.2",
49 |     "webpack": "^3.12.0",
50 |     "webpack-bundle-analyzer": "^2.9.0",
51 |     "webpack-dev-server": "^2.11.3",
52 |     "webpack-merge": "^4.1.0"
53 |   },
54 |   "engines": {
55 |     "node": ">= 6.0.0",
56 |     "npm": ">= 3.0.0"
57 |   },
58 |   "browserslist": [
59 |     "> 1%",
60 |     "last 2 versions",
61 |     "not ie <= 8"
62 |   ]
63 | }
64 | 


--------------------------------------------------------------------------------
/config/index.js:
--------------------------------------------------------------------------------
 1 | 'use strict'
 2 | // Template version: 1.3.1
 3 | // see http://vuejs-templates.github.io/webpack for documentation.
 4 | 
 5 | const path = require('path')
 6 | 
 7 | module.exports = {
 8 |   dev: {
 9 | 
10 |     // Paths
11 |     assetsSubDirectory: 'static',
12 |     assetsPublicPath: '/',
13 |     proxyTable: {},
14 | 
15 |     // Various Dev Server settings
16 |     host: 'localhost', // can be overwritten by process.env.HOST
17 |     port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
18 |     autoOpenBrowser: false,
19 |     errorOverlay: true,
20 |     notifyOnErrors: true,
21 |     poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
22 | 
23 | 
24 |     /**
25 |      * Source Maps
26 |      */
27 | 
28 |     // https://webpack.js.org/configuration/devtool/#development
29 |     devtool: 'cheap-module-eval-source-map',
30 | 
31 |     // If you have problems debugging vue-files in devtools,
32 |     // set this to false - it *may* help
33 |     // https://vue-loader.vuejs.org/en/options.html#cachebusting
34 |     cacheBusting: true,
35 | 
36 |     cssSourceMap: true
37 |   },
38 | 
39 |   build: {
40 |     // Template for index.html
41 |     index: path.resolve(__dirname, '../dist/index.html'),
42 | 
43 |     // Paths
44 |     assetsRoot: path.resolve(__dirname, '../dist'),
45 |     assetsSubDirectory: 'static',
46 |     assetsPublicPath: './',
47 | 
48 |     /**
49 |      * Source Maps
50 |      */
51 | 
52 |     productionSourceMap: true,
53 |     // https://webpack.js.org/configuration/devtool/#production
54 |     devtool: '#source-map',
55 | 
56 |     // Gzip off by default as many popular static hosts such as
57 |     // Surge or Netlify already gzip all static assets for you.
58 |     // Before setting to `true`, make sure to:
59 |     // npm install --save-dev compression-webpack-plugin
60 |     productionGzip: false,
61 |     productionGzipExtensions: ['js', 'css'],
62 | 
63 |     // Run the build command with an extra argument to
64 |     // View the bundle analyzer report after build finishes:
65 |     // `npm run build --report`
66 |     // Set to `true` or `false` to always turn it on or off
67 |     bundleAnalyzerReport: process.env.npm_config_report
68 |   }
69 | }
70 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # DouBanMovieForVue
 2 | 
 3 | > 使用Vue.JS和豆瓣电影提供的Api创建的电影客户端
 4 | 
 5 | [![GitHub stars](https://img.shields.io/github/stars/itning/DouBanMovieForVue.svg?style=social&label=Stars)](https://github.com/itning/DouBanMovieForVue/stargazers)
 6 | [![GitHub forks](https://img.shields.io/github/forks/itning/DouBanMovieForVue.svg?style=social&label=Fork)](https://github.com/itning/DouBanMovieForVue/network/members)
 7 | [![GitHub watchers](https://img.shields.io/github/watchers/itning/DouBanMovieForVue.svg?style=social&label=Watch)](https://github.com/itning/DouBanMovieForVue/watchers)
 8 | [![GitHub followers](https://img.shields.io/github/followers/itning.svg?style=social&label=Follow)](https://github.com/itning?tab=followers)
 9 | 
10 | [![GitHub issues](https://img.shields.io/github/issues/itning/DouBanMovieForVue.svg)](https://github.com/itning/DouBanMovieForVue/issues)
11 | [![GitHub license](https://img.shields.io/github/license/itning/DouBanMovieForVue.svg)](https://github.com/itning/DouBanMovieForVue/blob/master/LICENSE)
12 | [![GitHub last commit](https://img.shields.io/github/last-commit/itning/DouBanMovieForVue.svg)](https://github.com/itning/DouBanMovieForVue/commits)
13 | [![GitHub release](https://img.shields.io/github/release/itning/DouBanMovieForVue.svg)](https://github.com/itning/DouBanMovieForVue/releases)
14 | [![GitHub repo size in bytes](https://img.shields.io/github/repo-size/itning/DouBanMovieForVue.svg)](https://github.com/itning/DouBanMovieForVue)
15 | [![HitCount](http://hits.dwyl.io/itning/DouBanMovieForVue.svg)](http://hits.dwyl.io/itning/DouBanMovieForVue)
16 | [![language](https://img.shields.io/badge/language-Vue-green.svg)](https://github.com/itning/DouBanMovieForVue)
17 | 
18 | ## Build Setup
19 | 
20 | ``` bash
21 | # install dependencies
22 | npm install
23 | 
24 | # serve with hot reload at localhost:8080
25 | npm run dev
26 | 
27 | # build for production with minification
28 | npm run build
29 | 
30 | # build for production and view the bundle analyzer report
31 | npm run build --report
32 | ```
33 | 
34 | For a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).
35 | 
36 | ## View
37 | [http://itning.top/douban](http://itning.top/douban)
38 | 
39 | ![](https://raw.githubusercontent.com/itning/DouBanMovieForVue/master/pic/1.png)
40 | ![](https://raw.githubusercontent.com/itning/DouBanMovieForVue/master/pic/2.png)
41 | ![](https://raw.githubusercontent.com/itning/DouBanMovieForVue/master/pic/3.png)
42 | ![](https://raw.githubusercontent.com/itning/DouBanMovieForVue/master/pic/4.png)
43 | 


--------------------------------------------------------------------------------
/src/components/Drawer.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <nav class="mdui-drawer mdui-card" id="left-drawer">
 3 |     <div class="mdui-card-media">
 4 |       <img src="../assets/card.jpg"/>
 5 |       <div class="mdui-card-media-covered">
 6 |         <div class="mdui-card-primary">
 7 |           <div class="mdui-card-primary-title">{{nowShow}}</div>
 8 |           <div class="mdui-card-primary-subtitle">豆瓣电影</div>
 9 |         </div>
10 |       </div>
11 |     </div>
12 |     <ul class="mdui-list mdui-card-content" mdui-collapse="{accordion: true}">
13 |       <li class="mdui-list-item mdui-ripple" v-bind:class="{'mdui-list-item-active':nowPath==='/in_theaters'}">
14 |         <i class="mdui-list-item-icon mdui-icon material-icons">whatshot</i>
15 |         <router-link to="/in_theaters" class="mdui-list-item-content">正在热映
16 |         </router-link>
17 |       </li>
18 |       <li class="mdui-list-item mdui-ripple" v-bind:class="{'mdui-list-item-active':nowPath==='/coming_soon'}">
19 |         <i class="mdui-list-item-icon mdui-icon material-icons">video_library</i>
20 |         <router-link to="/coming_soon" class="mdui-list-item-content">即将上映
21 |         </router-link>
22 |       </li>
23 |       <li class="mdui-list-item mdui-ripple" v-bind:class="{'mdui-list-item-active':nowPath==='/top250'}">
24 |         <i class="mdui-list-item-icon mdui-icon material-icons">sort</i>
25 |         <router-link to="/top250" class="mdui-list-item-content">Top250
26 |         </router-link>
27 |       </li>
28 |       <li class="mdui-list-item mdui-ripple">
29 |         <label class="mdui-switch">
30 |           <input type="checkbox" id="night_mode" v-model="night_mode"/>
31 |           <i class="mdui-switch-icon"></i>
32 |         </label>
33 |         <div class="mdui-list-item-content">夜间模式</div>
34 |       </li>
35 |     </ul>
36 |   </nav>
37 | </template>
38 | 
39 | <script>
40 |   export default {
41 |     name: "drawer",
42 |     data() {
43 |       return {
44 |         nowShow: '',
45 |         night_mode: false
46 |       }
47 |     },
48 |     watch: {
49 |       night_mode(now, old) {
50 |         localStorage.night_mode = now;
51 |         this.setNightMode(now);
52 |       }
53 |     },
54 |     computed: {
55 |       nowPath() {
56 |         switch (this.$route.path) {
57 |           case '/in_theaters':
58 |             this.nowShow = '正在热映';
59 |             break;
60 |           case '/coming_soon':
61 |             this.nowShow = '即将上映';
62 |             break;
63 |           case '/top250':
64 |             this.nowShow = 'TOP250';
65 |             break;
66 |         }
67 |         return this.$route.path;
68 |       }
69 |     },
70 |     methods: {
71 |       setNightMode(status) {
72 |         if (status) {
73 |           document.getElementsByTagName("body")[0].className = "mdui-drawer-body-left mdui-appbar-with-toolbar mdui-theme-primary-indigo mdui-theme-accent-pink mdui-theme-layout-dark";
74 |         } else {
75 |           document.getElementsByTagName("body")[0].className = "mdui-drawer-body-left mdui-appbar-with-toolbar mdui-theme-primary-indigo mdui-theme-accent-pink";
76 |         }
77 |       }
78 |     },
79 |     mounted() {
80 |       if (localStorage.night_mode === 'true') {
81 |         this.night_mode = true;
82 |         this.setNightMode(true);
83 |       }
84 |     }
85 |   }
86 | </script>
87 | 
88 | <style scoped>
89 | 
90 | </style>
91 | 


--------------------------------------------------------------------------------
/src/components/Container.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <section class="mdui-container-fluid">
  3 |     <div v-show="showProgress" class="mdui-progress">
  4 |       <div class="mdui-progress-indeterminate"></div>
  5 |     </div>
  6 |     <div class="mdui-card item" v-for="subject in subjects">
  7 |       <div class="mdui-card-media">
  8 |         <img v-bind:src="subject.images.medium"/>
  9 |         <div class="mdui-card-menu">
 10 |           <a v-bind:href="subject.alt" target="_blank" class="mdui-btn mdui-btn-icon mdui-text-color-white"><i
 11 |             class="mdui-icon material-icons">info</i>
 12 |           </a>
 13 |         </div>
 14 |       </div>
 15 |       <div class="mdui-card-primary">
 16 |         <div class="mdui-card-primary-title">{{subject.title}}</div>
 17 |         <div class="mdui-card-primary-subtitle">导演：<span v-for="director in subject.directors">{{director.name}}</span>
 18 |         </div>
 19 |       </div>
 20 |       <div class="mdui-card-content">演员：<span v-for="(cast,index) in subject.casts">{{cast.name}}{{(index!==(subject.casts.length-1))? '，':''}}</span><br>
 21 |         类型：<span v-for="(genre,index) in subject.genres">{{genre}}{{(index!==(subject.genres.length-1))? '，':''}}</span><br>
 22 |         年代：{{subject.year}}<br>
 23 |         豆瓣评分：{{subject.rating.average}}
 24 |       </div>
 25 |     </div>
 26 |   </section>
 27 | </template>
 28 | 
 29 | <script>
 30 |   export default {
 31 |     props: ['list'],
 32 |     name: "container",
 33 |     data() {
 34 |       return {
 35 |         subjects: [],
 36 |         showProgress: true,
 37 |         loading: false,
 38 |         page: 1,
 39 |         total: 0
 40 |       }
 41 |     },
 42 |     watch: {
 43 |       list(now, old) {
 44 |         this.showProgress = true;
 45 |         this.subjects = [];
 46 |         this.page = 1;
 47 |         this.total = 0;
 48 |         this.switch_list(now);
 49 |       }
 50 |     },
 51 |     methods: {
 52 |       switch_list(list) {
 53 |         switch (list) {
 54 |           case 'in_theaters':
 55 |             this.getData(list);
 56 |             break;
 57 |           case 'coming_soon':
 58 |             this.getData(list);
 59 |             break;
 60 |           case 'top250':
 61 |             this.getData(list);
 62 |             break;
 63 |           default:
 64 |             this.getData('in_theaters');
 65 |             break;
 66 |         }
 67 |       },
 68 |       getData(list, nextPage = false) {
 69 |         let count = 12;
 70 |         if (nextPage && ((this.page * count) >= this.total)) {
 71 |           this.showProgress = false;
 72 |           return
 73 |         }
 74 |         let start = this.page === 1 ? 0 : (this.page - 1) * count + 1;
 75 |         let parser = document.createElement('a');
 76 |         this.$http.jsonp('//api.douban.com/v2/movie/' + list + '?start=' + start + '&count=' + count).then(response => {
 77 |           if (response.status === 200) {
 78 |             this.showProgress = false;
 79 |             this.loading = false;
 80 |             this.total = response.body.total;
 81 |             this.page += 1;
 82 |             response.body.subjects.forEach((e, i) => {
 83 |               //因为豆瓣Api图片网址错误造成403权限问题,所以统一换前缀
 84 |               parser.href = e.images.medium;
 85 |               e.images.medium = "http://img3.doubanio.com" + parser.pathname;
 86 |             });
 87 |             response.body.subjects.forEach((e, i) => {
 88 |               this.subjects.push(e);
 89 |             });
 90 |           } else {
 91 |             console.error(response);
 92 |             this.showSnackbar(response.status);
 93 |           }
 94 |         }, response => {
 95 |           console.error(response);
 96 |           this.showSnackbar(response.status);
 97 |         });
 98 |       },
 99 |       showSnackbar(msg) {
100 |         mdui.snackbar({
101 |           message: msg
102 |         });
103 |       },
104 |       pos: function () {
105 |         //滚动条的高度
106 |         let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
107 |         //网页正文全文高
108 |         let scrollHeight = document.body.scrollHeight;
109 |         //可视区域高
110 |         let height = window.innerHeight || document.documentElement.clientHeight;
111 |         let number = scrollHeight - (height + scrollTop);
112 |         if (number < 300) {
113 |           this.loadingMore();
114 |         }
115 |       },
116 |       loadingMore: function () {
117 |         if (this.loading) {
118 |           return;
119 |         }
120 |         this.loading = true;
121 |         this.showProgress = true;
122 |         this.getData(this.list, true);
123 |       }
124 |     },
125 |     beforeMount() {
126 |       this.showProgress = true;
127 |       if (this.list === undefined) {
128 |         this.switch_list('in_theaters');
129 |       } else {
130 |         this.switch_list(this.list);
131 |       }
132 |     },
133 |     mounted() {
134 |       window.addEventListener('scroll', this.pos);
135 |     },
136 |     destroyed() {
137 |       window.removeEventListener('scroll', this.pos);
138 |     }
139 |   }
140 | </script>
141 | 
142 | <style scoped>
143 |   @media (min-width: 1024px) {
144 |     .item {
145 |       width: 23.5%;
146 |       display: inline-block;
147 |       margin-left: 1%;
148 |       margin-bottom: 10px;
149 |     }
150 |   }
151 | 
152 |   .mdui-progress {
153 |     position: fixed;
154 |     z-index: 999;
155 |   }
156 | </style>
157 | 


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