이번에는 mintui가 휴대폰에서 풀다운 새로고침 및 풀업 로딩을 수행하는 방법을 알려드리겠습니다. mintui가 휴대폰에서 풀다운 새로고침 및 풀업 로딩을 수행할 때 주의할 점은 무엇인가요? 다음은 실제 사례인데, 한 번 살펴보겠습니다.
<template> <p class="page-loadmore"> <h1 class="page-title">Pull up</h1> <p class="page-loadmore-desc">在列表底部, 按住 - 上拉 - 释放可以获取更多数据</p> <p class="page-loadmore-desc">translate : {{ translate }}</p> <p class="loading-background" :style="{ transform: 'scale3d(' + moveTranslate + ',' + moveTranslate + ',1)' }"> translateScale : {{ moveTranslate }} </p> <p 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> <p 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> </p> <p 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> </p> </mt-loadmore> </p> </p> </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>
이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!
추천 자료:
iview의 UI 프레임워크를 사용하여 플레이어 맞춤 설정
위 내용은 mint-ui는 휴대폰에서 풀다운 새로 고침 및 풀업 로딩을 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!