完整的上拉加载，下拉刷新demo
vue 2017-09-29 14:12:50

这里需要对场景有要求，如果用户并不清楚上拉是加载更多的情况下，就不如触发到底部多少距离后 直接加载下一页来得方便

 

demo一：下拉刷新默认html模板

XML/HTML Code复制内容到剪贴板
  1. <template>  
  2.     <div class="List" :style="{'-webkit-overflow-scrolling': scrollMode}">  
  3.         <h1>{{ msg }}  </h1>  
  4.         <p>接收路由参数：{{ $route.params.cid }}</p>  
  5.   
  6.         <v-loadmore :top-method="loadTop" :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" :auto-fill="false" ref="loadmore">  
  7.             <ul class="list" v-for="(val, key) in pageList">  
  8.                 <li>  
  9.                     <div>{{val.title}}</div>  
  10.                 </li>  
  11.             </ul>  
  12.         </v-loadmore>  
  13.           
  14.     </div>  
  15. </template>  
  16.   
  17. <script>  
  18.     import {Loadmore} from 'mint-ui';  
  19.     import {Indicator} from 'mint-ui'  
  20.   
  21.     export default {  
  22.         data:function() {  
  23.             return {  
  24.                 msg: '单词学习',  
  25.                 searchCondition:{  //分页属性  
  26.                     cid: this.$route.params.cid,  
  27.                     pageNo:"1",  
  28.                     pageSize:"10"  
  29.                 },  
  30.                 pageList:[],  
  31.                 allLoaded: false, //是否可以上拉属性，false可以上拉，true为禁止上拉，就是不让往上划加载数据了  
  32.                 scrollMode:"auto" //移动端弹性滚动效果，touch为弹性滚动，auto是非弹性滚动  
  33.             }  
  34.         },  
  35.         components: {  
  36.             'v-loadmore':Loadmore  // 为组件起别名，vue转换template标签时不会区分大小写，例如：loadMore这种标签转换完就会变成loadmore，容易出现一些匹配问题  
  37.             // 推荐应用组件时用a-b形式起名  
  38.         },  
  39.         mounted(){  
  40.             this.init();          //初次访问重新设置标题名  
  41.             this.loadPageList();  //初次访问查询列表  
  42.         },  
  43.         methods: {  
  44.             init:function () {  
  45.                 this.$store.commit('changePageTitle', '学习列表');  
  46.             },  
  47.             loadTop:function() { //组件提供的下拉触发方法  
  48.                 //下拉刷新  
  49.                 this.loadPageList();  
  50.                 this.$refs.loadmore.onTopLoaded();// 固定方法，查询完要调用一次，用于重新定位  
  51.             },  
  52.             loadBottom:function() {  
  53.                 // 上拉加载  
  54.                 this.more();// 上拉触发的分页查询  
  55.                 this.$refs.loadmore.onBottomLoaded();// 固定方法，查询完要调用一次，用于重新定位  
  56.             },  
  57.             loadPageList:function (){  
  58.   
  59.                 this.searchCondition.pageNo = 1;  
  60.   
  61.                 // 查询数据  
  62.                 this.$http.get('http://demo996.liqinwl.com/api/v1/article/index', {  
  63.                         params: this.searchCondition  
  64.                     }).then((response) => {  
  65.   
  66.                     // 是否还有下一页，加个方法判断，没有下一页要禁止上拉  
  67.                     this.isHaveMore(response.data._links.next);  
  68.                     this.pageList = response.data.items;  
  69.   
  70.                     this.$nextTick(function () {  
  71.                         // 原意是DOM更新循环结束时调用延迟回调函数，大意就是DOM元素在因为某些原因要进行修改就在这里写，要在修改某些数据后才能写，  
  72.                         // 这里之所以加是因为有个坑，iphone在使用-webkit-overflow-scrolling属性，就是移动端弹性滚动效果时会屏蔽loadmore的上拉加载效果，  
  73.                         // 花了好久才解决这个问题，就是用这个函数，意思就是先设置属性为auto，正常滑动，加载完数据后改成弹性滑动，安卓没有这个问题，移动端弹性滑动体验会更好  
  74.                         this.scrollMode = "touch";  
  75.                     });  
  76.                 });  
  77.             },  
  78.             more:function (){  
  79.                 // 分页查询  
  80.                 this.searchCondition.pageNo = parseInt(this.searchCondition.pageNo) + 1;  
  81.                 Indicator.open('loading...');  
  82.                 this.$http.get('http://demo996.liqinwl.com/api/v1/article/index', {  
  83.                     params: this.searchCondition  
  84.                 }).then((response) => {  
  85.                     Indicator.close();  
  86.                     this.pageList = this.pageList.concat(response.data.items);  
  87.                     this.isHaveMore(response.data._links.next);  
  88.                 });  
  89.             },  
  90.             isHaveMore:function(isHaveMore){  
  91.                 // 是否还有下一页，如果没有就禁止上拉刷新  
  92.                 this.allLoaded = true; //true是禁止上拉加载  
  93.                 if(isHaveMore){  
  94.                     this.allLoaded = false;  
  95.                 }  
  96.             }  
  97.         }  
  98.     }  
  99. </script>  

 

