|
|
@@ -1,31 +1,19 @@
|
|
|
<template>
|
|
|
<view class="content">
|
|
|
<scroll-view scroll-y class="left-aside">
|
|
|
- <view v-for="item in flist" :key="item.id" class="f-item b-b" :class="{ active: item.id === currentId }" @click="tabtap(item)">
|
|
|
- {{ item.cate_name }}
|
|
|
- </view>
|
|
|
+ <view v-for="(item,index) in flist" :key="item.id" class="f-item b-b" :class="{ active: index === currentId }" @click="tabtap(item,index)">{{ item.cate_name }}</view>
|
|
|
</scroll-view>
|
|
|
- <scroll-view scroll-with-animation scroll-y class="right-aside" @scroll="asideScroll" :scroll-top="tabScrollTop">
|
|
|
- <view v-for="item in flist" :key="item.id" class="s-list" :id="'main-' + item.id">
|
|
|
- <text class="s-item">{{ item.cate_name }}</text>
|
|
|
- <view class="t-list ">
|
|
|
- <view @click="navToList(item.id, titem.id)" class="t-item" v-for="titem in item.children" :key="titem.id">
|
|
|
- <view class="">
|
|
|
- <image :src="titem.pic"></image>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="titem-right">
|
|
|
- <text>{{ titem.cate_name }}<br><text>跨店联盟洗护专属礼包</text></text>
|
|
|
- <view class="titem-right-d">
|
|
|
- <view class="price">
|
|
|
- ￥138
|
|
|
- </view>
|
|
|
- <view class="button">
|
|
|
- 马上购
|
|
|
- </view>
|
|
|
- </view>
|
|
|
+ <scroll-view :scroll-with-animation="scrollAnimation" scroll-y class="right-aside" :scroll-top="tabScrollTop" @scrolltolower="getProductsList(flist[currentId])">
|
|
|
+ <view class="t-list ">
|
|
|
+ <view @click="navToList(item.id, titem.id)" class="t-item" v-for="titem in flist[currentId].list" :key="titem.id">
|
|
|
+ <view class=""><image :src="titem.pic"></image></view>
|
|
|
+
|
|
|
+ <view class="titem-right">
|
|
|
+ <text class="clamp">{{ titem.store_name }}</text>
|
|
|
+ <view class="titem-right-d">
|
|
|
+ <view class="price">￥{{ titem.price }}</view>
|
|
|
+ <view class="button">马上购</view>
|
|
|
</view>
|
|
|
-
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
@@ -34,7 +22,7 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import { getCategoryList } from '@/api/product.js';
|
|
|
+import { getCategoryList, getProducts } from '@/api/product.js';
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
@@ -42,6 +30,7 @@ export default {
|
|
|
tabScrollTop: 0,
|
|
|
currentId: 1,
|
|
|
flist: [],
|
|
|
+ scrollAnimation: true //是否开启动画
|
|
|
};
|
|
|
},
|
|
|
onLoad() {
|
|
|
@@ -55,86 +44,113 @@ export default {
|
|
|
},
|
|
|
methods: {
|
|
|
// 载入数据
|
|
|
- async loadData() {
|
|
|
+ loadData() {
|
|
|
let obj = this;
|
|
|
getCategoryList({})
|
|
|
.then(({ data }) => {
|
|
|
+ console.log(data);
|
|
|
obj.flist = data.map(function(s) {
|
|
|
+ s.list = []; //用于保存当前分类下商品对象的数据
|
|
|
+ s.loadingType = 'more'; //判断当前商品分类数据是否已经加载完毕
|
|
|
+ s.page = 1; //当前商品分类加载的商品页数
|
|
|
+ s.limit = 10; //每次家在数据加载的数据条数
|
|
|
return s;
|
|
|
});
|
|
|
+ // console.log(obj.flist,"123456789")
|
|
|
+ obj.currentId = 0;
|
|
|
+ obj.getProductsList(obj.flist[0]);
|
|
|
})
|
|
|
.catch(err => {
|
|
|
console.log(err);
|
|
|
});
|
|
|
},
|
|
|
- //一级分类点击
|
|
|
- tabtap(item) {
|
|
|
- console.log(item);
|
|
|
- // 判断有没有初始化页面高度对象数据
|
|
|
- if (!this.sizeCalcState) {
|
|
|
- this.calcSize();
|
|
|
- }
|
|
|
- // 获取当前点击的id
|
|
|
- this.currentId = item.id;
|
|
|
- this.tabScrollTop = item.top;
|
|
|
- },
|
|
|
- //右侧栏滚动
|
|
|
- asideScroll(e) {
|
|
|
- // 判断有没有初始化页面高度对象数据
|
|
|
- if (!this.sizeCalcState) {
|
|
|
- this.calcSize();
|
|
|
+ getProductsList(item, type = 'add') {
|
|
|
+ if (type === 'tabChange' && item.loaded === true) {
|
|
|
+ //tab切换只有第一次需要加载数据
|
|
|
+ return;
|
|
|
}
|
|
|
- let scrollTop = e.detail.scrollTop;
|
|
|
- let box = 0; //列表包裹框高度初始化
|
|
|
- let bottom = 10; //距离页面底部多少像素左侧列表切换到最后一个一级分类
|
|
|
- // 查询当前页面对象
|
|
|
- let view = uni.createSelectorQuery().select('.content');
|
|
|
- view.fields(
|
|
|
- {
|
|
|
- id: true,
|
|
|
- dataset: true,
|
|
|
- rect: true,
|
|
|
- size: true,
|
|
|
- scrollOffset: true
|
|
|
- },
|
|
|
- function(e) {
|
|
|
- // 保存包裹框高度
|
|
|
- box = e.height;
|
|
|
- }
|
|
|
- ).exec();
|
|
|
- // 获取所有距离顶部大于滚轮距离页面高度的所有分类
|
|
|
- let tabs = this.flist.filter(item =>( item.top-10) <= scrollTop).reverse();
|
|
|
- if (tabs.length > 0) {
|
|
|
- // 判断是否已经到达滚轮底部
|
|
|
- if (box + scrollTop + bottom >= e.detail.scrollHeight) {
|
|
|
- this.currentId = this.flist[this.flist.length - 1].id;
|
|
|
- } else {
|
|
|
- this.currentId = tabs[0].id;
|
|
|
- }
|
|
|
+ if (item.loadingType === 'noMore' || item.loadingType === 'loading') {
|
|
|
+ //防止重复加载
|
|
|
+ return;
|
|
|
}
|
|
|
- },
|
|
|
- //计算右侧栏每个tab的高度等信息
|
|
|
- calcSize() {
|
|
|
- let h = 0;
|
|
|
- this.flist.forEach(item => {
|
|
|
- let view = uni.createSelectorQuery().select('#main-' + item.id);
|
|
|
- view.fields(
|
|
|
- {
|
|
|
- size: true
|
|
|
- },
|
|
|
- data => {
|
|
|
- item.top = h;
|
|
|
- h += data.height;
|
|
|
- item.bottom = h;
|
|
|
- }
|
|
|
- ).exec();
|
|
|
+ item.loadingType = 'loading';
|
|
|
+ const obj = this;
|
|
|
+ const requestData = {
|
|
|
+ page: item.page,
|
|
|
+ limit: item.limit,
|
|
|
+ cid: item.id
|
|
|
+ };
|
|
|
+ return new Promise((ok, erro) => {
|
|
|
+ getProducts(requestData)
|
|
|
+ .then(({ data }) => {
|
|
|
+ item.list = item.list.concat(data);
|
|
|
+ item.page ++
|
|
|
+ if(item.limit != data.length){
|
|
|
+ item.loadingType = 'noMore'
|
|
|
+ }else {
|
|
|
+ item.loadingType = 'more'
|
|
|
+ }
|
|
|
+ this.$set(item, 'loaded', true);
|
|
|
+ obj.$nextTick(e => {
|
|
|
+ // 重新开启动画效果
|
|
|
+ uni.hideLoading();
|
|
|
+ // 数据加载完成后重新计算高度
|
|
|
+ obj.scrollAnimation = true;
|
|
|
+ });
|
|
|
+ ok(data);
|
|
|
+ })
|
|
|
+ .catch(err => {
|
|
|
+ erro(err);
|
|
|
+ console.log(err);
|
|
|
+ });
|
|
|
});
|
|
|
- this.sizeCalcState = true;
|
|
|
},
|
|
|
+ //一级分类点击
|
|
|
+ tabtap(item,index) {
|
|
|
+ let obj = this;
|
|
|
+ // 获取当前点击的id
|
|
|
+ this.currentId = index;
|
|
|
+ obj.getProductsList(item);
|
|
|
+ },
|
|
|
+ //右侧栏滚动
|
|
|
+ // asideScroll(e) {
|
|
|
+ // // 判断有没有初始化页面高度对象数据
|
|
|
+ // if (!this.sizeCalcState) {
|
|
|
+ // this.calcSize();
|
|
|
+ // }
|
|
|
+ // let scrollTop = e.detail.scrollTop;
|
|
|
+ // let box = 0; //列表包裹框高度初始化
|
|
|
+ // let bottom = 10; //距离页面底部多少像素左侧列表切换到最后一个一级分类
|
|
|
+ // // 查询当前页面对象
|
|
|
+ // let view = uni.createSelectorQuery().select('.content');
|
|
|
+ // view.fields(
|
|
|
+ // {
|
|
|
+ // id: true,
|
|
|
+ // dataset: true,
|
|
|
+ // rect: true,
|
|
|
+ // size: true,
|
|
|
+ // scrollOffset: true
|
|
|
+ // },
|
|
|
+ // function(e) {
|
|
|
+ // // 保存包裹框高度
|
|
|
+ // box = e.height;
|
|
|
+ // }
|
|
|
+ // ).exec();
|
|
|
+ // // 获取所有距离顶部大于滚轮距离页面高度的所有分类
|
|
|
+ // let tabs = this.flist.filter(item =>( item.top-10) <= scrollTop).reverse();
|
|
|
+ // if (tabs.length > 0) {
|
|
|
+ // // 判断是否已经到达滚轮底部
|
|
|
+ // if (box + scrollTop + bottom >= e.detail.scrollHeight) {
|
|
|
+ // this.currentId = this.flist[this.flist.length - 1].id;
|
|
|
+ // } else {
|
|
|
+ // this.currentId = tabs[0].id;
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // },
|
|
|
navToList(sid, tid) {
|
|
|
// 点击导航跳转到详细页面
|
|
|
uni.navigateTo({
|
|
|
- url: '/pages/product/list?fid='+this.currentId+'&sid='+sid+'&tid='+tid
|
|
|
+ url: '/pages/product/product?fid=' + this.currentId + '&sid=' + sid + '&tid=' + tid
|
|
|
});
|
|
|
}
|
|
|
}
|
|
|
@@ -155,8 +171,7 @@ page,
|
|
|
flex-shrink: 0;
|
|
|
width: 200rpx;
|
|
|
height: 100%;
|
|
|
- background-color: #F2F2F2;
|
|
|
-
|
|
|
+ background-color: #f2f2f2;
|
|
|
}
|
|
|
.f-item {
|
|
|
display: flex;
|
|
|
@@ -179,7 +194,7 @@ page,
|
|
|
transform: translateY(-50%);
|
|
|
height: 100%;
|
|
|
width: 4rpx;
|
|
|
- background-color: #1075FF;
|
|
|
+ background-color: #1075ff;
|
|
|
border-radius: 0 4px 4px 0;
|
|
|
opacity: 0.8;
|
|
|
}
|
|
|
@@ -222,7 +237,7 @@ page,
|
|
|
margin-top: 20rpx;
|
|
|
flex-shrink: 0;
|
|
|
display: flex;
|
|
|
- border-bottom: solid 1rpx #F2F2F2;
|
|
|
+ border-bottom: solid 1rpx #f2f2f2;
|
|
|
// justify-content: center;
|
|
|
// align-items: center;
|
|
|
// flex-direction: column;
|
|
|
@@ -238,11 +253,13 @@ page,
|
|
|
margin: 0 20rpx;
|
|
|
border-radius: 10rpx;
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
.titem-right {
|
|
|
+ width: 100%;
|
|
|
display: grid;
|
|
|
align-content: space-between;
|
|
|
text:nth-child(1) {
|
|
|
+ width: 100%;
|
|
|
color: #333333;
|
|
|
font-size: 32rpx;
|
|
|
}
|
|
|
@@ -253,13 +270,14 @@ page,
|
|
|
.titem-right-d {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
+ padding-right: 20rpx;
|
|
|
.price {
|
|
|
- color: #FB3A2F;
|
|
|
+ color: #fb3a2f;
|
|
|
font-size: 32rpx;
|
|
|
}
|
|
|
.button {
|
|
|
- background: linear-gradient(90deg, #438BED 0%, #44BFEC 100%);
|
|
|
- background-color: #438BED;
|
|
|
+ background: linear-gradient(90deg, #438bed 0%, #44bfec 100%);
|
|
|
+ background-color: #438bed;
|
|
|
height: 50rpx;
|
|
|
line-height: 50rpx;
|
|
|
border-radius: 25rpx;
|
|
|
@@ -268,7 +286,6 @@ page,
|
|
|
font-size: 25rpx;
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
}
|
|
|
}
|
|
|
</style>
|
