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

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

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

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

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