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 实现下拉刷新, 上拉更多功能, 希望对大家有所帮助, 如果大家有任何疑问请给我留言, 小编会及时回复大家的在此也非常感谢大家对脚本之家网站的支持!
来源: http://www.jb51.net/article/136801.htm