Commit 32e359dfa2d4dc2c392f46b9a09623787766c40b
1 parent
120cce1d
betterScroll
Showing
3 changed files
with
47 additions
and
22 deletions
package-lock.json
| @@ -1265,6 +1265,15 @@ | @@ -1265,6 +1265,15 @@ | ||
| 1265 | "tweetnacl": "^0.14.3" | 1265 | "tweetnacl": "^0.14.3" |
| 1266 | } | 1266 | } |
| 1267 | }, | 1267 | }, |
| 1268 | + "better-scroll": { | ||
| 1269 | + "version": "1.13.2", | ||
| 1270 | + "resolved": "http://registry.npm.taobao.org/better-scroll/download/better-scroll-1.13.2.tgz", | ||
| 1271 | + "integrity": "sha1-MebgiM8tI85I5S+tbMWRNP/rL1Y=", | ||
| 1272 | + "dev": true, | ||
| 1273 | + "requires": { | ||
| 1274 | + "babel-runtime": "^6.0.0" | ||
| 1275 | + } | ||
| 1276 | + }, | ||
| 1268 | "bfj-node4": { | 1277 | "bfj-node4": { |
| 1269 | "version": "5.3.1", | 1278 | "version": "5.3.1", |
| 1270 | "resolved": "http://registry.npm.taobao.org/bfj-node4/download/bfj-node4-5.3.1.tgz", | 1279 | "resolved": "http://registry.npm.taobao.org/bfj-node4/download/bfj-node4-5.3.1.tgz", |
package.json
| @@ -25,6 +25,7 @@ | @@ -25,6 +25,7 @@ | ||
| 25 | "babel-plugin-transform-vue-jsx": "^3.5.0", | 25 | "babel-plugin-transform-vue-jsx": "^3.5.0", |
| 26 | "babel-preset-env": "^1.3.2", | 26 | "babel-preset-env": "^1.3.2", |
| 27 | "babel-preset-stage-2": "^6.22.0", | 27 | "babel-preset-stage-2": "^6.22.0", |
| 28 | + "better-scroll": "^1.13.2", | ||
| 28 | "chalk": "^2.0.1", | 29 | "chalk": "^2.0.1", |
| 29 | "copy-webpack-plugin": "^4.0.1", | 30 | "copy-webpack-plugin": "^4.0.1", |
| 30 | "css-loader": "^0.28.11", | 31 | "css-loader": "^0.28.11", |
src/views/mapsection.vue
| @@ -35,14 +35,18 @@ | @@ -35,14 +35,18 @@ | ||
| 35 | <li>正常</li> | 35 | <li>正常</li> |
| 36 | <li>空闲</li> | 36 | <li>空闲</li> |
| 37 | </ul> | 37 | </ul> |
| 38 | - <ul class="park-wrap"> | ||
| 39 | - <li v-for="(item, index) in parkList" :key="index" :title="item.name" :class="{'current-active':index===currentIndex}" @click="currentPark(item, index)">{{ item.name }}</li> | ||
| 40 | - </ul> | 38 | + <div class="park-wrap" ref="parkwrap"> |
| 39 | + <ul class="content" ref=""> | ||
| 40 | + <li v-for="(item, index) in parkList" :key="index" :title="item.name" :class="{'current-active':index===currentIndex}" @click="currentPark(item, index)">{{ item.name }}</li> | ||
| 41 | + </ul> | ||
| 42 | + </div> | ||
| 41 | <div class="flexfm" ></div> | 43 | <div class="flexfm" ></div> |
| 42 | </div> | 44 | </div> |
| 43 | </template> | 45 | </template> |
| 44 | 46 | ||
| 45 | <script> | 47 | <script> |
| 48 | +import BScroll from 'better-scroll' | ||
| 49 | + | ||
| 46 | export default { | 50 | export default { |
| 47 | name: 'mapsection', | 51 | name: 'mapsection', |
| 48 | data() { | 52 | data() { |
| @@ -69,8 +73,14 @@ export default { | @@ -69,8 +73,14 @@ export default { | ||
| 69 | currentIndex:0 | 73 | currentIndex:0 |
| 70 | } | 74 | } |
| 71 | }, | 75 | }, |
| 72 | - created() { | ||
| 73 | - | 76 | + mounted() { |
| 77 | + this.$nextTick(() => { | ||
| 78 | + this.scroll = new BScroll(this.$refs.parkwrap,{ | ||
| 79 | + scrollbars:true,//显示滚动条（默认是false不显示） | ||
| 80 | + mouseWheel:true,//支持鼠标触发区域滚动 | ||
| 81 | + bounce:true,//取消达到边界的缓冲效果 | ||
| 82 | + }) | ||
| 83 | + }) | ||
| 74 | }, | 84 | }, |
| 75 | methods: { | 85 | methods: { |
| 76 | currentPark(item, index) { | 86 | currentPark(item, index) { |
| @@ -159,23 +169,28 @@ export default { | @@ -159,23 +169,28 @@ export default { | ||
| 159 | bottom: 11px; | 169 | bottom: 11px; |
| 160 | background-color: #0D3689; | 170 | background-color: #0D3689; |
| 161 | font-size: 12px; | 171 | font-size: 12px; |
| 162 | - overflow-y: auto; | ||
| 163 | - li{ | ||
| 164 | - padding-left: 26px; | ||
| 165 | - height: 20px; | ||
| 166 | - line-height: 20px; | ||
| 167 | - color:rgba(255,255,255,.7); | ||
| 168 | - background-image:url("../assets/img/office-icon.png"); | ||
| 169 | - background-repeat: no-repeat; | ||
| 170 | - background-position: 9px center; | ||
| 171 | - overflow: hidden; | ||
| 172 | - white-space: nowrap; | ||
| 173 | - text-overflow: ellipsis; | ||
| 174 | - cursor: pointer; | ||
| 175 | - } | ||
| 176 | - .current-active{ | ||
| 177 | - color:rgba(255,255,255,1); | ||
| 178 | - background-image:url("../assets/img/officeactive-icon.png"); | 172 | + overflow: hidden; |
| 173 | + | ||
| 174 | + .content{ | ||
| 175 | + height:100%; | ||
| 176 | + li{ | ||
| 177 | + padding-left: 26px; | ||
| 178 | + height: 20px; | ||
| 179 | + line-height: 20px; | ||
| 180 | + color:rgba(255,255,255,.7); | ||
| 181 | + background-image:url("../assets/img/office-icon.png"); | ||
| 182 | + background-repeat: no-repeat; | ||
| 183 | + background-position: 9px center; | ||
| 184 | + overflow: hidden; | ||
| 185 | + white-space: nowrap; | ||
| 186 | + text-overflow: ellipsis; | ||
| 187 | + cursor: pointer; | ||
| 188 | + } | ||
| 189 | + .current-active{ | ||
| 190 | + color:rgba(255,255,255,1); | ||
| 191 | + background-image:url("../assets/img/officeactive-icon.png"); | ||
| 192 | + } | ||
| 179 | } | 193 | } |
| 194 | + | ||
| 180 | } | 195 | } |
| 181 | </style> | 196 | </style> |