结合mint-ui移动端下拉加载实践总结
2017-08-10 18:19
645 查看
在使用vue做一个h5项目的时候,需要上拉分页加载,所以在实践中总结了一下使用方法:
1.npm i mint-ui -S 2.main.js中引入import 'mint-ui/lib/style.css' 3.以下是代码结构部分: <template> <div class="main-body" :style="{'-webkit-overflow-scrolling': scrollMode}"> <v-loadmore :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" :auto-fill="false" ref="loadmore"> <ul class="list"> <li v-for="(item, index) in proCopyright"> <div>{{item.FZD_ZPMC}}</div> </li> </ul> </v-loadmore> </div> </template> <script> import {Loadmore} from 'mint-ui'; export default { components:{ 'v-loadmore':Loadmore, }, data () { return { pageNo:1, pageSize:50, proCopyright:[], allLoaded: false, //是否可以上拉属性,false可以上拉,true为禁止上拉,就是不让往上划加载数据了 scrollMode:"auto", //移动端弹性滚动效果,touch为弹性滚动,auto是非弹性滚动 totalpage:0, loading:false, bottomText: '', } }, mounted(){ this.loadPageList(); //初次访问查询列表 }, methods:{ loadBottom:function() { // 上拉加载 this.more();// 上拉触发的分页查询 this.$refs.loadmore.onBottomLoaded();// 固定方法,查询完要调用一次,用于重新定位 }, loadPageList:function (){ // 查询数据 this.axios.get('/copyright?key='+ encodeURIComponent('公司名称')+"&mask=001"+"&page="+this.pageNo+"&size="+this.pageSize).then(res =>{ console.log(res); this.proCopyright = res.data.result.PRODUCTCOPYRIGHT; this.totalpage = Math.ceil(res.data.result.COUNTOFPRODUCTCOPYRIGHT/this.pageSize); if(this.totalpage == 1){ this.allLoaded = true; } this.$nextTick(function () { // 是否还有下一页,加个方法判断,没有下一页要禁止上拉 this.scrollMode = "touch"; this.isHaveMore(); }); }); }, more:function (){ // 分页查询 if(this.totalpage == 1){ this.pageNo = 1; this.allLoaded = true; }else{ this.pageNo = parseInt(this.pageNo) + 1; this.allLoaded = false; } console.log(this.pageNo); this.axios.get('/copyright?key='+ encodeURIComponent('公司名称')+"&mask=001"+"&page="+this.pageNo+"&size="+this.pageSize).then(res=>{ this.proCopyright = this.proCopyright.concat(res.data.result.PRODUCTCOPYRIGHT); console.log(this.proCopyright); this.isHaveMore(); }); }, isHaveMore:function(){ // 是否还有下一页,如果没有就禁止上拉刷新 //this.allLoaded = false; //true是禁止上拉加载 if(this.pageNo == this.totalpage){ this.allLoaded = true; } } }, } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> li{ padding:30px 0; background-color: #ccc; margin-bottom:20px; } </style>
相关文章推荐
- 结合mint-ui移动端下拉加载实践方法总结
- vue mintui-Loadmore结合实现下拉刷新和上拉加载示例
- 基于 Vue.js 的移动端组件库mint-ui实现无限滚动加载更多
- Vue.js 的移动端组件库mint-ui实现无限滚动加载更多的方法
- 基于vue2.0版本的手机端mint-ui 的Loadmore上拉刷新下拉加载的方法,对于初学者来说很有帮助,开始写走了很多弯路,网上找到这个方法,简单实用,不多说看代码……
- iscroll 移动端上拉刷新 下拉加载 实例 !
- angularjs1结合ui-router、ocLazyLoad分步按需加载js文件
- android UI进阶之实现listview的下拉加载
- vue项目中使用mint-ui的上拉加载更多时,ios遇到留白情况
- 关于移动端上拉加载下拉刷新我的的理解和做法
- WriteOS: 操作系统从软盘引导分区(Boot Sector)到加载Loader过程原理与实践总结
- ExtJS 4 组件化编程,动态加载,面向对象,Direct结合成功,目前为止我的最佳实践
- 移动端网页 下拉加载更多数据
- 《程序员》:携程移动端 UI 界面性能优化实践
- code -结合实例总结代码下拉流程
- 如何做滚动加载?移动端下拉加载新的页面
- Appium移动端UI自动化中,如果需要两个APP交互操作的实践经验
- android UI进阶之实现listview的下拉加载
- android UI进阶之实现listview的下拉加载
- 结合自己造的轮子实践按需加载