阅读:10565回复:1
vue-cli中vue-scroller的详细用法,上拉加载下拉刷新,vue-axios获取数据的详细过程vue目前是众所周知的流行框架大家都知道的,vue全家桶的成员是:vue-cli,vuex,vue-router,vue-axios(vue2.0)。然后它的第三方插件也有很多,比如:vue-scroller,vue-lazyload,vue-awesome-swiper等等的。 之前我已经给大家介绍过vue-lazyload的用法了,今天就给大家说一下vue-scroller的用法吧。 首先在命令行进行npm||cnpm||bower下载 npm install vue-scroller -D :::!!! -D:就是 --save -dev 然后在你想要用scrolle的那个页面里将咱们刚才下载的东西引入 import Vue from 'vue' import VueScroller from 'vue-scroller' Vue.use(VueScroller) 这个插件主要是标签<scroller>,谁需要进行上拉加载下拉刷新就给谁加。然后里面有:on-refresh="refresh"&&:on-infinite="infinite" || ref="domName" :::!!! ref是获取dom元素的。 this.$refs.myscroller.resize()//重置大小=>myscroller是上面ref定义的dom元素的名字 this.$refs.myscroller.finishInfinite(2);//没有数据时的处理函数 然后在methods对象里加入两个函数:infinite()&&refresh() infinite(done) { if(this.noData) { setTimeout(()=>{ this.$refs.myscroller.finishInfinite(2); }) return; } let self = this;//this指向问题 let start = this.moveList.length; setTimeout(() => { for(let i = start + 1; i < start + 10; i++) { self.moveList.push(i) } if(start > 30) { self.noData = "没有更多数据" } self.$refs.myscroller.resize(); done() }, 1500) } //done()表示这次异步加载数据完成,加载下一次 //因为这个是同步的,加了setTimeout就是异步加载数据; //因为涉及到this指向问题,所以将他放在一个变量里。 refresh() { console.log('refresh') } 整体页面分布.png index.vue//因为我在这个组件里需要scroller <template> <div class="index-wrapper"> <scroller :on-infinite="infinite" ref="myscroller"> <div class="index-header"> <div class="positionbar"> <div class="position-box"> <i class="icon iconfont icon-dingwei"></i> <span class="text"> 东城区北京市政府 </span> </div> <div class="weather-box"> <div class="du"> <h2>28℃</h2> <p>多云天</p> </div> <img class="could" src="//fuss10.elemecdn.com/2/52/5383cfd55c8ba454449f63f54ce2apng.png?imageMogr/format/webp/thumbnail/!69x69r/gravity/Center/crop/69x69/" alt=""> </div> </div> <div class="search-box"> 搜索商家、商品 </div> <div class="swiper-box"> <div class="swiper-container" id="line-slide"> <div class="swiper-wrapper"> <div class="swiper-slide" style="width:auto">煎饼</div> <div class="swiper-slide" style="width:auto">虾饭先生</div> <div class="swiper-slide" style="width:auto">蛋挞 </div> <div class="swiper-slide" style="width:auto">立秋进补</div> <div class="swiper-slide" style="width:auto">我的屏 </div> <div class="swiper-slide" style="width:auto">鲜榨果汁</div> <div class="swiper-slide" style="width:auto">石锅拌饭</div> <div class="swiper-slide" style="width:auto">黄焖鸡</div> <div class="swiper-slide" style="width:auto">虾</div> </div> <!-- 如果需要滚动条 --> <div class="swiper-scrollbar"></div> </div> </div> </div> <div class="slide-box"> <div class="swiper-container" id="button-menu"> <div class="swiper-wrapper"> <div class="swiper-slide"> <ul class="btn-group"> <li> <a href="javascript:;"> <img src="//fuss10.elemecdn.com/b/7e/d1890cf73ae6f2adb97caa39de7fcjpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/" alt=""> <span>美食</span> </a> </li> <li> <a href="javascript:;"> <img src="//fuss10.elemecdn.com/2/35/696aa5cf9820adada9b11a3d14bf5jpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/" alt=""> <span>甜品饮品</span> </a> </li> <li> <a href="javascript:;"> <img src="//fuss10.elemecdn.com/0/da/f42235e6929a5cb0e7013115ce78djpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/" alt=""> <span>商超便利</span> </a> </li> <li> <a href="javascript:;"> <img src="//fuss10.elemecdn.com/d/49/7757ff22e8ab28e7dfa5f7e2c2692jpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/" alt=""> <span>预定早餐</span> </a> </li> <li> <a href="javascript:;"> <img src="//fuss10.elemecdn.com/c/db/d20d49e5029281b9b73db1c5ec6f9jpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/" alt=""> <span>果蔬生鲜</span> </a> </li> <li> <a href="javascript:;"> <img src="//fuss10.elemecdn.com/a/fa/d41b04d520d445dc5de42dae9a384jpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/" alt=""> <span>新店特惠</span> </a> </li> <li> <a href="javascript:;"> <img src="//fuss10.elemecdn.com/3/84/8e031bf7b3c036b4ec19edff16e46jpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/" alt=""> <span>准时达</span> </a> </li> <li> <a href="javascript:;"> <img src="//fuss10.elemecdn.com/d/38/7bddb07503aea4b711236348e2632jpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/" alt=""> <span>午餐</span> </a> </li> </ul> </div> <div class="swiper-slide"> <ul class="btn-group"> <li> <a href="javascript:;"> <img src="//fuss10.elemecdn.com/b/7f/432619fb21a40b05cd25d11eca02djpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/" alt=""> <span>汉堡薯条</span> </a> </li> <li> <a href="javascript:;"> <img src="//fuss10.elemecdn.com/2/17/244241b514affc0f12f4168cf6628jpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/" alt=""> <span>包子粥店</span> </a> </li> <li> <a href="javascript:;"> <img src="//fuss10.elemecdn.com/8/83/171fd98b85dee3b3f4243b7459b48jpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/" alt=""> <span>鲜花蛋糕</span> </a> </li> <li> <a href="javascript:;"> <img src="//fuss10.elemecdn.com/3/c7/a9ef469a12e7a596b559145b87f09jpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/" alt=""> <span>麻辣烫</span> </a> </li> <li> <a href="javascript:;"> <img src="//fuss10.elemecdn.com/a/8a/ec21096d528b7cfd23cdd894f01c6jpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/" alt=""> <span>地方菜系</span> </a> </li> <li> <a href="javascript:;"> <img src="//fuss10.elemecdn.com/7/b6/235761e50d391445f021922b71789jpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/" alt=""> <span>披萨意面</span> </a> </li> <li> <a href="javascript:;"> <img src="//fuss10.elemecdn.com/6/d2/de0683a49a0655c728b70fdb344d5jpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/" alt=""> <span>异国料理</span> </a> </li> </ul> </div> </div> <!-- 如果需要分页器 --> <div class="swiper-pagination"></div> </div> </div> <div class="shop-box"> <ul> <li v-for="m in movieList"> <h4>pw_m</h4> </li> </ul> </div> </scroller> <footerbar></footerbar> </div> </template> <script> import Vue from 'vue' import VueScroller from 'vue-scroller' import footerbar from '@/components/footerbar' import VueAwesomeSwiper from 'vue-awesome-swiper' Vue.use(VueScroller); export default { data() { return { noData: '', moveList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20] } }, components: { footerbar }, mounted() { var mySwiper = new Swiper('#line-slide', { slidesPerView: 6, scrollbar: '.swiper-scrollbar', slidesPerView: 'auto' }) var menuSwiper = new Swiper('#button-menu', { direction: 'horizontal', loop: true, // 如果需要分页器 pagination: '.swiper-pagination', // 如果需要前进后退按钮 nextButton: '.swiper-button-next', prevButton: '.swiper-button-prev', }) }, methods: { infinite(done) { console.log(this.noData) if(this.noData) { setTimeout(()=>{ this.$refs.myscroller.finishInfinite(2); }) return; } let self = this; let start = this.moveList.length; setTimeout(() => { for(let i = start + 1; i < start + 10; i++) { self.moveList.push(i) } if(start > 30) { self.noData = "没有更多数据" } self.$refs.myscroller.resize(); done() }, 1500) }, refresh() { console.log('refresh') } } } </script> <style lang="less"> @import '../../static/less/var.less'; .index-wrapper { position: absolute; top: 0; left: 0; width: 100%; bottom: @base*100rem; background: #F5F5F5; .index-header { background: @mc; height: @base*204rem; padding: @base*20rem @base*28rem; } .positionbar { height: @base*69rem; display: flex; justify-content: space-between; color: #fff; .position-box { line-height: @base*69rem; width: @base*417rem; } .weather-box { width: @base*136rem; display: flex; .du { /*border:1px solid;*/ width: @base*90rem; height: @base*69rem; h2 { font-size: @base*18rem; margin: 0; } p { margin: 0; padding: 0; font-size: @base*14rem; } } .could { display: block; width: @base*50rem; height: @base*70rem; } } } .search-box { height: @base*70rem; margin: @base*15rem; padding: @base*1rem; color: @fc1; text-align: center; background: #fff; border-radius: 20px; line-height: @base*70rem; font-size: @base*20rem; } #line-slide { overflow: hidden; color: #fff; .swiper-slide { margin-right: @base*20rem; font-size: @base*20rem; text-align: center; a { color: #fff; } } } } .slide-box { background: #fff; height: @base*354rem; .swiper-slide { height: @base*354rem; } .swiper-pagination-bullet-active { background: #000; opacity: 0.6; } ul { padding: @base*10rem 0; display: flex; flex-wrap: wrap; li { padding: @base*10rem 0; width: 25%; text-align: center; a { display: inline-block; text-align: center; width: 100%; height: 100%; color: #666; text-decoration: none; img { display: block; margin-left: 25%; width: 50%; height: 50%; } span { font-size: @base*16rem; } } } } } </style> |
|
沙发#
发布于:2018-12-02 20:28
|
|