Vue 에서 better-scroll 구성 요 소 를 이용 하여 가로 스크롤 기능 을 실현 합 니 다.
6699 단어 vuebetter-scroll가로 방향
최근 vue 를 공부 하 는 과정 에서 어디로 가 는 네트워크 의 모 바 일 엔 드 를 모방 하여 작은 프로젝트 를 썼 습 니 다.기초 지식 을 실천 하고 공 고 히 하 는 데 목적 을 두 었 습 니 다.그러나 오늘 은 어디로 가 는 첫 페이지 에 구성 요소 사용자 체험 이 비교적 좋 지 않 은 것 을 발 견 했 습 니 다.즉,가로 목록 은 브 라 우 저의 원생 스크롤 을 사용 하여 이 루어 집 니 다.목록 이 구 르 는 것 이 비교적 어색 하고 힘 듭 니 다.그래서 better-scroll 에서 이 구성 요 소 를 다시 쓰기 로 결 정 했 습 니 다.
better-scroll 소개
better-scroll 은 황 일 대신(맞 아,내 선배)이 쓴 i-scroll 기반 스크롤 구성 요소 입 니 다.프로젝트 주소:https://github.com/ustbhuangyi/better-scroll
1.구 르 는 실현 원리
better-scroll 의 스크롤 원 리 는 브 라 우 저 원생 스크롤 원리 와 같 습 니 다.하위 상자 의 높이 가 부모 상자 의 높이 보다 크 면 수직 스크롤 이 나타 납 니 다.
마찬가지 로 하위 상자 의 너비 가 부모 상자 의 너비 보다 크 면 가로 스크롤(근본 원리)이 나타난다.
2.Vue 에서 better-scroll 사용
Vue 에서 better-scroll 을 사용 할 때 가장 주의해 야 할 점 은 페이지 렌 더 링 이 끝 날 때 까지 기 다 렸 다가 BScroll 의 실례 화 를 실행 하 는 것 입 니 다.better-scroll 은 스크롤 구역 의 크기 와 부모 상자 의 사 이 즈 를 얻어 스크롤 할 수 있 는 지 를 계산 해 야 하기 때문에 Vue 의 생명 주기 에 대해 어느 정도 알 아야 합 니 다.
여 기 는 작은 demo 입 니 다.이 demo 를 통 해 better-scroll 을 어떻게 사용 하 는 지 알 게 될 것 입 니 다.
<template>
<div class="wrapper" ref="wrapper"> // vue dom this.$refs
<ul class="content">
<li>...</li>
<li>...</li>
...
</ul>
</div>
</template>
<script>
import BScroll from 'better-scroll' // better-scroll
export default {
mounted() {
this.$nextTick(() => { // this.$nextTick
this.scroll = new Bscroll(this.$refs.wrapper, {}) // BScroll , dom
})
}
}
</script>
3.Vue 에서 가로 스크롤 실현1.효과 도 대비
네 이 티 브 스크롤 사용:
better-scroll 사용 하기:
2.코드(주석 을 보십시오)
<template>
<div class="recommand-wrap">
<div class="title">
<img class="title-img" src="https://imgs.qunarzz.com/piao/fusion/1711/16/bfbb9874e8f11402.png" alt=" ">
<span class="title-hotrec"> </span>
<span class="title-allrec"> </span>
</div>
<div ref="wrapper"> /* */
<ul class="cont" ref="cont"> /* , */
<li class="cont-item" v-for="item of recommendList" :key="item.id">
<div class="cont-img">
<img class="img" :src="item.url" :alt="item.text">
</div>
<div class="cont-dest">{{item.text}}</div>
<div class="cont-price">
<span class="price">¥{{item.price}}</span>
<span> </span>
</div>
</li>
</ul>
</div>
</div>
</template>
<script>
import BScroll from 'better-scroll'
export default {
name: 'HomeRecommand',
props: {
recommendList: {
type: Array,
required: true
}
},
components: {
},
data () {
return {
}
},
methods: {
verScroll () {
let width = this.recommendList.length * 110// , ,
this.$refs.cont.style.width = width + 'px' //
this.$nextTick(() => {
if (!this.scroll) {
this.scroll = new BScroll(this.$refs.wrapper, {
startX: 0, // better-scroll ,
click: true,
scrollX: true,
scrollY: false,
eventPassthrough: 'vertical'
})
} else {
this.scroll.refresh() // dom
}
})
}
},
mounted () {
this.$nextTick(() => {
let timer = setTimeout(() => { // , $nextTick,
if (timer) {
clearTimeout(timer)
this.verScroll()
}
}, 0)
})
}
}
</script>
<style lang="scss" scoped>
.recommand-wrap {
height: 0;
padding-bottom: 50%;
margin-top: .2rem;
background: #fff;
padding-left: .24rem;
width: 100%;
.title {
position: relative;
height: 40px;
display: flex;
padding: 12px 0;
box-sizing: border-box;
.title-img {
width: 15px;
height: 15px;
}
.title-hotrec {
font-size: 16px;
margin-left: 4px;
}
.title-allrec {
position: absolute;
padding-top: 2px;
font-size: 13px;
right: 20px;
color: gray;
}
}
.cont {
list-style: none;
// overflow-x: scroll;
white-space: nowrap;
font-size: 12px;
text-align: center;
padding-right: .24rem;
.cont-item {
position: relative;
display: inline-block;
padding: .06rem 0 .2rem;
width: 2rem;
margin: 0 .1rem;
.cont-img {
overflow: hidden;
width: 2rem;
height: 0;
padding-bottom: 100%;
.img {
width: 100%;
}
}
.cont-dest {
margin: .1rem 0;
}
.cont-price {
.price {
color: #ff8300;
}
}
}
}
}
</style>
참조 링크저자:황 일
링크:https://zhuanlan.zhihu.com/p/27407024
총결산
Vue 에서 better-scroll 구성 요 소 를 이용 하여 가로 스크롤 을 실현 하 는 것 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 Vue better-scroll 가로 스크롤 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 많은 응원 바 랍 니 다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 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에 따라 라이센스가 부여됩니다.