이번에는 풀업, 로드, 풀다운을 구현한 vue.js 모바일 터미널을 가져오겠습니다. 노트란 무엇인가요?
가로 스크롤과 마찬가지로 더 나은 스크롤 라이브러리를 사용하여 구현합니다. Better가 새 버전으로 업데이트되었기 때문에 이전 버전은 0.7이었습니다. 업데이트 후 현재 버전은 1.2.6이며 더 많은 새 버전이 있는 것으로 나타났습니다. 비교적 사용하기 쉬운 API이기 때문에 이전 코드도 다시 작성하고 새로운 API를 사용하여 풀업 로딩과 풀다운 새로고침을 구현했습니다.
먼저 여기에서 건너뛰는 기본 스타일을 작성하고 더 나은 스크롤 라이브러리를 소개합니다
import BScroll from 'better-scroll'
둘째, 마운트된라이프 사이클에서 스크롤을 인스턴스화할 때 데이터를 가져온 다음 새 데이터를 가져오거나 먼저 새 데이터를 가져온 다음 데이터를 가져온 후 새로 고침을 호출할 수 있습니다.
인스턴스 중에 구성 매개변수를 전달해야 합니다. 자세한 내용은 설명서를 참조하세요.
//是否开启下拉刷新，可传入true或者false,如果需要更多配置可以传入一个对象
pullDownRefresh：{
threshold:80,
stop:40
}
//是否开启上拉加载，同上，上拉无stop参数，这里需要注意是负数
pullUpLoad：{
threshold:-80,
}
/**
*
* @param threshold 触发事件的阀值，即滑动多少距离触发
* @param stop 下拉刷新后回滚距离顶部的距离（为了给loading留出一点空间）
*/개인적으로는 위의 숫자가 더 적절하다고 생각하지만 여기에는 문제가 있습니다. 적응을 위해 Taobao의flexible.js를 사용하므로 Android에서는 80의 거리가 적합하지만 iPhone 6s에서는 3으로 스케일링되므로 거리가 80이 됩니다. 이제 iPhone 6s의 80은 약 27입니다.
따라서 확대/축소 수준이 다른 화면의 경우 해당 확대/축소 비율을 곱해야 합니다.
Taobaoflexible.js에는 실제로 화면 확대/축소 비율을 가져오는 이 방법이 이미 있습니다. 여기에서 직접 가져올 수 있습니다.
//在util.js里面加一个方法
export function getDeviceRatio(){
var isAndroid = window.navigator.appVersion.match(/android/gi);
var isIPhone = window.navigator.appVersion.match(/iphone/gi);
var devicePixelRatio = window.devicePixelRatio;
var dpr;
if (isIPhone) {
// iOS下，对于2和3的屏，用2倍的方案，其余的用1倍方案
if (devicePixelRatio >= 3) {
dpr = 3;
} else if (devicePixelRatio >= 2){
dpr = 2;
} else {
dpr = 1;
}
} else {
// 其他设备下，仍旧使用1倍的方案
dpr = 1;
}
return dpr
}import{ DEVICE_RATIO} from '../base/js/api.js'
/*获取当前缩放比*/
const DEVICE_RATIO=getDeviceRatio();
/*下拉配置*/
const DOWN_CONFIG={
threshold:80*DEVICE_RATIO,
stop:40*DEVICE_RATIO
}
/*上拉配置*/
const UP_CONFIG={
threshold:-80*DEVICE_RATIO,
}
this.scroller = new BScroll(scrollWrap,{
click:true,
probeType:3,
pullDownRefresh:DOWN_CONFIG,
pullUpLoad:UP_CONFIG
});인스턴스화 후 다음 단계는 풀업 및 풀다운 이벤트를 수신하는 것입니다. betterScroll에 몇 가지 새로운 이벤트가 추가되었습니다. 주요 이벤트는 다음과 같습니다:
/*下拉事件*/
this.scroller.on('pullingDown',()=> {});
/*上拉事件*/
this.scroller.on('pullingUp',()=>{});풀업 또는 풀다운 이벤트를 트리거한 후 this.scroller.finishPullDown() 또는 this.scroller.finishPullUp()을 호출하여 더 나은 스크롤 이벤트가 완료되었음을 알려야 합니다.
일반적인 과정은 다음과 같습니다:
this.scroller.on('pullingDown',()=> {
<!-- 1. 发送请求获取数据 -->
<!-- 2. 获取成功后，通知事件完成 -->
<!-- 3. 修改data数据，在nextTick调用refresh -->
});일반적으로 작업이 완료된 후 스크롤 가능한 거리를 다시 계산하기 위해 새로 고침 메서드를 수동으로 트리거해야 하므로 데이터 변경 사항을 모니터링하는 시계를 작성할 수 있으므로 데이터만 변경하면 되고 호출할 필요는 없습니다. 데이터를 조작한 후 매번 새로 고침 방법을 사용합니다.
rreee사용하고 계신 버전이 아직 오래된 경우 on(scroll) 이벤트로 판단하여 해당 기능 구현을 하시면 됩니다
watch:{
dataList(){
this.$nextTick(()=>{
this.scroller.refresh();
})
}
},다중 트리거를 방지하려면 스위치 2개를 추가해야 합니다.
this.scroller.on("scroll",(pos)=>{
//获取整个滚动列表的高度
var height=getStyle(scroller,"height");
//获取滚动外层wrap的高度
var pageHeight=getStyle(scrollWrap,"height");
//触发事件需要的阀值
var distance=80*DEVICE_RATIO;
//参数pos为当前位置
if(pos.y>distance){
//console.log("下拉");
//do something
}else if(pos.y-pageHeight<-height-distance){
//console.log("上拉");
//do something
}이벤트가 트리거될 때마다 해당 스위치를 false로 설정하고 작업이 완료된 후 true로 재설정합니다. 그렇지 않으면 여러 풀다운 또는 풀업이 여러 이벤트를 트리거합니다. 스위치를 설정하면 한 번에 하나의 이벤트만 실행되도록 할 수 있습니다.
마지막으로 컴포넌트
var onPullUp=true; var onPullDown=true;
로 패키징합니다. 스크롤해야 하는 특정 콘텐츠가 페이지마다 다르기 때문에 이를 배포하는 데 슬롯이 사용됩니다.
컴포넌트에 필요한 매개변수는 상위로부터 전달되고, 기본값은 prop
<template> <p ref="wrapper" class="list-wrapper"> <p class="scroll-content"> <slot></slot> </p> </p> </template>
를 통해 전달받아 설정됩니다. 컴포넌트가 마운트된 후 이벤트가 트리거되면 이벤트를 직접 처리하지 않고 부모에게 이벤트를 보냅니다. 부모는 템플릿 v-on을 통해 이벤트를 수신하고 후속 로직
export default {
props: {
dataList:{
type: Array,
default: []
},
probeType: {
type: Number,
default: 3
},
click: {
type: Boolean,
default: true
},
pullDownRefresh: {
type: null,
default: false
},
pullUpLoad: {
type: null,
default: false
},
}을 처리합니다. 상위 구성 요소를 사용하는 경우 구성 매개변수 Props를 전달하고 하위 구성 요소에서 발생하는 이벤트를 처리해야 하며 슬롯 태그를 특정 콘텐츠
mounted() {
this.scroll = new BScroll(this.$refs.wrapper, {
probeType: this.probeType,
click: this.click,
pullDownRefresh: this.pullDownRefresh,
pullUpLoad: this.pullUpLoad,
})
this.scroll.on('pullingUp',()=> {
if(this.continuePullUp){
this.beforePullUp();
this.$emit("onPullUp","当前状态：上拉加载");
}
});
this.scroll.on('pullingDown',()=> {
this.beforePullDown();
this.$emit("onPullDown","当前状态：下拉加载更多");
});
}로 바꿔야 합니다. 상위 구성 요소는 this.$refs.xxx를 통해 하위 구성 요소를 얻을 수 있으며 하위 구성 요소에서 메서드를 호출할 수 있습니다.
<Scroller
id="scroll"
ref="scroll"
:dataList="filmList"
:pullDownRefresh="DOWN_CONFIG"
:pullUpLoad="UP_CONFIG"
@onPullUp="pullUpHandle"
@onPullDown="pullDownHandle"
>
<ul>
<router-link class="film-list" v-for="(v,i) in filmList" :key="v.id" tag="li" :to='{path:"/film-detail/"+v.id}'>
<p class="film-listimg">
<img v-lazy="v.images.small" alt="" />
</p>
<p class="film-listdetail">
<p class="film-listdetailtitle">{{v.title}}</p>
<p class="film-listdetaildirector">导演：{{filterDirectors(v.directors)}}</p>
<p class="film-listdetailyear">年份：{{v.year}}<span>{{v.stock}}</span></p>
<p class="film-listdetailtype">类别：{{v.genres.join(" / ")}}<span></span></p>
<p class="film-listdetailrank">评分：<span>{{v.rating.average}}分</span></p>
</p>
</router-link>
</ul>
</Scroller>전체 스크롤러 구성 요소 내용은 다음과 같습니다
computed:{
scrollElement(){
return this.$refs.scroll
}
}이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 믿습니다. 더 흥미로운 내용을 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!
추천 도서:
위 내용은 vue.js 모바일 터미널은 풀업 로딩 및 풀다운 새로 고침을 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
