vue.js 구성 요소 vue-waterfall-easy 폭포 흐름 효과 구현

jquery 의 DOM 작업 에 익숙 해 졌 을 것 입 니 다.jquery 의 폭포 흐름 도 쉽게 이 루어 질 것 입 니 다.
하지만 시대 가 발전 하면 서 시대 가 발전 하면 서...
됐어,됐어.여기까지 찾 아 온 이상 vue.js 에 어느 정도 기반 이 있 을 거 야.우 리 는 쓸데없는 말 을 하지 않 고 바로 주제 에 들 어 갈 거 야.
vue-waterfall-easy
easy! easy! easy! 중요 한 얘 기 세 번!!!
그 러 니까 오늘 우리 가 사용 하 는 것 은 여러분 이 잘 아 는 vue-waterfall 이 아니 라 vue-waterfall-easy 입 니 다.
vue-waterfall-easy 구성 요소 가 져 오기
여기에 두 가지 방식 이 있다.
첫 번 째 는 git 에서 vue-waterfall-easy 구성 요소 의 전체 코드 를 직접 복사 하여 자신의 로 컬 프로젝트 에 붙 여 넣 는 구성 요소(원본 링크:vue-waterfall-easy)입 니 다.링크 를 열 고 src/components/vue-waterfall-easy.vue 에 들 어가 모든 코드 를 직접 복사 하면 됩 니 다.
두 번 째 는 npm 를 통 해 전역 설 치 를 하고 프로젝트 디 렉 터 리 에서 명령 행 으로 실행 합 니 다:npm install vue-waterfall-easy--save-dev
실행 성공 후,nodemodules 디 렉 터 리 에 vue-waterfall-easy 디 렉 터 리 가 나타 납 니 다.

2.부분 참조 vue-waterfall-easy 구성 요소
로 컬 구성 요소 로 직접 복사 한 구성 요소 원본 코드 라면 일반 구성 요소 와 같이 직접 도입 하면 됩 니 다.

import vueWaterfallEasy from '    /   .vue'

 npm 를 통 해 설 치 된 구성 요소 라면 더욱 간단 합 니 다.

import vueWaterfallEasy from 'vue-waterfall-easy'

바로 이렇게 하면 node 로 호출 할 수 있 습 니 다.modules 디 렉 터 리 에 포 장 된 vue-waterfall-easy 구성 요소 입 니 다.
물론 구성 요 소 를 도입 한 후 현재 구성 요소 에 이 구성 요 소 를 등록 하 는 것 을 잊 지 마 세 요.

export default {
 components: {
 vueWaterfallEasy
 } 
}

3.필요 한 변수 와 방법 을 정의 합 니 다.

data () {
 return {
 imgsArr: [], //            （             ）
 fetchImgsArr: [] //                   
 }
 },
　　methods: {
　　　initImgsArr (n, m) { //          ，         
　　　　var arr = []
　　　　for (var i = n; i < m; i++) {
　　　　　　arr.push({ src: `static/img/${i + 1}.jpg`, link: '', info: '        ' }) //src         、link         、

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　//info           ，            
　　　　}
　　　　return arr
　　　},

　　　fetchImgsData () { //           ，             
　　　　this.imgsArr = this.imgsArr.concat(this.fetchImgsArr) //    ，                    
　　　}
　　},
　　created () {
　　　　this.imgsArr = this.initImgsArr(0, 10) //      （        ）        
　　　　this.fetchImgsArr = this.initImgsArr(10, 20) //                    
　　}

4.모드 에서 구성 요 소 를 호출 합 니 다.

<vue-waterfall-easy :imgsArr="imgsArr" @scrollLoadImg="fetchImgsData"></vue-waterfall-easy>

틀림없이 모두 가 이해 할 수 있 을 것 이다.여 기 는 더 이상 군말 하지 않 겠 다.무한 으로 불 러 오 는 폭포 흐름 사진 전시 만 필요 하 다 면 이 정도 면 수 요 를 만족 시 킬 수 있 을 것 이다.물론 제 가 보 낸 소스 링크 의 소스 코드 를 본 파트너 는 소스 코드 의 App.vue 모드 에서 이렇게 인용 한 것 을 발견 할 수 있 습 니 다.

<template lang="pug"> //           
#app
 h1.title vue-waterfall-easy demo
 vue-waterfall-easy(:imgsArr="imgsArr",@scrollLoadImg="fetchImgsData")
 template( scope="props")
 p.some-info  {{props.index+1}}   
 p.some-info {{props.value.info}}
 </template>
</template>

알 고 있 는 친구 들 은 pug(즉,유명한 jade,나중에 상표 의 이유 로 pug 로 이름 을 바 꾼)의 문법 을 알 수 있 을 것 입 니 다.왜 이렇게 쓰 는 지 에 대해 서 는 vue-waterfall-easy.vue 소스 코드 의 81~90 줄 과 github 에서(위 에서 내 가 준 링크 는)문서 의 매개 변수 설명 을 참조 할 수 있 습 니 다.

a.img-box(
 v-for="(v,i) in imgsArrC",
 :href="v.link",
 :style="{padding:gap/2+'px',width: isMobile ? '' : colWidth+'px'}"
 )
 .img-inner-box
 div.img-wraper(:style="{width:imgWidthC+'px',height:v.height?v.height+'px':''}")
 img(:src="v.src")
 .img-info
 slot(:index="i",:value="v")

주:pug 오 류 를 보고 한 파트너 는 자체 바 이 두 에서 pug 의존 라 이브 러 리 를 다운로드 하 십시오.
매개 변수 설명

5.운영 항목
위의 절차 에 문제 가 없 었 다 면 축하합니다.당신 은 이미 자신의 폭 포 를 볼 수 있 었 습 니 다.물론 문서 에서 볼 수 있 습 니 다.다른 설정 도 할 수 있 습 니 다.
구성 요소 매개 변수

props: {
 gap: { //     
 type: Number,
 default: 20
 },
 maxCols: { //      
 type: Number,
 default: 5
 },
 imgsArr: { //          ，  ：[{src:'1.jpg','link':'url1' info:'       '},{src:'2.jpg','link':'url2',info:'       '}...]
 type: Array,
 required: true
 },
 imgWidth: { //          
 type: Number,
 default: 240
 },
 timeOut: { //        500          ，      
 type: Number,
 default: 500
 }
}

필요 에 따라 자체 적 으로 배치 하면 됩 니 다.
OK,여기 서 우 리 는 문서 에 따라 우리 자신의 폭포 흐름 구성 요 소 를 성공 적 으로 구축 했다.물론 실제 프로젝트 에서 우리 의 수 요 는 이 뿐만 이 아 닐 수도 있 습 니 다.우 리 는 스스로 보완 해 야 합 니 다.여기 서 저 는 더 이상 말 하지 않 겠 습 니 다.이상 의 설명 을 통 해 여러분 들 은 vue-waterfall-easy 의 방식 에 대해 알 고 프로젝트 의 수 요 를 어떻게 만족 시 키 는 지 스스로 해결 할 수 있 을 것 이 라 고 믿 습 니 다.만약 에 모 르 거나 수 요 를 만족 시 키 기 위해 어떻게 보완 해 야 할 지 모 르 는 것 이 있 으 면 댓 글 에 당신 의 문제 나 수 요 를 남 길 수 있 습 니 다.저 는 기꺼이 당신 을 도 울 것 입 니 다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.