點餐介面兩個ListView聯動效果
阿新 • • 發佈:2019-01-31
onGetElement = (contentViewClass,contentkindClass,sildViewClass,sildkindClass,id) =>{
//contentViewClass 內容視口的類名 contentkindClass 內容裡面每個類的的類名 sildViewClass title的視口類名 sildkindClass title每個類的類名 id 要選中的titlE改變狀態的 id
//
//
//思路:1.先獲取內容裡面每個類的內容高度,把每個類的內容對應的titleid 還有距離視口的最小距離和最大距離寫個物件並push進 scollArry陣列中
//2.獲取每個title內容距離title 視口的最小距離和最大距離寫個物件,然後push到sildScoll陣列中
//3.監聽內容視口的滾動距離,每次滾動就去迴圈scollArry 陣列 去判斷滾動的距離大小落在哪個內容區間內,就把對應元素內的titleid 改變狀態
//內容滾動 title 滾動 獲取title 視口的高度 取得title 可滾動的最大值 定義兩個引數 sildMin(大小等於視口的一半) 和 sildMax (等於最大滾動距離-視口的一半) 當內容塊滾動的時候,判斷 選中的title 對應在sildScoll 陣列中的物件區間,然後設定title視口的滾動高度為 title 物件區間最小值(sildScoll[i].min)- sildMin
// 還要判斷當區間最小值小於等於sildMin 設定視口的滾動距離為0
// 當選中的title 最大值 大於 sildMax 設定 title 滾動距離為title 可滾動最大高度
/**
*
*
*有需要自己改編,大部分用原生方法編寫小部分使用es6或者可以留言討論
*
*/
var Element = document.getElementsByClassName(contentViewClass),
foodtypeListH = document.getElementsByClassName(contentkindClass)[0],
sildElement = document.getElementsByClassName(sildViewClass),
sideListH = document.getElementsByClassName(sildkindClass)[0],
scollArry = [],
sildMin = sideListH.offsetHeight / 2,
sildMax = sideListH.scrollHeight - sideListH.offsetHeight /2,
sildScoll = [];
//獲取菜品高度
for (var i = 0; i < Element.length; i++) {
if(i == 0){
scollArry.push({
min: 0,
max: Element[i].offsetHeight,
id:Element[i].getAttribute(id)
})
}else{
scollArry.push({
min: scollArry[i-1].max,
max: scollArry[i-1].max + Element[i].offsetHeight,
id:Element[i].getAttribute(id)
})
}
};
//獲取小類高度
for (var i = 0; i < sildElement.length; i++) {
if(i == 0){
sildScoll.push({
min: 0,
max: sildElement[i].offsetHeight,
})
}else{
sildScoll.push({
min: sildScoll[i-1].max,
max: sildScoll[i-1].max + sildElement[i].offsetHeight,
})
}
};
//監聽滾動
foodtypeListH.onscroll = (function(){
var num = scollArry[0].min;
for (var i = 0; i < scollArry.length; i++) {
if(scollArry[i].min <= foodtypeListH.scrollTop && foodtypeListH.scrollTop < scollArry[i].max){
num = scollArry[i].id
if(sildScoll[i].min > sildMin && sildScoll[i].max < sildMax){
sideListH.scrollTop = sildScoll[i].min - sildMin;
}
if(sildScoll[i].min < sildMin) {
sideListH.scrollTop = 0;
}
if(sildScoll[i].max > sildMax ){
sideListH.scrollTop = sideListH.scrollHeight
}
}
};
this.props.tabChange(num);//這個是調取action 來改變store 上選中title 的值
}).bind(this)
//contentViewClass 內容視口的類名 contentkindClass 內容裡面每個類的的類名 sildViewClass title的視口類名 sildkindClass title每個類的類名 id 要選中的titlE改變狀態的 id
//
//
//思路:1.先獲取內容裡面每個類的內容高度,把每個類的內容對應的titleid 還有距離視口的最小距離和最大距離寫個物件並push進 scollArry陣列中
//2.獲取每個title內容距離title 視口的最小距離和最大距離寫個物件,然後push到sildScoll陣列中
//3.監聽內容視口的滾動距離,每次滾動就去迴圈scollArry 陣列 去判斷滾動的距離大小落在哪個內容區間內,就把對應元素內的titleid 改變狀態
//內容滾動 title 滾動 獲取title 視口的高度 取得title 可滾動的最大值 定義兩個引數 sildMin(大小等於視口的一半) 和 sildMax (等於最大滾動距離-視口的一半) 當內容塊滾動的時候,判斷 選中的title 對應在sildScoll 陣列中的物件區間,然後設定title視口的滾動高度為 title 物件區間最小值(sildScoll[i].min)- sildMin
// 還要判斷當區間最小值小於等於sildMin 設定視口的滾動距離為0
// 當選中的title 最大值 大於 sildMax 設定 title 滾動距離為title 可滾動最大高度
/**
*
*
*有需要自己改編,大部分用原生方法編寫小部分使用es6或者可以留言討論
*
*/
var Element = document.getElementsByClassName(contentViewClass),
foodtypeListH = document.getElementsByClassName(contentkindClass)[0],
sildElement = document.getElementsByClassName(sildViewClass),
sideListH = document.getElementsByClassName(sildkindClass)[0],
scollArry = [],
sildMin = sideListH.offsetHeight / 2,
sildMax = sideListH.scrollHeight - sideListH.offsetHeight /2,
sildScoll = [];
//獲取菜品高度
for (var i = 0; i < Element.length; i++) {
if(i == 0){
scollArry.push({
min: 0,
max: Element[i].offsetHeight,
id:Element[i].getAttribute(id)
})
}else{
scollArry.push({
min: scollArry[i-1].max,
max: scollArry[i-1].max + Element[i].offsetHeight,
id:Element[i].getAttribute(id)
})
}
};
//獲取小類高度
for (var i = 0; i < sildElement.length; i++) {
if(i == 0){
sildScoll.push({
min: 0,
max: sildElement[i].offsetHeight,
})
}else{
sildScoll.push({
min: sildScoll[i-1].max,
max: sildScoll[i-1].max + sildElement[i].offsetHeight,
})
}
};
//監聽滾動
foodtypeListH.onscroll = (function(){
var num = scollArry[0].min;
for (var i = 0; i < scollArry.length; i++) {
if(scollArry[i].min <= foodtypeListH.scrollTop && foodtypeListH.scrollTop < scollArry[i].max){
num = scollArry[i].id
if(sildScoll[i].min > sildMin && sildScoll[i].max < sildMax){
sideListH.scrollTop = sildScoll[i].min - sildMin;
}
if(sildScoll[i].min < sildMin) {
sideListH.scrollTop = 0;
}
if(sildScoll[i].max > sildMax ){
sideListH.scrollTop = sideListH.scrollHeight
}
}
};
this.props.tabChange(num);//這個是調取action 來改變store 上選中title 的值
}).bind(this)
}
//可檢視效果連結,使用微信訪問進行進入點餐介面檢視效果:http://sz.canxingjian.com/wxdc/wxdd/production/index.html?appid=42458671&brandid=40&storeid=5&dishtype=2&table=-1