vue2 mint-ui loadmore实现下拉刷新,上拉更多功能
程序员文章站
2022-04-15 20:07:18
mintui是饿了么团队针对vue开发的移动端组件库,方便实现移动端的一些功能,这里主要给大家介绍vue2 mint-ui loadmore实现下拉刷新,上拉更多功能,具体...
mintui是饿了么团队针对vue开发的移动端组件库,方便实现移动端的一些功能,这里主要给大家介绍vue2 mint-ui loadmore实现下拉刷新,上拉更多功能,具体代码如下所示:
<template> <div class="page-loadmore"> <h1 class="page-title">pull up</h1> <p class="page-loadmore-desc">在列表底部, 按住 - 上拉 - 释放可以获取更多数据</p> <p class="page-loadmore-desc">translate : {{ translate }}</p> <div class="loading-background" :style="{ transform: 'scale3d(' + movetranslate + ',' + movetranslate + ',1)' }"> translatescale : {{ movetranslate }} </div> <div class="page-loadmore-wrapper" ref="wrapper" :style="{ height: wrapperheight + 'px' }"> <mt-loadmore :top-method="loadtop" @translate-change="translatechange" @top-status-change="handletopchange" :bottom-method="loadbottom" @bottom-status-change="handlebottomchange" :bottom-all-loaded="allloaded" ref="loadmore"> <ul class="page-loadmore-list"> <li v-for="item in list" class="page-loadmore-listitem">{{ item }}</li> </ul> <div slot="top" class="mint-loadmore-top"> <span v-show="topstatus !== 'loading'" :class="{ 'is-rotate': topstatus === 'drop' }">↓</span> <span v-show="topstatus === 'loading'"> <mt-spinner type="snake"></mt-spinner> </span> </div> <div slot="bottom" class="mint-loadmore-bottom"> <span v-show="bottomstatus !== 'loading'" :class="{ 'is-rotate': bottomstatus === 'drop' }">↑</span> <span v-show="bottomstatus === 'loading'"> <mt-spinner type="snake"></mt-spinner> </span> </div> </mt-loadmore> </div> </div> </template> <style> .loading-background, .mint-loadmore-top span { -webkit-transition: .2s linear; transition: .2s linear } .mint-loadmore-top span { display: inline-block; vertical-align: middle } .mint-loadmore-top span.is-rotate { -webkit-transform: rotate(180deg); transform: rotate(180deg) } .page-loadmore .mint-spinner { display: inline-block; vertical-align: middle } .page-loadmore-desc { text-align: center; color: #666; padding-bottom: 5px } .page-loadmore-desc:last-of-type, .page-loadmore-listitem { border-bottom: 1px solid #eee } .page-loadmore-listitem { height: 50px; line-height: 50px; text-align: center } .page-loadmore-listitem:first-child { border-top: 1px solid #eee } .page-loadmore-wrapper { overflow: scroll } .mint-loadmore-bottom span { display: inline-block; -webkit-transition: .2s linear; transition: .2s linear; vertical-align: middle } .mint-loadmore-bottom span.is-rotate { -webkit-transform: rotate(180deg); transform: rotate(180deg) } </style> <script type="text/babel"> export default { data() { return { list: [], allloaded: false, bottomstatus: '', wrapperheight: 0, topstatus: '', //wrapperheight: 0, translate: 0, movetranslate: 0 }; }, methods: { handlebottomchange(status) { this.bottomstatus = status; }, loadbottom() { settimeout(() => { let lastvalue = this.list[this.list.length - 1]; if (lastvalue < 40) { for (let i = 1; i <= 10; i++) { this.list.push(lastvalue + i); } } else { this.allloaded = true; } this.$refs.loadmore.onbottomloaded(); }, 1500); }, handletopchange(status) { this.movetranslate = 1; this.topstatus = status; }, translatechange(translate) { const translatenum = +translate; this.translate = translatenum.tofixed(2); this.movetranslate = (1 + translatenum / 70).tofixed(2); }, loadtop() { settimeout(() => { let firstvalue = this.list[0]; for (let i = 1; i <= 10; i++) { this.list.unshift(firstvalue - i); } this.$refs.loadmore.ontoploaded(); }, 1500); }, }, created() { for (let i = 1; i <= 20; i++) { this.list.push(i); } }, mounted() { this.wrapperheight = document.documentelement.clientheight - this.$refs.wrapper.getboundingclientrect().top; } }; </script>
总结
以上所述是小编给大家介绍的vue2 mint-ui loadmore实现下拉刷新,上拉更多功能,希望对大家有所帮助
上一篇: 对于元素为字典的列表排序方法
下一篇: jwt-simple过期时间不对问题
推荐阅读
-
H5基于iScroll实现下拉刷新和上拉加载更多
-
IScroll5实现下拉刷新上拉加载的功能实例
-
微信小程序实现页面下拉刷新和上拉加载功能详解
-
vue实现网络图片瀑布流 + 下拉刷新 + 上拉加载更多
-
解决Vue使用mint-ui loadmore实现上拉加载与下拉刷新出现一个页面使用多个上拉加载后冲突问题
-
Android通过XListView实现上拉加载下拉刷新功能
-
VUE2配合mint-ui实现自定义loadmore(下拉刷新,上拉更多)教程
-
vue2 mint-ui loadmore实现下拉刷新,上拉更多功能
-
angularjs实现上拉加载和下拉刷新数据功能
-
SwipeRefreshLayout+RecyclerView实现上拉刷新和下拉刷新功能