需求背景
商品詳情頁往往有基礎(chǔ)信息和較多的圖文信息，需要分屏加載優(yōu)化惩淳。（其實(shí)是因?yàn)閁ED想模仿天貓的加載方式-0-）
框架選擇
第一次我選擇了mint-ui（項(xiàng)目已引入的框架）的loadmore組件标沪，阻尼切換的方式依靠手指對(duì)內(nèi)容頁的拖動(dòng)閾值判斷切換肺孤。出現(xiàn)的交互問題是汉柒，當(dāng)拖動(dòng)的是在webview中的網(wǎng)頁本身主體容器時(shí)琅坡，不能正常切換阻尼强戴，此時(shí)的滑動(dòng)對(duì)象體是網(wǎng)頁容器而不是內(nèi)容頁亭螟。（參照下圖理解）
容器示意圖
滑動(dòng)的問題看起來并不好解決，以另外思維方式來考慮實(shí)現(xiàn)方案骑歹，我們不用拖動(dòng)閾值來做切換的判斷條件而是以內(nèi)容頁滾動(dòng)閾值呢预烙？ok，使用better-scroll來實(shí)現(xiàn)阻尼道媚。
具體實(shí)現(xiàn)
實(shí)現(xiàn)方案
需切換的兩屏內(nèi)容包含在一個(gè)總?cè)萜鞅獾В科羶?nèi)容父級(jí)各為better-scroll對(duì)象翘县，第一屏為上拉阻尼，第二屏為下拉阻尼谴分，切換效果為向上/下滑出锈麸。下圖為元素框架及交互示意圖：
交互示意圖.png
實(shí)現(xiàn)效果圖
效果圖.gif
具體代碼實(shí)現(xiàn)
（項(xiàng)目使用的是vue框架，具體實(shí)現(xiàn)并不復(fù)雜可自行修改適用）
- dom層
<template>
<div class="page-loadmore-wrapper" id="pageContent">
<!-- 上拉阻尼-第一屏 -->
<div class="one-page-wapper" ref="onePage" :style="{ height: wrapperHeight + 'px' }">
<div class="one-page">
<ul class="one-page-content">
<li v-for="item in list" class="list-item">{{item}}</li>
</ul>
<div class="bottom-text">{{upScrollLoad ? '↓釋放' : '↑上拉'}}查看第二屏</div>
</div>
</div>
<!-- 下拉阻尼-第二屏 -->
<div class="two-page-wapper" ref="twoPage" v-show="towPageShowFlag" :style="{ height: wrapperHeight + 'px' }">
<div class="two-page">
<ul class="two-page-content">
<li v-for="item in data" class="list-item">{{item}}</li>
</ul>
<div class="top-text">{{downScrollLoad ? '↑釋放' : '↓下拉'}}查看第一屏</div>
</div>
</div>
</div>
</template>
- css
.page-loadmore-wrapper { overflow-y: auto; }
.one-page,.two-page{ position: relative; }
.two-page-content{ width: 100%;background-color: #c3cc9e; }
.one-page-wapper,.two-page-wapper{ overflow-y: hidden; } /*需要注意的是bscroll對(duì)象的父容器需要添加overflow-y: hidden 否則滾動(dòng)計(jì)算會(huì)出錯(cuò)*/
.bottom-text{ position: absolute;width: 100%;height: 40px;line-height: 40px;text-align: center;margin-bottom: -40px; }
.top-text{ position: absolute;width: 100%;height: 40px;line-height: 40px;text-align: center;margin-top: -40px;top: 0; }
.list-item {height: 50px;line-height: 50px;border-bottom: solid 1px #eee;text-align: center; }
.content{ padding: 0;margin: 0; }
- js
import BScroll from 'better-scroll';
export default {
data() {
return {
list: [],
data: [],
wrapperHeight: 0, //整體阻尼容器高度
upScroll: null, //上拉阻尼-第一屏
upScrollLoad: false, //上拉阻尼-達(dá)到閾值標(biāo)志位
downScroll: null, //下拉阻尼-第二屏
downScrollLoad: false, //下拉阻尼-達(dá)到閾值標(biāo)志位
towPageShowFlag: false,//第二屏顯示與否
firstLoadData: false, //是否首次請(qǐng)求數(shù)據(jù)
pullThreshold: 70 //拖動(dòng)閾值牺蹄，默認(rèn)70px
};
},
created() {
for (let i = 1; i <= 20; i++) {
this.list.push(i);
}
},
mounted() {
//頁面可視區(qū)域作為整體阻尼容器高度
this.wrapperHeight = document.documentElement.clientHeight;
//注意：一定要在 nextTick 之后初始化阻尼
this.$nextTick(() => {
this.initScroll();
})
},
watch: {
//監(jiān)聽數(shù)據(jù)的變化忘伞，延時(shí)20ms后調(diào)用refresh方法重新計(jì)算，保證滾動(dòng)效果正常
list() {
setTimeout(() => {
this.upScroll && this.upScroll.refresh()
}, 20)
},
data(){
setTimeout(() => {
this.downScroll && this.downScroll.refresh()
}, 20)
}
},
methods: {
//初始化阻尼
initScroll(){
this.initOnePageScroll();
this.initTwoPageScroll();
},
//初始化上拉阻尼
initOnePageScroll(){
this.upScroll = new BScroll(this.$refs.onePage, {
probeType: 2,
click: true
});
let overHeight = this.$refs.onePage.getElementsByClassName('one-page')[0].offsetHeight - this.wrapperHeight + this.pullThreshold;
this.upScroll.on('scroll', (pos) => {
//向上拖動(dòng)達(dá)到閾值
if (pos.y <= -overHeight) {
this.upScrollLoad = true;
}else{
this.upScrollLoad = false;
}
});
//手指釋放位檢測沙兰，超過閾值則去到第二屏氓奈，否則彈回原位
this.upScroll.on('touchend', () => {
if (this.upScrollLoad == true) {
this.upScrollLoad = false;
this.pullUp();
}
});
},
//初始化下拉阻尼
initTwoPageScroll(){
this.downScroll = new BScroll(this.$refs.twoPage, {
probeType: 2,
click: true
});
this.downScroll.on('scroll', (pos) => {
//向下拖動(dòng)達(dá)到閾值
if (pos.y > this.pullThreshold ) {
this.downScrollLoad = true;
}else{
this.downScrollLoad = false;
}
});
//手指釋放位檢測，超過閾值則回到第一屏僧凰，否則彈回原位
this.downScroll.on('touchend', () => {
if (this.downScrollLoad == true) {
this.pullDown();
}
});
},
//下拉-回到第一屏
pullDown() {
this.animate(document.getElementById('pageContent'),{marginTop: 0},10,0.2,() => {
this.towPageShowFlag = false;
});
},
//上拉-去到第二屏
pullUp() {
this.towPageShowFlag = true;
if (!this.firstLoadData) {
this.loadData();
}
this.$nextTick(()=>{
this.downScroll.refresh();
this.animate(document.getElementById('pageContent'),{marginTop: -this.wrapperHeight},10,0.2);
})
},
//加載第二屏數(shù)據(jù)
loadData() {
this.firstLoadData = true;
for (let i = 21; i <= 40; i++) {
this.data.push(i);
}
},
//動(dòng)畫
animate(obj, json, interval, sp, callback) {
obj.timer = null;
clearInterval(obj.timer);
obj.timer = setInterval(() => {
var flag = true;
for(var arr in json) {
var icur = parseInt(document.defaultView.getComputedStyle(obj, null)[arr]);
var speed = (json[arr] - icur) * sp;
speed = speed > 0 ? Math.ceil(speed): Math.floor(speed);
if(icur != json[arr]){
flag = false;
}
obj.style[arr] = icur + speed + "px";
}
if(flag){
clearInterval(obj.timer);
if(callback){
callback();
}
}
},interval);
}
}
};
PS
具體的實(shí)現(xiàn)可以參照代碼去實(shí)踐、修改熟丸，代碼中已有注釋說明训措。如果還是遇到難以解決的問題可以私信我，better-scroll中的刷新時(shí)機(jī)是需要注意的點(diǎn)光羞。最后绩鸣，如有疏漏不妥之處,望不吝賜教。
