Commit 9ff37e5f42a2435547146e5b156c201953419810
1 parent
204d125b
分页效果
Showing
6 changed files
with
33 additions
and
51 deletions
package.json
| @@ -17,6 +17,7 @@ | @@ -17,6 +17,7 @@ | ||
| 17 | "scss-loader": "^0.0.1", | 17 | "scss-loader": "^0.0.1", |
| 18 | "style-loader": "^1.1.2", | 18 | "style-loader": "^1.1.2", |
| 19 | "swiper": "^4.2.1", | 19 | "swiper": "^4.2.1", |
| 20 | + "v-page": "^2.0.8", | ||
| 20 | "vue": "^2.5.2", | 21 | "vue": "^2.5.2", |
| 21 | "vue-awesome-swiper": "^3.1.3", | 22 | "vue-awesome-swiper": "^3.1.3", |
| 22 | "vue-loader": "^13.7.3", | 23 | "vue-loader": "^13.7.3", |
src/assets/css/commonCss/reset.css
| @@ -163,51 +163,8 @@ table { | @@ -163,51 +163,8 @@ table { | ||
| 163 | } | 163 | } |
| 164 | 164 | ||
| 165 | /*分页*/ | 165 | /*分页*/ |
| 166 | -.pageination_align { | ||
| 167 | - text-align: center | ||
| 168 | -} | ||
| 169 | - | ||
| 170 | -.pageination { | ||
| 171 | - color: #48576a; | ||
| 172 | - font-size: 12px; | ||
| 173 | - display: inline-block; | ||
| 174 | - user-select: none; | ||
| 175 | -} | ||
| 176 | - | ||
| 177 | -.pagination_page { | ||
| 178 | - padding: 0 4px; | ||
| 179 | - border: 1px solid #d1dbe5; | ||
| 180 | - border-right: 0; | ||
| 181 | - background: #fff; | ||
| 182 | - font-size: 13px; | ||
| 183 | - min-width: 28px; | ||
| 184 | - height: 28px; | ||
| 185 | - line-height: 28px; | ||
| 186 | - cursor: pointer; | ||
| 187 | - box-sizing: border-box; | ||
| 188 | - text-align: center; | ||
| 189 | - float: left; | ||
| 190 | -} | ||
| 191 | - | ||
| 192 | -.pagination_page_right { | ||
| 193 | - border-right: 1px solid #d1dbe5; | ||
| 194 | -} | ||
| 195 | - | ||
| 196 | -.pagination_page:hover { | ||
| 197 | - color: #20a0ff; | ||
| 198 | -} | ||
| 199 | - | ||
| 200 | -.disabled { | ||
| 201 | - color: #e4e4e4 !important; | ||
| 202 | - background-color: #fff; | ||
| 203 | - cursor: not-allowed; | ||
| 204 | -} | ||
| 205 | - | ||
| 206 | -.pagination_page_active { | ||
| 207 | - border-color: #20a0ff; | ||
| 208 | - background-color: #20a0ff; | ||
| 209 | - color: #fff !important;; | ||
| 210 | - cursor: default; | 166 | +.v-pagination{ |
| 167 | + margin: 20px auto; | ||
| 211 | } | 168 | } |
| 212 | 169 | ||
| 213 | 170 |
src/main.js
| @@ -7,6 +7,9 @@ import router from './router' | @@ -7,6 +7,9 @@ import router from './router' | ||
| 7 | import 'swiper/dist/css/swiper.css'; | 7 | import 'swiper/dist/css/swiper.css'; |
| 8 | 8 | ||
| 9 | 9 | ||
| 10 | +import VPage from 'v-page'; | ||
| 11 | +Vue.use(VPage); | ||
| 12 | + | ||
| 10 | 13 | ||
| 11 | require ('./assets/css/commonCss/reset.css') | 14 | require ('./assets/css/commonCss/reset.css') |
| 12 | 15 |
src/views/product/components/selectTab0.vue
| 1 | <template> | 1 | <template> |
| 2 | - <div class="widthCommon"> | 2 | + <div class="widthCommon" style="margin-bottom: 20px"> |
| 3 | <ul class="tabCon"> | 3 | <ul class="tabCon"> |
| 4 | <li v-for="i in 10" :key="i"> | 4 | <li v-for="i in 10" :key="i"> |
| 5 | <div class="tabListImg"> | 5 | <div class="tabListImg"> |
| @@ -9,6 +9,9 @@ | @@ -9,6 +9,9 @@ | ||
| 9 | </li> | 9 | </li> |
| 10 | </ul> | 10 | </ul> |
| 11 | 11 | ||
| 12 | + <v-page :total-row="100" align="center" :page-size-menu="false" :info="false" @page-change="pagePhotoChange"> | ||
| 13 | + </v-page> | ||
| 14 | + | ||
| 12 | </div> | 15 | </div> |
| 13 | </template> | 16 | </template> |
| 14 | 17 | ||
| @@ -16,7 +19,11 @@ | @@ -16,7 +19,11 @@ | ||
| 16 | 19 | ||
| 17 | export default { | 20 | export default { |
| 18 | name: 'selectTab0', | 21 | name: 'selectTab0', |
| 19 | - | 22 | + methods:{ |
| 23 | + pagePhotoChange:function (pInfo) { | ||
| 24 | + console.log(pInfo) | ||
| 25 | + } | ||
| 26 | + } | ||
| 20 | 27 | ||
| 21 | } | 28 | } |
| 22 | </script> | 29 | </script> |
src/views/product/components/selectTab1.vue
| 1 | <template> | 1 | <template> |
| 2 | - <div class="widthCommon"> | 2 | + <div class="widthCommon" style="margin-bottom: 20px"> |
| 3 | <ul class="tabCon"> | 3 | <ul class="tabCon"> |
| 4 | <li v-for="i in 10" :key="i"> | 4 | <li v-for="i in 10" :key="i"> |
| 5 | <div class="tabListImg"> | 5 | <div class="tabListImg"> |
| @@ -9,6 +9,9 @@ | @@ -9,6 +9,9 @@ | ||
| 9 | </li> | 9 | </li> |
| 10 | </ul> | 10 | </ul> |
| 11 | 11 | ||
| 12 | + <v-page :total-row="100" align="center" :page-size-menu="false" :info="false" @page-change="pagePhotoChange"> | ||
| 13 | + </v-page> | ||
| 14 | + | ||
| 12 | </div> | 15 | </div> |
| 13 | </template> | 16 | </template> |
| 14 | 17 | ||
| @@ -16,7 +19,11 @@ | @@ -16,7 +19,11 @@ | ||
| 16 | 19 | ||
| 17 | export default { | 20 | export default { |
| 18 | name: 'selectTab1', | 21 | name: 'selectTab1', |
| 19 | - | 22 | + methods:{ |
| 23 | + pagePhotoChange:function (pInfo) { | ||
| 24 | + console.log(pInfo) | ||
| 25 | + } | ||
| 26 | + } | ||
| 20 | 27 | ||
| 21 | } | 28 | } |
| 22 | </script> | 29 | </script> |
src/views/product/components/selectTab2.vue
| 1 | <template> | 1 | <template> |
| 2 | - <div class="widthCommon"> | 2 | + <div class="widthCommon" style="margin-bottom: 20px"> |
| 3 | <ul class="tabCon"> | 3 | <ul class="tabCon"> |
| 4 | <li v-for="i in 10" :key="i"> | 4 | <li v-for="i in 10" :key="i"> |
| 5 | <div class="tabListImg"> | 5 | <div class="tabListImg"> |
| @@ -9,6 +9,9 @@ | @@ -9,6 +9,9 @@ | ||
| 9 | </li> | 9 | </li> |
| 10 | </ul> | 10 | </ul> |
| 11 | 11 | ||
| 12 | + <v-page :total-row="100" align="center" :page-size-menu="false" :info="false" @page-change="pagePhotoChange"> | ||
| 13 | + </v-page> | ||
| 14 | + | ||
| 12 | </div> | 15 | </div> |
| 13 | </template> | 16 | </template> |
| 14 | 17 | ||
| @@ -16,7 +19,11 @@ | @@ -16,7 +19,11 @@ | ||
| 16 | 19 | ||
| 17 | export default { | 20 | export default { |
| 18 | name: 'selectTab2', | 21 | name: 'selectTab2', |
| 19 | - | 22 | + methods:{ |
| 23 | + pagePhotoChange:function (pInfo) { | ||
| 24 | + console.log(pInfo) | ||
| 25 | + } | ||
| 26 | + } | ||
| 20 | 27 | ||
| 21 | } | 28 | } |
| 22 | </script> | 29 | </script> |