vue 모 바 일 UI 프레임 워 크 슬라이딩 으로 데 이 터 를 불 러 오 는 방법
우리 이동 단 에 자주 사용 되 는 구성 요소 가 하나 더 있 습 니 다.그것 은 슬라이딩 으로 더 많은 구성 요 소 를 불 러 오 는 것 입 니 다.평소에 우리 가 본 많은 플러그 인 들 이 상당히 복잡 하 게 이 구성 요 소 를 실현 하 는 것 이 매우 어렵다 고 생각 합 니 다.사실은 그렇지 않 습 니 다!!이 구성 요 소 는 사실 아주 간단하게 실현 할 수 있 고 체험 도 아주 좋 습 니 다(물론 우 리 는 드 롭 다운 리 셋 기능 을 실현 하지 못 했 습 니 다)!다음은 우리 함께 이 구성 요 소 를 실현 합 시다.
효과 전시
먼저 이전 gif 그림 에서 우리 가 만 든 효 과 를 보 여 줍 니 다.다음 과 같 습 니 다.
DOM 구조
페이지 에는 세 가지 부분 이 포함 되 어 있어 야 합 니 다.1.본문 구역 2.작은 국화 불 러 오기 및 기록 문자 3.모든 데이터 불 러 오기 완료 후 텍스트:
<div ref="scroll" class="r-scroll">
<div class="r-scroll-wrap">
<slot></slot>
</div>
<slot name="loading">
<div v-show="isLoading" class="r-scroll-loading">
<r-loading></r-loading>
<span class="r-scroll-loading-text">{{loadingText}}</span>
</div>
</slot>
<slot name="complate">
<div v-show="isComplate" class="r-scroll-loading">{{complateText}}</div>
</slot>
</div>
css 스타일전체 구성 요소 의 용기 r-scroll 은 고정 너비 이 고 부분 을 초과 하면 굴 릴 수 있 습 니 다.본문 구역 은 내용 에 따라 고도 로 자동 으로 증가 해 야 한다.작은 국 화 를 불 러 올 때 스크롤 거리의 기본 값 을 표시 합 니 다.모든 데이터 로드 완료 후 데이터 로드 완료 텍스트 보이 기:
<style lang="scss">
@mixin one-screen {
position: absolute;
left:0;
top:0;
width:100%;
height:100%;
overflow: hidden;
}
@mixin overflow-scroll {
overflow: scroll;
-webkit-overflow-scrolling: touch;
}
.r-scroll{
@include one-screen;
@include overflow-scroll;
&-loading{
text-align: center;
padding-top: 3vw;
padding-bottom: 3vw;
font-size: 14px;
color: #656565;
line-height: 20px;
&-text{
display: inline-block;
vertical-align: middle;
}
}
}
</style>
javascript대화 식 논리 분석:
<script>
import rLoading from '../loading'
export default{
components: {rLoading},
props: {
// , loadmore
bottomDistance: {
type: [Number, String],
default: 70
},
//
loadingText: {
type: String,
default: ' ...'
},
//
complateText: {
type: String,
default: '-- --'
}
},
data () {
return {
//
isComplate: false,
//
isLoading: false,
//
scroll: null,
//
scrollWrap: null
}
},
watch: {
// isLoading, isLoading true loadmore
isLoading (val) {
if (val) {
this.$emit('loadmore')
}
}
},
methods: {
// , 、 ,
init () {
this.scroll = this.$refs.scroll
this.scrollWrap = this.scroll.childNodes[0]
this.scroll.addEventListener('scroll', this.scrollEvent)
this.$emit('init', this.scroll)
},
scrollEvent (e) {
// , loadmore
if (this.isComplate) return
let scrollTop = this.scroll.scrollTop
let scrollH = this.scroll.offsetHeight
let scrollWrapH = this.scrollWrap.offsetHeight
// + - loadmore
if (scrollTop + scrollH >= scrollWrapH - this.bottomDistance) {
this.isLoading = true
}
},
//
loaded () {
this.isLoading = false
},
//
compleate () {
this.isLoading = false
this.isComplate = true
this.scroll.removeEventListener('scroll', this.scrollEvent)
}
},
mounted () {
this.$nextTick(this.init)
}
}
</script>
또한 이 구성 요 소 는 loading 작은 국화 구성 요 소 를 참조 하여 작은 국화 구성 요소 코드 를 부록 합 니 다.코드 가 간단 하기 때문에 상세 하 게 해석 하지 않 습 니 다.국 화 는 gif 그림 을 사용 합 니 다.좋아 하 는 국화 gif 를 찍 어서 이 국화 구성 요소 의 경로 에 놓 으 십시오.
<template>
<div class="r-loading-container">
<img src="./loading.gif">
</div>
</template>
<script>
export default {}
</script>
<style lang="scss">
.r-loading-container{
display: inline-block;
vertical-align: middle;
img{
width: 20px;
height: 20px;
display: block;
}
}
</style>
마지막 에 쓰다마지막 으로 여기에 사용 예 를 하나 첨부 합 시다.
<template>
<div class="index">
<r-scroll ref="scroll" @loadmore="queryDate">
<div class="item" v-for="(item, index) in list">{{item}}</div>
</r-scroll>
</div>
</template>
<script>
import rScroll from '../../components/scroll'
function timeout (ms) {
return new Promise((resolve, reject) => {
setTimeout(resolve, ms, 'done')
})
}
export default{
components: {rScroll},
data () {
return {
i: 0,
list: []
}
},
methods: {
async queryDate () {
await timeout(1000)
let i = this.i
let data = []
for (let j = 0; j < 40; j++) {
data.push(i + j)
this.i = this.i + 1
}
this.list = this.list.concat(data)
// loaded , compleate
this.$refs.scroll.loaded()
}
},
mounted () {
this.queryDate()
}
}
</script>
<style lang="scss">
.item{
background-color: #f2f2f2;
border-bottom: 1px solid #fff;
height: 40px;
line-height: 40px;
text-align: center;
}
</style>
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Fastapi websocket 및 vue 3(Composition API)1부: FastAPI virtualenv 만들기(선택 사항) FastAPI 및 필요한 모든 것을 다음과 같이 설치하십시오. 생성main.py 파일 및 실행 - 브라우저에서 이 링크 열기http://127.0.0.1:...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.