<!-- 左侧分类导航 -->
<scroll-view :scroll-top="menuScrollTop" :scroll-y="goodsBoxScroll" class="left" >
<view v-for="(item,index) in categoryList" :key="index" class="row" :class="{ active: item.id == menuCurrentId }"
@click="showCategory(item)" >
<view class="text">{{item.name}}</view>
</view>
</scroll-view>
<!-- 右侧子导航 -->
<scroll-view scroll-with-animation :scroll-y="goodsBoxScroll" class="right" @scroll="asideScroll" :scroll-
top="tabScrollTop">
<view class="goodsListBox">
<view class="category" v-for="item in categoryList" :key="item.id" :id="'goodsBox' + item.id" >
data() {
return {
value:0,
rightId: 'right0',
leftView: 0,
pageScroll:{},
//商家信息
storeData: {},
//商品列表
goodsList: [],
//商家ID
id:0,
buttonSize: 36,
bgColor: '#fff',
//选中值
selectTure:{},
//商品分类信息列表
categoryList: [],
//评论列表
commentList: [],
navSearchWidth: 3,
navSearchBgOpacity: 0,
navSearchColor: '#ffffff',
navHeadHeight: 44,
//默认禁止商品栏滚动
goodsBoxScroll: true,
statusBarHeight,
//动画时间
animaTime: 100,
itemId: '', // 栏目右边scroll-view用于滚动的id
//商家盒子高度
storeInfoBoxHeight: 100,
//展开门店信息容器
showStoreBox: false,
current: 0, // 预设当前项的值
num:1,
element: [],
cartAnimation: {},
cartAnimationData: {},
//tabs
tabs: [
{name:'购物'},
{name:'评价'},
{name:'商家'},
],
swiperCurrent: 0,
dx: 0,
swiperCurrentSliderLeft: 0,
transtionTime:100,
//所有购物车
shoppingCartAll:[],
//显示购物车
showFoot:true,
//配送费
shippingDees: 0,
//配送起步价
startingPrice:0,
arr: [],
//购物车商品价格合计
goodsTotalPrice: 0,
//购物车商品数量合计
goodsTotalNumber: 0,
//当前门店购物车
shoppCart: [],
//foot 高度
footHeight: '0',
scrollRightTop: 0, // 右边栏目scroll-view的滚动条高度
//显示购物车
showCar: false,
//购物车中商品滚动条位置
carGoodsScrollTop: 0,
//购物车缓存 Storage 名称
shoppingCartStorageName: 'shopping_cart',
sizeCalcState: false,
tabScrollTop: 0,
mainHeight: 0,
menuCurrentId:0,
//购物车显示折扣
showDiscount:true,
//手指触摸滑动
touchData:{},
//页面滚动条距离顶部的距离
pageScrollTop: 0,
menuScrollTop: 0,
oldScrollTop: 0,
//多规格当前产品
currentGoodsData: {},
//显示规格容器
showFormBox: false,
//显示规格动画
formAnimationData:{},
scrollTop: 0, //tab标题的滚动条位置
//购物车位置数据
cartBasketRect:{},
navStatus: true,
isBack:true,
}
},
//一级分类点击
showCategory(item) {
const that = this;
// 根据分类查food
that.findFoodListByCateId(item.id);
that.goodsBoxScroll = true;
that.calcSize().then(res => {
that.menuCurrentId = item.id;
let index = that.categoryList.findIndex(sitem => sitem.id === item.id);
that.tabScrollTop = that.categoryList[index].top + 1;
console.log(that.tabScrollTop)
});
},
/**
* 右侧滚动事件
*/
asideScroll(e) {
const that = this;
that.oldScrollTop = e.detail.scrollTop
const scrollTop = Math.round(e.detail.scrollTop);
const tabs = that.categoryList.filter(item => item.top <= scrollTop).reverse();
if (tabs.length > 0) {
that.menuCurrentId = tabs[0].id;
}
const menuNum = that.categoryList.length;
const cNum = tabs.length;
// 定位在第4个分类,当分类滑动到第4格时将不再变换位置。
const n = 4;
if (cNum > n) {
that.menuScrollTop = (cNum - n) * 45;
} else {
that.menuScrollTop = 0;
}
},
//计算右侧栏每个tab的高度等信息
calcSize(event) {
debugger
const that = this;
return new Promise(function(resolve, reject) {
let h = 0;
// if(this.sizeCalcState){
// return false
// }
that.categoryList.forEach(item => {
let view = uni.createSelectorQuery().select('#goodsBox' + item.id);
view.fields(
{
size: true
},
data => {
if (data != null) {
item.top = h;
h += Math.round(data.height);
item.bottom = h;
}
}
).exec();
});
resolve(true);
that.sizeCalcState = true;
console.log(that.categoryList)
});
},
2 个回复
1***@qq.com (作者)
工作人员可以帮忙看一下吗?
1***@163.com - 你只需要好好努力,剩下的教给时间!
你解决了吗?