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

购物车联动优化

This commit is contained in:
魏啾 2024-08-05 17:52:05 +08:00
parent 360b0c1ade
commit 8cb92dc6f5
1 changed files with 25 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
pages/order_food/order_food.vue
View File

@ -35,7 +35,7 @@
本店招牌菜 本店招牌菜
</view> </view>
<view class="panelfive"> <view class="panelfive">
<scroll-view :scroll-x="true" :scroll-into-view="leftIntoView" :scroll-with-animation="false"> <scroll-view :scroll-into-view="leftIntoView" :scroll-with-animation="false">
<view class="panelfive_list"> <view class="panelfive_list">
<view class="panelfiveitem" @click="clickspecifications(item,index,index,'热销')" <view class="panelfiveitem" @click="clickspecifications(item,index,index,'热销')"
v-for="(item,index) in shopProductList.hots" :key="index"> v-for="(item,index) in shopProductList.hots" :key="index">
@ -92,7 +92,8 @@
<view class="scroll-panel" id="scroll-panel"> <view class="scroll-panel" id="scroll-panel">
<view class="list-box"> <view class="list-box">
<view class="left" :style="{top: `${HeighT}px`}"> <view class="left" :style="{top: `${HeighT}px`}">
<scroll-view :scroll-into-view="leftIntoView" :scroll-with-animation="false"> <scroll-view :scroll-into-view="leftIntoView" :scroll-with-animation="false" :scroll-y="scrollxleft"
:style="{height:`${scrollHeight - 90}px`}">
<view class="item" v-for="(item,index) in shopProductList.productInfo" :key="index" <view class="item" v-for="(item,index) in shopProductList.productInfo" :key="index"
:class="{ 'active':index==leftIndex }" :id="'left-'+index" :data-index="index" :class="{ 'active':index==leftIndex }" :id="'left-'+index" :data-index="index"
@click="leftTap(index)"><text>{{item.name}}</text></view> @click="leftTap(index)"><text>{{item.name}}</text></view>
@ -108,7 +109,7 @@
</view> </view>
<view class="goods" @click="clickspecifications(item1,index,index1)" <view class="goods" @click="clickspecifications(item1,index,index1)"
v-for="(item1,index1) in item.products" :key="index1"> v-for="(item1,index1) in item.products" :key="index1">
<!-- <image class="goodsImg" v-if="item1.coverImg!=null" :lazy-load="true" <!-- <image class="goodsImg" v-if="item1.coverImg!=null" :lazy-load="true"
:src="`${item1.coverImg}?x-oss-process=image/resize,m_lfit,w_150,h_150`" mode="aspectFill"></image> --> :src="`${item1.coverImg}?x-oss-process=image/resize,m_lfit,w_150,h_150`" mode="aspectFill"></image> -->
<image class="goodsImg" v-if="item1.coverImg!=null" :lazy-load="true" <image class="goodsImg" v-if="item1.coverImg!=null" :lazy-load="true"
:src="`${item1.coverImg}`" mode="aspectFill"></image> :src="`${item1.coverImg}`" mode="aspectFill"></image>
@ -353,7 +354,8 @@
salePrice: '', //钱数 salePrice: '', //钱数
cartListsdatashow: false, //是否显示购物车 cartListsdatashow: false, //是否显示购物车
showCart: false, showCart: false,
lastbottom: '' //元素最低端的距离 lastbottom: '', //元素最低端的距离
scrollxleft: false
} }
}, },
onPageScroll(e) { onPageScroll(e) {
@ -870,7 +872,7 @@
// this.scrollHeight = this.scrollHeight - this.HeighT // this.scrollHeight = this.scrollHeight - this.HeighT
this.topArr = topArr; this.topArr = topArr;
// 获取最后一个元素最低端的盒子到顶点的距离 // 获取最后一个元素最低端的盒子到顶点的距离
this.lastbottom = res[res.length - 1].bottom; this.lastbottom = res[res.length - 1].bottom - 20;
/* 获取最后一项的高度，设置填充高度。判断和填充时做了 +-20 的操作，是为了滚动时更好的定位 */ /* 获取最后一项的高度，设置填充高度。判断和填充时做了 +-20 的操作，是为了滚动时更好的定位 */
let last = res[res.length - 1].height; let last = res[res.length - 1].height;
if (last - 20 < this.scrollHeight) { if (last - 20 < this.scrollHeight) {
@ -889,21 +891,25 @@
let scrollFn = () => { let scrollFn = () => {
let top = e.scrollTop; let top = e.scrollTop;
let index = 0; let index = 0;
/* 查找当前滚动距离 */ // 判断左边是否可以滑动
for (let i = (this.topArr.length - 1); i >= 0; i--) { if (top + 2 > this.topArr[0]) {
/* 在部分安卓设备上，因手机逻辑分辨率与rpx单位计算不是整数，滚动距离与有误差，增加2px来完善该问题 */ this.scrollxleft = true
if ((top + 2) >= this.topArr[i] - this.HeighT) {
index = i;
break;
}
// const lastElement = this.topArr[this.topArr.length - 1];
}
const currentElement = this.topArr[index];
const diff = this.lastbottom - currentElement;
if (diff > this.scrollHeight - 200) { //200是固定高度
this.leftIndex = (index < 0 ? 0 : index);
} else { } else {
this.scrollxleft = false
}
/* 查找当前滚动距离 */
if (this.scrollHeight - 200 >= (this.topArr[this.topArr.length - 1] - this.topArr[this
.leftIndex])) { //4109
this.leftIndex = this.leftIndex 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;
}
}
this.leftIndex = (index < 0 ? 0 : index);
} }
} }
}, },
@ -1700,7 +1706,7 @@
} }
.items { .items {
height: 180rpx; height: 90px;
position: relative; position: relative;
font-weight: 400; font-weight: 400;
font-size: 24rpx; font-size: 24rpx;