topnuomi
/
xx-applets
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改cate组件名称

This commit is contained in:
TOP糯米 2023-02-09 20:40:04 +08:00
parent b100ae86ee
commit 44dae598a1
6 changed files with 221 additions and 170 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

195
src/components/cate/cate.vue
View File

@ -1,16 +1,22 @@
<template> <template>
<view class="component-wrap" :style="{height: wrapHeight + 'px'}"> <view class="component-wrap" :style="{ height: wrapHeight + 'px' }">
<view class="component-menu-wrap"> <view class="component-menu-wrap">
<scroll-view scroll-y class="component-tab-view menu-scroll-view" :scroll-top="scrollTop" <scroll-view
:scroll-into-view="itemId"> scroll-y
class="component-tab-view menu-scroll-view"
:scroll-top="scrollTop"
:scroll-into-view="itemId"
>
<view <view
class="component-tab-item" class="component-tab-item"
v-for="(item, index) in data" v-for="(item, index) in data"
:key="index" :key="index"
:class="[current == index ? 'component-tab-item-active' : '']" :class="[
current == index ? 'component-tab-item-active' : '',
]"
@tap.stop="swichMenu(index)" @tap.stop="swichMenu(index)"
> >
<text class="component-line-1">{{item.name}}</text> <text class="component-line-1">{{ item.name }}</text>
</view> </view>
</scroll-view> </scroll-view>
<scroll-view <scroll-view
@ -20,16 +26,31 @@
class="right-box" class="right-box"
@scroll="rightScroll" @scroll="rightScroll"
> >
<view class="page-view"> <view class="page-view" :class="[cateType]">
<view <view
class="class-item" class="class-item"
v-for="(item, index) in data" v-for="(item, index) in data"
:id="'item' + index" :id="'item' + index"
:key="index" :key="index"
:style="{height: (index == data.length - 1 ? (cateType == 'parent' ? 'calc(100vh - 70rpx)' : '100vh') : 'auto')}" :style="{
height:
index == data.length - 1
? cateType == 'cate'
? 'calc(100vh - 70rpx)'
: '100vh'
: 'auto',
}"
> >
<parent-tmpl v-if="cateType === 'parent'" :data="item" @clickParent="clickParent"></parent-tmpl> <cate-tmpl
<child-tmpl v-if="cateType === 'child'" :data="item" @clickChild="clickChild"></child-tmpl> v-if="cateType === 'cate'"
:data="item"
@clickCate="clickCate"
></cate-tmpl>
<list-tmpl
v-if="cateType === 'list'"
:data="item"
@clickItem="clickItem"
></list-tmpl>
</view> </view>
</view> </view>
</scroll-view> </scroll-view>
@ -38,8 +59,8 @@
</template> </template>
<script> <script>
import ParentTmpl from "@/components/cate/template/parent" import CateTmpl from "@/components/cate/template/cate";
import ChildTmpl from "@/components/cate/template/child" import ListTmpl from "@/components/cate/template/list";
export default { export default {
name: "component-cate", name: "component-cate",
data() { data() {
@ -54,25 +75,25 @@ export default {
scrollRightTop: 0, // 右边栏目scroll-view的滚动条高度 scrollRightTop: 0, // 右边栏目scroll-view的滚动条高度
timer: null, // 定时器 timer: null, // 定时器
wrapHeight: 0, wrapHeight: 0,
} };
}, },
props: { props: {
cateType: { cateType: {
type: String, type: String,
default: "parent" default: "cate",
}, },
offsetHeight: { offsetHeight: {
type: Number, type: Number,
default: 0 default: 0,
}, },
data: { data: {
type: Array, type: Array,
default: [] default: [],
} },
}, },
components: { components: {
ParentTmpl, CateTmpl,
ChildTmpl ListTmpl,
}, },
created() {}, created() {},
mounted() { mounted() {
@ -89,40 +110,49 @@ export default {
getElRect(elClass, dataVal) { getElRect(elClass, dataVal) {
new Promise((resolve, reject) => { new Promise((resolve, reject) => {
const query = uni.createSelectorQuery().in(this); const query = uni.createSelectorQuery().in(this);
query.select('.' + elClass).fields({ query
size: true .select("." + elClass)
}, res => { .fields(
// 如果节点尚未生成，res值为null，循环调用执行 {
if (!res) { size: true,
this.getElRect(elClass); },
return; (res) => {
} // 如果节点尚未生成，res值为null，循环调用执行
this[dataVal] = res.height; if (!res) {
resolve(); this.getElRect(elClass);
}).exec(); return;
}) }
this[dataVal] = res.height;
resolve();
}
)
.exec();
});
}, },
/** /**
* 获取右边菜单每个item到顶部的距离 * 获取右边菜单每个item到顶部的距离
* 储存到 arr 数组里面用于后面滚动判断 * 储存到 arr 数组里面用于后面滚动判断
*/ */
getMenuItemTop() { getMenuItemTop() {
new Promise(resolve => { new Promise((resolve) => {
let selectorQuery = uni.createSelectorQuery().in(this); let selectorQuery = uni.createSelectorQuery().in(this);
selectorQuery.selectAll('.class-item').boundingClientRect((rects) => { selectorQuery
// 如果节点尚未生成，rects值为[](因为用selectAll，所以返回的是数组)，循环调用执行 .selectAll(".class-item")
if(!rects.length) { .boundingClientRect((rects) => {
this.getMenuItemTop(); // 如果节点尚未生成，rects值为[](因为用selectAll，所以返回的是数组)，循环调用执行
return ; if (!rects.length) {
} this.getMenuItemTop();
rects.forEach((rect) => { return;
// 视情况而定，这里减去rects[0].top，是因为第一项顶部可能不是贴到导航栏(比如有个搜索框的情况) }
this.arr.push(rect.top - rects[0].top); rects.forEach((rect) => {
// this.arr.push(rect.top) // 视情况而定，这里减去rects[0].top，是因为第一项顶部可能不是贴到导航栏(比如有个搜索框的情况)
resolve(); this.arr.push(rect.top - rects[0].top);
// this.arr.push(rect.top)
resolve();
});
}) })
}).exec() .exec();
}) });
}, },
/** /**
* 观测元素相交状态 * 观测元素相交状态
@ -132,15 +162,17 @@ export default {
async observer() { async observer() {
this.data.map((val, index) => { this.data.map((val, index) => {
let observer = uni.createIntersectionObserver(this); let observer = uni.createIntersectionObserver(this);
observer.relativeTo('.right-box', { observer
top: 0 .relativeTo(".right-box", {
}).observe('#item' + index, res => { top: 0,
if (res.intersectionRatio > 0) { })
let id = res.id.substring(4); .observe("#item" + index, (res) => {
this.leftMenuStatus(id); if (res.intersectionRatio > 0) {
} let id = res.id.substring(4);
}) this.leftMenuStatus(id);
}) }
});
});
}, },
/** /**
* 设置左边菜单的滚动状态 * 设置左边菜单的滚动状态
@ -150,27 +182,30 @@ export default {
this.current = index; this.current = index;
// 如果为0，意味着尚未初始化 // 如果为0，意味着尚未初始化
if (this.menuHeight == 0 || this.menuItemHeight == 0) { if (this.menuHeight == 0 || this.menuItemHeight == 0) {
await this.getElRect('menu-scroll-view', 'menuHeight'); await this.getElRect("menu-scroll-view", "menuHeight");
await this.getElRect('component-tab-item', 'menuItemHeight'); await this.getElRect("component-tab-item", "menuItemHeight");
} }
// 将菜单活动item垂直居中 // 将菜单活动item垂直居中
this.scrollTop = index * this.menuItemHeight + this.menuItemHeight / 2 - this.menuHeight / 2; this.scrollTop =
index * this.menuItemHeight +
this.menuItemHeight / 2 -
this.menuHeight / 2;
}, },
/** /**
* 点击左边的栏目切换 * 点击左边的栏目切换
* @index 传入的 ID * @index 传入的 ID
*/ */
async swichMenu(index) { async swichMenu(index) {
if(this.arr.length == 0) { if (this.arr.length == 0) {
await this.getMenuItemTop(); await this.getMenuItemTop();
} }
if (index == this.current) return; if (index == this.current) return;
this.scrollRightTop = this.oldScrollTop; this.scrollRightTop = this.oldScrollTop;
this.$nextTick(function(){ this.$nextTick(function () {
this.scrollRightTop = this.arr[index]; this.scrollRightTop = this.arr[index];
this.current = index; this.current = index;
this.leftMenuStatus(index); this.leftMenuStatus(index);
}) });
}, },
/** /**
* 右边菜单滚动 * 右边菜单滚动
@ -178,11 +213,11 @@ export default {
*/ */
async rightScroll(e) { async rightScroll(e) {
this.oldScrollTop = e.detail.scrollTop; this.oldScrollTop = e.detail.scrollTop;
if(this.arr.length == 0) { if (this.arr.length == 0) {
await this.getMenuItemTop(); await this.getMenuItemTop();
} }
if(!this.menuHeight) { if (!this.menuHeight) {
await this.getElRect('menu-scroll-view', 'menuHeight'); await this.getElRect("menu-scroll-view", "menuHeight");
} }
// scrollHeight为右边菜单垂直中点位置 // scrollHeight为右边菜单垂直中点位置
// let scrollHeight = e.detail.scrollTop + this.menuHeight / 2; // let scrollHeight = e.detail.scrollTop + this.menuHeight / 2;
@ -191,18 +226,21 @@ export default {
for (let i = 0; i < this.arr.length; i++) { for (let i = 0; i < this.arr.length; i++) {
let height1 = this.arr[i]; let height1 = this.arr[i];
let height2 = this.arr[i + 1]; let height2 = this.arr[i + 1];
if (!height2 || scrollHeight >= height1 && scrollHeight < height2) { if (
!height2 ||
(scrollHeight >= height1 && scrollHeight < height2)
) {
this.leftMenuStatus(i); this.leftMenuStatus(i);
return ; return;
} }
} }
}, },
clickParent(id) { clickCate(id) {
this.$emit('clickParent', id); this.$emit("clickCate", id);
},
clickItem(id) {
this.$emit("clickItem", id);
}, },
clickChild(id) {
this.$emit('clickChild', id);
}
}, },
}; };
</script> </script>
@ -224,7 +262,7 @@ export default {
.component-tab-view { .component-tab-view {
width: 200rpx; width: 200rpx;
height: 100%; height: 100%;
background-color: #F6F6F6; background-color: #f6f6f6;
} }
.component-tab-item { .component-tab-item {
height: 100rpx; height: 100rpx;
@ -233,19 +271,19 @@ export default {
display: flex; display: flex;
align-items: center; align-items: center;
font-size: 24rpx; font-size: 24rpx;
color: #8B8B8B; color: #8b8b8b;
font-weight: 400; font-weight: 400;
line-height: 1; line-height: 1;
} }
.component-tab-item-active { .component-tab-item-active {
position: relative; position: relative;
color: #4B65ED; color: #4b65ed;
background: #FFFFFF; background: #ffffff;
} }
.component-tab-item-active::before { .component-tab-item-active::before {
content: ""; content: "";
position: absolute; position: absolute;
border-left: 4px solid #4B65ED; border-left: 4px solid #4b65ed;
height: 24rpx; height: 24rpx;
left: 0; left: 0;
top: 38rpx; top: 38rpx;
@ -256,9 +294,12 @@ export default {
.right-box { .right-box {
width: 550rpx; width: 550rpx;
} }
.page-view { .page-view.cate {
padding-right: 16rpx; padding-right: 16rpx;
} }
.page-view.list {
padding-right: 0;
}
.class-item { .class-item {
background-color: #ffffff; background-color: #ffffff;
padding: 36rpx 32rpx 0 32rpx; padding: 36rpx 32rpx 0 32rpx;

21
src/components/cate/template/parent.vue → src/components/cate/template/cate.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<view> <view>
<view class="item-title"> <view class="item-title">
<text>{{data.name}}</text> <text>{{ data.name }}</text>
</view> </view>
<view class="item-container"> <view class="item-container">
<view <view
@ -10,8 +10,12 @@
:key="index1" :key="index1"
@click="clickItem(child.id, child.name)" @click="clickItem(child.id, child.name)"
> >
<image class="item-menu-image" :src="child.icon" mode=""></image> <image
<view class="item-menu-name">{{child.name}}</view> class="item-menu-image"
:src="child.icon"
mode=""
></image>
<view class="item-menu-name">{{ child.name }}</view>
</view> </view>
</view> </view>
</view> </view>
@ -19,14 +23,14 @@
<script> <script>
export default { export default {
name: "component-cate-template-parent", name: "component-cate-template-cate",
data() { data() {
return {}; return {};
}, },
props: { props: {
data: { data: {
type: Object, type: Object,
default: [] default: [],
}, },
}, },
components: {}, components: {},
@ -35,14 +39,13 @@ export default {
destroyed() {}, destroyed() {},
methods: { methods: {
clickItem(id, name) { clickItem(id, name) {
this.$emit('clickParent', id); this.$emit("clickCate", id);
} },
}, },
}; };
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.item-title { .item-title {
font-size: 26rpx; font-size: 26rpx;
color: #010101; color: #010101;
@ -69,7 +72,7 @@ export default {
height: 120rpx; height: 120rpx;
box-sizing: border-box; box-sizing: border-box;
border-radius: 20rpx; border-radius: 20rpx;
border: 2rpx solid #D8D8D8; border: 2rpx solid #d8d8d8;
} }
.item-menu-name { .item-menu-name {
margin-top: 15rpx; margin-top: 15rpx;

79
src/components/cate/template/child.vue
View File

@ -1,79 +0,0 @@
<template>
<view>
<view class="item-title">
<text>{{data.name}}</text>
</view>
<view class="item-container">
<view
class="thumb-box"
v-for="(child, index1) in data.child"
:key="index1"
@click="clickItem(child.id, child.name)"
>
<image class="item-menu-image" :src="child.icon" mode=""></image>
<view class="item-menu-name">{{child.name}}</view>
</view>
</view>
</view>
</template>
<script>
export default {
name: "component-cate-template-child",
data() {
return {};
},
props: {
data: {
type: Object,
default: []
},
},
components: {},
created() {},
mounted() {},
destroyed() {},
methods: {
clickItem(id, name) {
this.$emit('clickParent', id);
}
},
};
</script>
<style lang="less" scoped>
.item-title {
font-size: 26rpx;
color: #8B8B8B;
font-weight: bold;
}
.item-container {
display: flex;
flex-wrap: wrap;
}
.thumb-box {
width: 100%;
display: flex;
justify-content: flex-start;
flex-direction: column;
margin-top: 40rpx;
margin-right: 40rpx;
}
.thumb-box:nth-child(3n) {
margin-right: 0;
}
.item-menu-image {
width: 120rpx;
height: 120rpx;
box-sizing: border-box;
border-radius: 20rpx;
border: 2rpx solid #D8D8D8;
}
.item-menu-name {
margin-top: 15rpx;
font-weight: normal;
color: #333333;
font-size: 24rpx;
}
</style>

81
src/components/cate/template/list.vue Normal file
View File

@ -0,0 +1,81 @@
<template>
<view>
<view class="item-title">
<text>{{ data.name }}</text>
</view>
<view class="item-container">
<view
class="thumb-box"
v-for="(child, index1) in data.child"
:key="index1"
@click="clickItem(child.id, child.name)"
>
<image
class="item-menu-image"
mode="aspectFill"
:src="child.icon"
></image>
<view class="item-menu-name">{{ child.name }}</view>
</view>
</view>
</view>
</template>
<script>
export default {
name: "component-cate-template-list",
data() {
return {};
},
props: {
data: {
type: Object,
default: [],
},
},
components: {},
created() {},
mounted() {},
destroyed() {},
methods: {
clickItem(id, name) {
this.$emit("clickItem", id);
},
},
};
</script>
<style lang="less" scoped>
.item-title {
font-size: 26rpx;
color: #8b8b8b;
font-weight: bold;
}
.item-container {
display: flex;
flex-wrap: wrap;
.thumb-box {
width: 100%;
display: flex;
justify-content: flex-start;
flex-direction: column;
margin-top: 40rpx;
}
.thumb-box:nth-child(3n) {
margin-right: 0;
}
.item-menu-image {
width: 120rpx;
height: 120rpx;
box-sizing: border-box;
border-radius: 20rpx;
border: 2rpx solid #d8d8d8;
}
.item-menu-name {
margin-top: 15rpx;
font-weight: normal;
color: #333333;
font-size: 24rpx;
}
}
</style>

13
src/pages/service/cate.vue
View File

@ -15,7 +15,12 @@
</view> </view>
</view> </view>
<view class="cate"> <view class="cate">
<app-cate :offsetHeight="60" :data="data" cateType="parent" @clickParent="clickParent" /> <app-cate
:offsetHeight="60"
:data="data"
cateType="cate"
@clickCate="clickCate"
/>
</view> </view>
</app-layout> </app-layout>
</template> </template>
@ -91,11 +96,11 @@ export default {
onReachBottom() {}, onReachBottom() {},
onPullDownRefresh() {}, onPullDownRefresh() {},
methods: { methods: {
clickParent(id) { clickCate(id) {
uni.navigateTo({ uni.navigateTo({
url: '/pages/service/list?id=' + id url: "/pages/service/list?id=" + id,
}); });
} },
}, },
}; };
</script> </script>

2
src/pages/service/list.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<app-layout btnType="back" title="服务列表" pageBackgroundColor="#FFFFFF"> <app-layout btnType="back" title="服务列表" pageBackgroundColor="#FFFFFF">
<view class="cate"> <view class="cate">
<app-cate :offsetHeight="0" :data="data" cateType="child" /> <app-cate :offsetHeight="0" :data="data" cateType="list" />
</view> </view>
</app-layout> </app-layout>
</template> </template>