demo二： 下拉刷新自定义html模板：

XML/HTML Code复制内容到剪贴板
  1. <template>  
  2.     <div class="List" :style="{'-webkit-overflow-scrolling': scrollMode}">  
  3.         <h1>{{ msg }}  </h1>  
  4.         <p>接收路由参数：{{ $route.params.cid }}</p>  
  5.   
  6.         <v-loadmore :top-method="loadTop" :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" :auto-fill="false" ref="loadmore" @top-status-change="handleTopChange" :top-distance=50>  
  7.   
  8.             <!--  
  9.             自定义下拉刷新html模板 标签设置 slot 属性为 top，类名为 mint-loadmore-top  
  10.             pull：组件已经被按下，但按下的距离未达到 topDistance，此时释放不会触发 top-method，列表会回到初始位置  
  11.             drop：按下的距离不小于 topDistance，此时释放会触发 top-method  
  12.             loading：组件已被释放，top-method 正在执行 每当组件的状态发生变化时，loadmore 都会触发 top-status-change 所绑定的方法名称,如handleTopChange  
  13.              -->  
  14.             <div slot="top" class="mint-loadmore-top">  
  15.                 <span v-show="topStatus === 'pull'" :class="{ 'rotate': topStatus === 'drop' }">↓</span>  
  16.                 <span v-show="topStatus === 'loading'">Loading...</span>  
  17.                 <span v-show="topStatus === 'drop'">刷新成功</span>  
  18.             </div>  
  19.   
  20.   
  21.             <ul class="list" v-for="(val, key) in pageList">  
  22.                 <li>  
  23.                     <div>{{val.title}}</div>  
  24.                 </li>  
  25.             </ul>  
  26.         </v-loadmore>  
  27.   
  28.     </div>  
  29. </template>  
  30.   
  31. <script>  
  32.     import {Loadmore} from 'mint-ui';  
  33.     import {Indicator} from 'mint-ui'  
  34.   
  35.     export default {  
  36.         data:function() {  
  37.             return {  
  38.                 msg: '单词学习',  
  39.                 searchCondition:{  //分页属性  
  40.                     cid: this.$route.params.cid,  
  41.                     pageNo:"1",  
  42.                     pageSize:"10"  
  43.                 },  
  44.                 pageList:[],  
  45.                 allLoaded: false, //是否可以上拉属性，false可以上拉，true为禁止上拉，就是不让往上划加载数据了  
  46.                 scrollMode:"auto", //移动端弹性滚动效果，touch为弹性滚动，auto是非弹性滚动  
  47.                 topStatus: ''  
  48.             }  
  49.         },  
  50.         components: {  
  51.             'v-loadmore':Loadmore  // 为组件起别名，vue转换template标签时不会区分大小写，例如：loadMore这种标签转换完就会变成loadmore，容易出现一些匹配问题  
  52.             // 推荐应用组件时用a-b形式起名  
  53.         },  
  54.         mounted(){  
  55.             this.init();          //初次访问重新设置标题名  
  56.             this.loadPageList();  //初次访问查询列表  
  57.         },  
  58.         methods: {  
  59.             init () {  
  60.                 this.$store.commit('changePageTitle', '学习列表');  
  61.             },  
  62.             loadTop() { //组件提供的下拉触发方法  
  63.                 //下拉刷新  
  64.                 this.loadPageList();  
  65.                 this.$refs.loadmore.onTopLoaded();// 固定方法，查询完要调用一次，用于重新定位  
  66.             },  
  67.             loadBottom() {  
  68.                 // 上拉加载  
  69.                 this.more();// 上拉触发的分页查询  
  70.                 this.$refs.loadmore.onBottomLoaded();// 固定方法，查询完要调用一次，用于重新定位  
  71.             },  
  72.             loadPageList (){  
  73.   
  74.                 this.searchCondition.pageNo = 1;  
  75.   
  76.                 // 查询数据  
  77.                 this.$http.get('http://demo996.liqinwl.com/api/v1/article/index', {  
  78.                         params: this.searchCondition  
  79.                     }).then((response) => {  
  80.   
  81.                     // 是否还有下一页，加个方法判断，没有下一页要禁止上拉  
  82.                     this.isHaveMore(response.data._links.next);  
  83.                     this.pageList = response.data.items;  
  84.   
  85.                     this.$nextTick(function () {  
  86.                         // 原意是DOM更新循环结束时调用延迟回调函数，大意就是DOM元素在因为某些原因要进行修改就在这里写，要在修改某些数据后才能写，  
  87.                         // 这里之所以加是因为有个坑，iphone在使用-webkit-overflow-scrolling属性，就是移动端弹性滚动效果时会屏蔽loadmore的上拉加载效果，  
  88.                         // 花了好久才解决这个问题，就是用这个函数，意思就是先设置属性为auto，正常滑动，加载完数据后改成弹性滑动，安卓没有这个问题，移动端弹性滑动体验会更好  
  89.                         this.scrollMode = "touch";  
  90.                     });  
  91.                 });  
  92.             },  
  93.             more (){  
  94.                 // 分页查询  
  95.                 this.searchCondition.pageNo = parseInt(this.searchCondition.pageNo) + 1;  
  96.                 Indicator.open('loading...');  
  97.                 this.$http.get('http://demo996.liqinwl.com/api/v1/article/index', {  
  98.                     params: this.searchCondition  
  99.                 }).then((response) => {  
  100.                     Indicator.close();  
  101.                     this.pageList = this.pageList.concat(response.data.items);  
  102.                     this.isHaveMore(response.data._links.next);  
  103.                 });  
  104.             },  
  105.             isHaveMore(isHaveMore){  
  106.                 // 是否还有下一页，如果没有就禁止上拉刷新  
  107.                 this.allLoaded = true; //true是禁止上拉加载  
  108.                 if(isHaveMore){  
  109.                     this.allLoaded = false;  
  110.                 }  
  111.             },  
  112.             handleTopChange(status) {  
  113.                 this.topStatus = status;  
  114.             },  
  115.         }  
  116.     }  
  117.   
  118. </script>  

 

 

 

 

本文来自于：http://www.yoyo88.cn/study/vue/161.html

上一篇 vue文档 —— Class 与 Style 绑定
下一篇 Loadmore —— 下拉/上拉刷新，支持自定义 HTML 模板
相关的文章
Powered by yoyo苏ICP备15045725号