czg_team/cashier_weapp
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

购物车左边丝滑

Browse Source
This commit is contained in:
魏啾
2024-08-06 11:43:47 +08:00
parent 8cb92dc6f5
commit f2cf4aace2
1 changed files with 24 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
pages/order_food/order_food.vue
View File

@@ -97,7 +97,7 @@
<view class="item" v-for="(item,index) in shopProductList.productInfo" :key="index"
:class="{ 'active':index==leftIndex }" :id="'left-'+index" :data-index="index"
@click="leftTap(index)"><text>{{item.name}}</text></view>
<view class="items"></view>
<!-- <view class="items"></view> -->
</scroll-view>
</view>
<view class="main">
@@ -376,7 +376,8 @@
return this.$store.getters.is_BarHeight.heightBar + this.$store.getters.is_BarHeight.customBar
},
scrollHeight() {
return this.$store.getters.is_BarHeight.info.windowHeight - this.HeighT
return this.$store.getters.is_BarHeight.info.windowHeight - (this.$store.getters.is_BarHeight.heightBar +
this.$store.getters.is_BarHeight.customBar)
}
},
onReady() {
@@ -865,14 +866,18 @@
this.scrollTopSize = res.top; //元素距离顶部的距离
})
}).then((res) => {
console.log(res)
let topArr = res.map((item) => {
return item.top; /* 减去滚动容器距离顶部的距离 加导航栏高度*/
});
// this.scrollHeight = this.scrollHeight - this.HeighT
this.topArr = topArr;
// 获取最后一个元素最低端的盒子到顶点的距离
this.lastbottom = res[res.length - 1].bottom - 20;
for (let i = 0; i <= (this.topArr.length - 1); i++) {
if ((this.scrollHeight - 200) >= (this.topArr[this.topArr.length - 1] - this.topArr[i])) {
// 获取距离最后一个index
this.lastbottom = i;
break;
}
}
/* 获取最后一项的高度，设置填充高度。判断和填充时做了 +-20 的操作，是为了滚动时更好的定位 */
let last = res[res.length - 1].height;
if (last - 20 < this.scrollHeight) {
@@ -897,18 +902,21 @@
} else {
this.scrollxleft = false
}
/* 查找当前滚动距离 */
if (this.scrollHeight - 200 >= (this.topArr[this.topArr.length - 1] - this.topArr[this
.leftIndex])) { //4109
this.leftIndex = this.leftIndex
} else {
for (let i = (this.topArr.length - 1); i >= 0; i--) {
/* 在部分安卓设备上，因手机逻辑分辨率与rpx单位计算不是整数，滚动距离与有误差，增加2px来完善该问题 */
if ((top + 2) >= this.topArr[i] - this.HeighT) {
index = i;
break;
}
for (let i = (this.topArr.length - 1); i >= 0; i--) {
/* 在部分安卓设备上，因手机逻辑分辨率与rpx单位计算不是整数，滚动距离与有误差，增加2px来完善该问题 */
if ((top + 2) >= this.topArr[i] - this.HeighT) {
index = i;
break;
}
}
console.log(index)
/* 查找当前滚动距离 */
if (index >= this.lastbottom) { //
console.log(index, this.leftIndex)
this.leftIndex = index > this.leftIndex ? index : this.leftIndex
// this.leftIndex = this.leftIndex
} else {
console.log(22918)
this.leftIndex = (index < 0 ? 0 : index);
}
}