home.js 에서 getHomeGoods(type,page)를 Home.vue 에 봉인 하고 methods 에서 getHomeGoods(type)를 호출 하여 getHomeGoods('pop')/getHomeGoods('new')/getHomeGoods('sell')page:동적 으로 대응 하 는 page 를 가 져 와 데 이 터 를 가 져 옵 니 다:res this.goods[type].list.push(..res.data.list)this.goods[type].page+=1 goods: { pop: page1:/list[30] new: page1/list[30] sell: page1/list[30] } 3,Swiper 패키지 에 따라 HomeSwiper
Swiper 와 Swiper Item 사용
배 너 에 전송 하여 전시
4,패키지 FeatureView
독립 구성 요소 패키지 FeatureView
div>a>img
5,패키지 RecommendView
사진 한 장 을 보 여주 면 됩 니 다
6,봉인 tabControl
기본 구조의 포장
감청 클릭
props->titles div>titles v-for 에 따라 div->span{title}}어느 tab,어느 tab 의 텍스트 색상 이 변 하 는 지 선택 하 십시오.아래 border-bottom currentIndex
tabControl 의 offset Top 가 져 오기 얼마나 굴 러 갈 때 흡수 효과 가 있 는 지 알 아야 합 니 다.이 럴 때 tabControl 의 offset Top 을 가 져 와 야 합 니 다.단,mounted 에서 tabControl 의 offset Top 을 직접 가 져 오 면 값 이 올 바 르 지 않 습 니 다.
어떻게 정확 한 값 을 얻 었 습 니까?
HomeSwiper 에서 img 의 로 딩 이 완료 되 었 습 니 다.로 딩 이 완료 되면 이 벤트 를 보 내 고 Home.vue 에서 정확 한 값 을 가 져 옵 니 다.
HomeSwiper 가 여러 번 이 벤트 를 보 내지 않도록 isLoad 변 수 를 사용 하여 상태의 기록 을 할 수 있 습 니 다.
주의:여 기 는 여러 번 호출 되 지 않 고 debounce 와 의 차이 점
도청 스크롤,동적 으로 tabControl 의 스타일 을 바 꾸 는 문제:동적 으로 tabControl 의 스타일 을 바 꿀 때 두 가지 문제 가 발생 합 니 다.문제 1:아래 의 상품 내용 은 갑자기 위로 이동 합 니 다.문제 2:tabControl 은 fixed 를 설 치 했 지만 Better-Scroll 과 함께 굴 러 나 갔습니다.
체류 문 제 를 해결 합 니 다.맨 위 에 Place Holder TabControl 구성 요소 대상 을 복사 하여 체류 효 과 를 실현 합 니 다.*사용자 가 일정한 위치 로 굴 렀 을 때 Place Holder TabControl 이 표 시 됩 니 다.*사용자 가 일정한 위치 에 굴 러 가지 않 았 을 때 Place Holder TabControl 은 숨 깁 니 다.
7.상품 데이터 요청 및 저장
goodList 변 수 를 정의 하여 요청 한 상품 데 이 터 를 저장 합 니 다
type 과 page 에 따라 상품 데 이 터 를 요청 합 니 다
상품 데이터 저장
8,GoodsList 와 GoodsList Item 패키지
전시 상품 목록,패키지 상품 목록
리스트 에 있 는 모든 상품,봉 인 된 GoodsListItem
CSS 속성 설정 에 주의 하면 됩 니 다
9,구 르 는 패키지 스크롤
better-scroll 설치
스크롤 구성 요소 로 서 독립 된 구성 요 소 를 패키지 합 니 다:Scroll
구성 요소 내 코드 의 패키지:
1.Better Scroll 대상 을 만 들 고 DOM 과 옵션(probe Type,click,pullUpLoad)
을 입력 합 니 다.
2.scroll 사건 을 감청 하면 이 사건 은 position
로 돌아 갑 니 다.
3.pulling Up 사건 을 감청 하고 이 사건 을 감청 하여 더 많이 불 러 옵 니 다
4.패키지 새로 고침 방법:this.scroll.refresh()
5.스크롤 을 봉인 하 는 방법:this.scroll.scrollTo(x,y,time)
6.패키지 리 셋 완료 방법:this.scroll.finished PullUp
스크롤 문제(그림 불 러 오기) Better-Scroll 은 스크롤 할 수 있 는 영역 을 결정 할 때 scroller Height 속성 에 따라 결정 합 니 다.scroller Height 속성 은 Better-Scroll 을 넣 은 content 의 하위 구성 요소 높이 에 따라 결 정 됩 니 다.
그러나 우리 의 홈 페이지 에서 처음에 scroller Height 속성 을 계산 할 때 그림 을 계산 하지 않 았 기 때문에 계산 한 알림 은 잘못된 것(1300+)
입 니 다.
나중에 그림 을 불 러 온 후에 새로운 높이 가 생 겼 지만 scroller Height 속성 은 업데이트 되 지 않 았 습 니 다.그래서 스크롤 에 문제 가 생 겼 습 니 다
모든 그림 을 불 러 오 는 것 이 완료 되 었 는 지,한 장의 그림 만 불 러 오 면 refresh()를 한 번 실행 하면 어떻게 그림 을 불 러 오 는 것 이 완료 되 었 습 니까?*원생 js 감청 사진:img.onload=function(){}*Vue 에서 감청:@load='방법'스크롤 의 refresh()호출 GoodsListItem.vue 의 이 벤트 를 Home.vue 에 전송 하 는 방법 부자 구성 요소 가 아 닌 통신 과 관련 되 어 있 기 때문에 이벤트 버스*bus->버스*Vue.prototype.$bus=new Vue()*this.bus.emit('이벤트 이름',매개 변수)*this.bus.on('이벤트 이름',리 셋 함수(매개 변수)을 선 택 했 습 니 다. 10,업 로드 더
