|
@@ -27,7 +27,7 @@
|
|
|
<tui-skeleton v-if="skeletonShow" backgroundColor="#fafafa" borderRadius="10rpx" :isLoading ="true" :loadingType="2"></tui-skeleton>
|
|
|
<template v-else >
|
|
|
<view class="container-product tui-skeleton">
|
|
|
- <view class="container-product-main product-details0">
|
|
|
+ <view class="container-product-main product-details product-details0">
|
|
|
<view class="product-top">
|
|
|
<view class="banner-section">
|
|
|
<uni-swiper-dot :info="productImage" :current="current" field="content" :mode="mode" >
|
|
@@ -379,21 +379,30 @@
|
|
|
longPressActions:''
|
|
|
})
|
|
|
},
|
|
|
- tabClick(index) {//商品详情&&供应商信息tab切换
|
|
|
+ tabClick(index) {
|
|
|
+ //商品详情&&供应商信息tab切换
|
|
|
this.tabSelectFlag = true
|
|
|
- this.tabCurrentIndex = index;
|
|
|
- let classIndex = '.product-details'+index;
|
|
|
- uni.createSelectorQuery().select('.container-product-main').boundingClientRect((data)=>{//最外层盒子节点
|
|
|
- uni.createSelectorQuery().select(classIndex).boundingClientRect((res)=>{//最外层盒子节点
|
|
|
- uni.pageScrollTo({
|
|
|
- duration:300,//过渡时间必须为0,uniapp bug,否则运行到手机会报错
|
|
|
- scrollTop:res.top - data.top - 150,//滚动到实际距离是元素距离顶部的距离减去最外层盒子的滚动距离
|
|
|
- })
|
|
|
- setTimeout(()=>{
|
|
|
- this.tabSelectFlag = false;
|
|
|
- },500)
|
|
|
- }).exec()
|
|
|
- }).exec()
|
|
|
+ this.tabCurrentIndex = index
|
|
|
+ let classIndex = '.product-details' + index
|
|
|
+ uni.createSelectorQuery()
|
|
|
+ .select('.container-product')
|
|
|
+ .boundingClientRect(data => {
|
|
|
+ //最外层盒子节点
|
|
|
+ uni.createSelectorQuery()
|
|
|
+ .select(classIndex)
|
|
|
+ .boundingClientRect(res => {
|
|
|
+ //最外层盒子节点
|
|
|
+ uni.pageScrollTo({
|
|
|
+ duration: 300, //过渡时间必须为0,uniapp bug,否则运行到手机会报错
|
|
|
+ scrollTop: res.top - data.top - 40 //滚动到实际距离是元素距离顶部的距离减去最外层盒子的滚动距离
|
|
|
+ })
|
|
|
+ setTimeout(() => {
|
|
|
+ this.tabSelectFlag = false
|
|
|
+ }, 500)
|
|
|
+ })
|
|
|
+ .exec()
|
|
|
+ })
|
|
|
+ .exec()
|
|
|
},
|
|
|
handleContact(e){//跳转小程序客服
|
|
|
|
|
@@ -549,15 +558,18 @@
|
|
|
getSectionProps() {//获取每个tab对应区域的scrollTop值
|
|
|
let className = '.product-details',
|
|
|
sectionPropsArr = [];
|
|
|
- uni.createSelectorQuery().select('.container-product-main').boundingClientRect((data)=>{//最外层盒子节点
|
|
|
+ uni.createSelectorQuery().select('.container-product').boundingClientRect((data)=>{//最外层盒子节点
|
|
|
uni.createSelectorQuery().selectAll(className).boundingClientRect((res)=>{//最外层盒子节点
|
|
|
res.forEach((item, index) => {
|
|
|
+ console.log(item);
|
|
|
sectionPropsArr.push({
|
|
|
className: `${className}${index}`,
|
|
|
- scrollTop: item.top - data.top - 150
|
|
|
+ scrollTop: item.top - data.top,
|
|
|
+ height:item.height
|
|
|
})
|
|
|
})
|
|
|
this.sectionPropsArr = sectionPropsArr;
|
|
|
+ console.log(this.sectionPropsArr);
|
|
|
this.sectionTopRangeArr = this.getSectionRange(sectionPropsArr);
|
|
|
}).exec()
|
|
|
}).exec()
|
|
@@ -565,35 +577,46 @@
|
|
|
getSectionRange(arr) {// 获取每个tab对应区域的区间
|
|
|
let sectionScrollTopList = [];
|
|
|
for(let i = 0; i < arr.length; i++) {
|
|
|
- let thisScrollTop = arr[i].scrollTop;
|
|
|
- if(i < arr.length - 1) {
|
|
|
- let nextScrollTop = arr[i+1].scrollTop;
|
|
|
- if(i == 0) {
|
|
|
- sectionScrollTopList.push(`0-${thisScrollTop}`);
|
|
|
- } else if(i == arr.length - 1){
|
|
|
- sectionScrollTopList.push(`${thisScrollTop}-${nextScrollTop - this.winHeight}`);
|
|
|
- } else {
|
|
|
- sectionScrollTopList.push(`${thisScrollTop}-${nextScrollTop}`);
|
|
|
- }
|
|
|
- } else {
|
|
|
- sectionScrollTopList.push(`${thisScrollTop}-${thisScrollTop+500}`);
|
|
|
- }
|
|
|
+ sectionScrollTopList.push(`${arr[i].scrollTop}-${arr[i].scrollTop + arr[i].height}`)
|
|
|
}
|
|
|
+ // for(let i = 0; i < arr.length; i++) {
|
|
|
+ // let thisScrollTop = arr[i].scrollTop;
|
|
|
+ // let thisHeight = arr[i].height;
|
|
|
+ // if(i < arr.length - 1) {
|
|
|
+ // let nextScrollTop = arr[i+1].scrollTop;
|
|
|
+ // if(i == 0) {
|
|
|
+ // sectionScrollTopList.push(`0-${thisScrollTop + thisHeight}`);
|
|
|
+ // } else if(i == arr.length - 1){
|
|
|
+ // sectionScrollTopList.push(`${thisScrollTop + thisHeight}-${nextScrollTop - this.winHeight}`);
|
|
|
+ // } else {
|
|
|
+ // sectionScrollTopList.push(`${thisScrollTop + thisHeight}-${nextScrollTop}`);
|
|
|
+ // }
|
|
|
+ // } else {
|
|
|
+ // sectionScrollTopList.push(`${thisScrollTop}-${thisScrollTop+500}`);
|
|
|
+ // }
|
|
|
+ // }
|
|
|
return sectionScrollTopList;
|
|
|
},
|
|
|
- activeTab: debounce((top, _this)=> {//当滑动时也能同步激活tab
|
|
|
- const { sectionTopRangeArr } = _this;
|
|
|
- if(sectionTopRangeArr.length > 0) {
|
|
|
- sectionTopRangeArr.forEach((item, index) => {
|
|
|
- let splitItem = item.split('-'),
|
|
|
- openInterval = Number(splitItem[0]),
|
|
|
- closedInterval = Number(splitItem[1]);
|
|
|
- if(top >= openInterval && top < closedInterval) {
|
|
|
- _this.tabCurrentIndex = index;
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
- },100, true),
|
|
|
+ activeTab: debounce(
|
|
|
+ (top, _this) => {
|
|
|
+ //当滑动时也能同步激活tab
|
|
|
+ const { sectionTopRangeArr } = _this
|
|
|
+ console.log(sectionTopRangeArr);
|
|
|
+ if (sectionTopRangeArr.length > 0) {
|
|
|
+ sectionTopRangeArr.forEach((item, index) => {
|
|
|
+ let splitItem = item.split('-'),
|
|
|
+ openInterval = Number(splitItem[0]),
|
|
|
+ closedInterval = Number(splitItem[1])
|
|
|
+ if (top >= openInterval && top < closedInterval) {
|
|
|
+ console.log(top);
|
|
|
+ _this.tabCurrentIndex = index
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ 100,
|
|
|
+ true
|
|
|
+ ),
|
|
|
getWinHeight() {
|
|
|
this.winHeight = wx.getSystemInfoSync().windowHeight;
|
|
|
},
|
|
@@ -868,22 +891,31 @@
|
|
|
}
|
|
|
}
|
|
|
.floor-item-act{
|
|
|
- width: 80rpx;
|
|
|
- height: 30rpx;
|
|
|
+ // width: 80rpx;
|
|
|
+ height: 34rpx;
|
|
|
margin-top: 15rpx;
|
|
|
margin-left: 20rpx;
|
|
|
float: left;
|
|
|
.tag{
|
|
|
display: inline-block;
|
|
|
- width: 80rpx;
|
|
|
- height: 30rpx;
|
|
|
- background: url(https://static.caimei365.com/app/mini-hehe/icon/icon-active.png)top center no-repeat;
|
|
|
- background-size: contain;
|
|
|
+ height: 32rpx;
|
|
|
font-size: 22rpx;
|
|
|
line-height: 30rpx;
|
|
|
text-align: center;
|
|
|
color: #f83c6c;
|
|
|
float: left;
|
|
|
+ margin-right: 10rpx;
|
|
|
+ &.tag-02{
|
|
|
+ width: 80rpx;
|
|
|
+ background: url(https://static.caimei365.com/app/mini-hehe/icon/icon-active.png)top center no-repeat;
|
|
|
+ background-size: contain;
|
|
|
+ }
|
|
|
+ &.tag-01{
|
|
|
+ width: 56rpx;
|
|
|
+ color: #fff;
|
|
|
+ background-color: #f83c6c;
|
|
|
+ border-radius: 4rpx;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
.floor-item-btn{
|