Vue 2.0 가수 리스트 스크롤 및 오른쪽 빠 른 입구 기능 구현
가수 리스트 페이지 는 핸드폰 주소록 과 유사 하 다.우 리 는 이 부분 을 기본 구성 요소 로 독립 시 켰 다.이 부분의 논 리 는 비교적 간단 하 다.여기 서 너무 많은 설명 을 하지 않 는 다.
// base/listview/listview.vue
<template>
<scroll class="listview" :data="data">
<ul>
<li v-for="(group, index) in data" :key="index" class="list-group">
<h2 class="list-group-title">{{group.title}}</h2>
<uL>
<li v-for="(item, index) in group.items" :key="index" class="list-group-item">
<img class="avatar" v-lazy="item.avatar">
<span class="name">{{item.name}}</span>
</li>
</uL>
</li>
</ul>
</scroll>
</template>
<script type="text/ecmascript-6">
import Scroll from 'base/scroll/scroll'
export default {
props: {
data: {
type: Array,
default: () => []
}
},
components: {
Scroll
}
}
</script>
<style scoped lang="stylus" rel="stylesheet/stylus">
@import "~common/stylus/variable"
.listview
position: relative
width: 100%
height: 100%
overflow: hidden
background: $color-background
.list-group
padding-bottom: 30px
.list-group-title
height: 30px
line-height: 30px
padding-left: 20px
font-size: $font-size-small
color: $color-text-l
background: $color-highlight-background
.list-group-item
display: flex
align-items: center
padding: 20px 0 0 30px
.avatar
width: 50px
height: 50px
border-radius: 50%
.name
margin-left: 20px
color: $color-text-l
font-size: $font-size-medium
.list-shortcut
position: absolute
z-index: 30
right: 0
top: 50%
transform: translateY(-50%)
width: 20px
padding: 20px 0
border-radius: 10px
text-align: center
background: $color-background-d
font-family: Helvetica
.item
padding: 3px
line-height: 1
color: $color-text-l
font-size: $font-size-small
&.current
color: $color-theme
font-weight: bolder
.list-fixed
position: absolute
top: -1px
left: 0
width: 100%
.fixed-title
height: 30px
line-height: 30px
padding-left: 20px
font-size: $font-size-small
color: $color-text-l
background: $color-highlight-background
.loading-container
position: absolute
width: 100%
top: 50%
transform: translateY(-50%)
</style>
// singer.vue
<template>
<div class="singer">
<list-view :data="singerList"></list-view>
</div>
</template>
<script type="text/ecmascript-6">
import ListView from 'base/listview/listview'
export default {
...
components: {
ListView
}
}
</script>
실행 결과
2 오른쪽 쾌속 입구클릭 하여 스크롤
마찬가지 로 핸드폰 주소록 과 유사 하 다.화면 오른쪽 에 떠 있 는 A-Z 는 해당 가 수 를 신속하게 찾 을 수 있 도록 도와 준다.이 를 위해 title 의 집합 배열 을 가 져 와 야 한다.
// listview.vue
<div class="list-shortcut">
<ul>
<li v-for="(item, index) in shortcutList" :key="index" class="item">{{item}}</li>
</ul>
</div>
<script type="text/ecmascript-6">
export default {
...
computed: {
shortcutList() {
return this.data.map((group) => {
return group.title.substr(0, 1)
})
}
}
}
</script>
실행 결과
빠 른 입구 가 나타 난 후에 우 리 는 클릭 이 벤트 를 추가 합 니 다.대응 하 는 알파벳 을 클릭 할 때 색인 을 가 져 와 야 합 니 다.여기 서 v-for 가 제공 하 는 index 를 직접 가 져 오 면 됩 니 다.
// listview.vue
<ul>
<li v-for="(item, index) in shortcutList" :key="index" @touchstart="onShortcutTouchStart($even, index)" class="item">{{item}}</li>
</ul>
export default {
...
methods: {
onShortcutTouchStart(e, index) {
console.log(index)
}
}
}
클릭 한 후에 우 리 는 페이지 를 해당 위치 로 스크롤 해 야 합 니 다.여 기 는 scroll 구성 요 소 를 확장 하 는 방법 이 필요 합 니 다.여기 서 확장 하 는 방법 은 모두 better-scroll 구성 요소 가 봉 인 된 방법 입 니 다.여기 서 scrollToElement 방법의 두 번 째 매개 변 수 는 애니메이션 시간 입 니 다.자신의 수요 에 따라 설정 할 수 있 습 니 다.
// scroll.vue
methods: {
...
scrollTo() {
this.scroll && this.scroll.scrollTo.apply(this.scroll, arguments)
},
scrollToElement() {
this.scroll && this.scroll.scrollToElement.apply(this.scroll, arguments)
}
}
그 다음 에 scroll 구성 요소ref="listview"
와 가수 목록ref="listGroup"
을 추가 하여 저희 가 호출 할 수 있 도록 합 니 다.
// listview.vue
export default {
...
methods: {
onShortcutTouchStart(e, index) {
this.$refs.listview.scrollToElement(this.$refs.listGroup[index], 0)
}
}
}
실행 결과
3 오른쪽 쾌속 입구슬라이딩 스크롤
우리 의 손가락 이 오른쪽 빠 른 입구 에서 미 끄 러 질 때 가수 목록 도 동시에 굴 러 간다.우리 가 오른쪽 빠 른 입 구 를 굴 릴 때 우 리 는 가수 목록 의 굴 러 가 는 것 을 막 고 브 라 우 저 원생 굴 러 가 는 것 을 막 아야 하기 때문에
@touchmove.stop.prevent
거품 을 막 고 onShortcutTouch Start 사건 에서 접점 의 초기 위 치 를 기록 해 야 한다.그리고 onShortcutTouch Move 이벤트 의 접점 위치,두 위치의 픽 셀 차 이 를 통 해 가수 목록 을 스크롤 합 니 다.
// listview.vue
<div class="list-shortcut" @touchmove.stop.prevent="onShortcutTouchMove">
<ul>
<li v-for="(item, index) in shortcutList" :key="index" @touchstart="onShortcutTouchStart($event, index)" class="item">{{item}}</li>
</ul>
</div>
<script type="text/ecmascript-6">
const ANCHOR_HEIGHT = 18
export default {
created() {
this.touch = {}
},
...
methods: {
onShortcutTouchStart(e, index) {
let firstTouch = e.touches[0]
this.touch.y1 = firstTouch.pageY
this.touch.anchorIndex = index
this._scrollTo(index)
},
onShortcutTouchMove(e) {
let firstTouch = e.touches[0]
this.touch.y2 = firstTouch.pageY
let delta = (this.touch.y2 - this.touch.y1) / ANCHOR_HEIGHT | 0
let anchorIndex = this.touch.anchorIndex + delta
this._scrollTo(anchorIndex)
},
_scrollTo(index) {
this.$refs.listview.scrollToElement(this.$refs.listGroup[index], 0)
}
},
components: {
Scroll
}
}
</script>
실행 결과
4 오른쪽 쾌속 입구하 이 라이트 설정
가수 목록 이 굴 러 갈 때 오른쪽 빠 른 입구 에서 현재 표 시 된 title 을 강조 하려 면 scroll 구성 요소 의 굴 러 가 는 이 벤트 를 감청 하여 현재 굴 러 가 는 위 치 를 가 져 와 야 합 니 다.
// scroll.vue
<script type="text/ecmascript-6">
export default {
props: {
...
listenScroll: {
type: Boolean,
default: false
}
},
methods: {
_initScroll() {
...
if (this.listenScroll) {
let me = this
this.scroll.on('scroll', (pos) => {
me.$emit('scroll', pos)
})
}
}
}
}
</script>
우 리 는 처음에 인자 probe Type 에 설 치 된 기본 값 은 1 이 었 습 니 다.즉,비 실시 간(화면 이 일정 시간 이상 미 끄 러 진 후)으로 scroll 사건 을 보 낼 것 입 니 다.우 리 는 화면 이 미 끄 러 지 는 과정 에서 실시 간 으로 scroll 사건 을 보 내야 하기 때문에 listview 에서 probe Type 의 값 을 3 으로 설정 합 니 다.// listview.vue
ref="listview"
:probe-type="probeType"
:listenScroll="listenScroll"
@scroll="scroll">
...
- :key="index"
:class="{'current':currentIndex===index}"
@touchstart="onShortcutTouchStart($event, index)"
class="item">{{item}}
export default {
created() {
...
this.listHeight = []
this.probeType = 3
},
data() {
return {
scrollY: -1,
currentIndex: 0
}
},
methods: {
...
scroll(pos) {
this.scrollY = pos.y
},
_scrollTo(index) {
this.scrollY = -this.listHeight[index]
this.$refs.listview.scrollToElement(this.$refs.listGroup[index], 0)
},
_calculateHeight() {
this.listHeight = []
const list = this.$refs.listGroup
let height = 0
this.listHeight.push(height)
for (let i = 0; i < list.length; i++) {
let item = list[i]
height += item.clientHeight
this.listHeight.push(height)
}
}
},
watch: {
data() {
this.$nextTick(() => {
this._calculateHeight()
})
},
scrollY(newY) {
const listHeight = this.listHeight
// 맨 위로 스크롤 하면 new Y>0
if (newY > 0) {
this.currentIndex = 0
return
}
// 가운데 부분 에서 스크롤
for (let i = 0; i < listHeight.length - 1; i++) {
let height1 = listHeight[i]
let height2 = listHeight[i + 1]
if (-newY >= height1 && -newY < height2) {
this.currentIndex = i
return
}
}
// 끝까지 굴 러 가면-newY 가 마지막 요소 의 상한 선 보다 큽 니 다.
this.currentIndex = listHeight.length - 2
}
},
components: {
Scroll
}
}
실행 결과
5 스크롤 고정 제목
우리 가 가수 목록 페이지 를 스크롤 할 때,이 가수 의 title 이 맨 위 에 계속 표시 되 기 를 바 랍 니 다.그리고 다음 title 로 스크롤 할 때,새로운 title 은 오래된 title 을 대체 합 니 다.여기 서 우리 가 title 의 높이 를 계산 해 야 합 니 다.
// listview.vue
ref="listview"
:probe-type="probeType"
:listenScroll="listenScroll"
@scroll="scroll">
...
{{fixedTitle}}
import Scroll from 'base/scroll/scroll'
const TITLE_HEIGHT = 28
const ANCHOR_HEIGHT = 18
export default {
...
data() {
return {
scrollY: -1,
currentIndex: 0,
diff: -1
}
},
computed: {
...
fixedTitle() {
if (this.scrollY > 0) {
return ''
}
return this.data[this.currentIndex] ? this.data[this.currentIndex].title : ''
}
},
watch: {
...
scrollY(newY) {
...
for (let i = 0; i < listHeight.length - 1; i++) {
...
if (-newY >= height1 && -newY < height2) {
...
this.diff = height2 + newY
return
}
}
...
},
diff(newVal) {
let fixedTop = (newVal > 0 && newVal < TITLE_HEIGHT) ? newVal - TITLE_HEIGHT : 0
if (this.fixedTop === fixedTop) {
return
}
this.fixedTop = fixedTop
this.$refs.fixed.style.transform = `translate3d(0,${fixedTop}px,0)`
}
}
}
실행 결과
이 장의 내용 은 여기 서 모두 끝 났 습 니 다.소스 코드 는 제 가GitHub Vue_Music_06에 보 냈 습 니 다.필요 한 친구 가 있 으 면 직접 다운로드 할 수 있 습 니 다.
총결산
위 에서 말씀 드 린 바 와 같이 편집장 님 께 서 소개 해 주신 Vue 2.0 은 가수 리스트 스크롤 과 오른쪽 빠 른 입구 기능 을 실현 하 는 것 입 니 다.여러분 께 도움 이 되 셨 으 면 좋 겠 습 니 다.궁금 한 점 이 있 으 시 면 댓 글로 남 겨 주세요.편집장 님 께 서 바로 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 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에 따라 라이센스가 부여됩니다.