正常显示画面
正常显示的代码
<template>
<view class="">
<zhSlidingMenu ref='zhSlidingMenu' :tabbar="list" :scrollH="scrollH" :isTeg="false" >
<template #default="{scroll_list}">
<view class="goods">
<view class="goods_item" v-for="(item, index) in scroll_list" :key="index" @click="clickGoods(item)">
<view class=" font-lg">{{item.icon}}</view>
<view class="goods_item_name">{{item.name}}</view>
</view>
</view>
</template>
</zhSlidingMenu>
</view>
</template>报错代码
（代码只添加了 :class="{ 'selected-border': isSelected(item) }" ）
这个class生效了，点击view加边框。
<template>
<view class="">
<zhSlidingMenu ref='zhSlidingMenu' :tabbar="list" :scrollH="scrollH" :isTeg="false" >
<template #default="{scroll_list}">
<view class="goods">
<!-- :class="{ 'selected-border': selected(item) }" -->
<view class="goods_item" v-for="(item, index) in scroll_list"
:class="{ 'selected-border': isSelected(item) }"
:key="index" @click="clickGoods(item)">
<view class=" font-lg">{{item.icon}}</view>
<!-- <image class="goods_item_img" :src="item.icon" mode=""></image> -->
<view class="goods_item_name">{{item.name}}</view>
</view>
</view>
</template>
</zhSlidingMenu>
</view>
</template>
[{"children":[{"icon":"🍳","id":3,"name":"爱做饭"}],"name":"美食"},{"children":[{"icon":"👻","id":2,"name":"喜欢密室逃脱"},{"icon":"🎮","id":4,"name":"王者荣耀"},{"icon":"🎮","id":5,"name":"和平精英"}],"name":"游戏"},{"children":[{"icon":"🤣","id":1,"name":"搞笑女"}],"name":"个性"}]
错误提示文字
警报：[Component] generic "wx-scoped-slots-default" is not instantiated. The default component is used instead.
错误：vendor.js?t=wechat&s=1719317958046&v=8403e3a339746173cb0b449e6cc4a678:4519 [Vue warn]: Error in render: "TypeError: Cannot read property 'scroll_list' of undefined"
(found in pages/mine/datingProfile/tagCategory/tagCategory.vue)
错误：TypeError: Cannot read property 'scroll_list' of undefined
警报：[Component] More than one slot named "" are found inside a single component instance (in component "components/zh-slidingMenu/zhSlidingMenu/zhSlidingMenu"). The first one was accepted.
请求的数据：
[
{
"children": [
{
"icon": "🍳",
"id": 3,
"name": "爱做饭"
}
],
"name": "美食"
},
{
"children": [
{
"icon": "👻",
"id": 2,
"name": "喜欢密室逃脱"
},
{
"icon": "🎮",
"id": 4,
"name": "王者荣耀"
},
{
"icon": "🎮",
"id": 5,
"name": "和平精英"
}
],
"name": "游戏"
},
{
"children": [
{
"icon": "🤣",
"id": 1,
"name": "搞笑女"
}
],
"name": "个性"
}
]
完整代码
我的页面代码
<template>
<view class="">
<zhSlidingMenu ref='zhSlidingMenu' :tabbar="list" :scrollH="scrollH" :isTeg="false" >
<template #default="{scroll_list}">
<view class="goods">
<!-- :class="{ 'selected-border': selected(item) }" -->
<view class="goods_item" v-for="(item, index) in scroll_list"
:class="{ 'selected-border': isSelected(item) }"
:key="index" @click="clickGoods(item)">
<view class=" font-lg">{{item.icon}}</view>
<!-- <image class="goods_item_img" :src="item.icon" mode=""></image> -->
<view class="goods_item_name">{{item.name}}</view>
</view>
</view>
</template>
</zhSlidingMenu>
</view>
</template>
<script>
import zhSlidingMenu from '@/components/zh-slidingMenu/zhSlidingMenu/zhSlidingMenu.vue'
import { getTagList } from "@/api/app/tag"
export default {
components: {
zhSlidingMenu
},
data() {
return {
scrollH: 0, //scroll高度
list:[],
a:{'border': '2px solid #a1a1a1'},
selectedIndices: [], // 存储被选中项的索引
// list: [{
// name: "女装",
// children: [{
// name: "A字裙",
// icon: "https://cdn.uviewui.com/uview/common/classify/1/1.jpg",
// }
// ]
// },
// {
// name: "美食",
// children: [{
// name: "火锅",
// icon: "https://cdn.uviewui.com/uview/common/classify/2/1.jpg",
// },
// {
// name: "精品茗茶",
// icon: "https://cdn.uviewui.com/uview/common/classify/2/7.jpg",
// }
// ]
// },
// {name: "美妆",children: []}
// ],
}
},
created() {
getTagList().then(response => {
this.list = response.data;
console.log(this.list)
});
},
onLoad() {
uni.getSystemInfo({
success: (res) => {
this.scrollH = res.windowHeight
}
});
},
methods: {
clickGoods(item) { //点击商品
console.log(item);
const isAlreadySelected = this.selectedIndices.includes(item.id);
if (isAlreadySelected) {
this.selectedIndices = this.selectedIndices.filter(i => i !== item.id);
} else {
this.selectedIndices.push(item.id);
}
},
isSelected(item) {
return this.selectedIndices.includes(item.id);
}
},
}
</script>
<style lang="scss" scoped>
.selected-border {
border: 2px solid #a1a1a1; /* 蓝色边框 */
/* 可以添加其他样式，如边框半径等 */
}
.goods {
display: flex;
flex-wrap: wrap;
.goods_item {
width: 30%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
margin-top: 20rpx;
background: #fff;
height: 160rpx;
border-radius: 24rpx;
margin-left: 15rpx;
.goods_item_img {
width: 120rpx;
height: 120rpx;
}
.goods_item_name {
color: #333;
font-size: 28rpx;
font-weight: 500rpx;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
overflow: hidden;
word-break: break-all;
text-align: center;
}
}
}
</style>组件代码（略有小改，只是改了样式，其他并未改动）
<template>
<view class="content" :style="{'height': `${scrollH}px`}">
<view class="cont">
<scroll-view scroll-y scroll-with-animation class="cont_view menu-scroll-view" :scroll-top="scrollTop"
:scroll-into-view="itemId" :style="[menuLeft]">
<view v-for="(item,index) in tabbar" :key="index" class="menu_item"
:style="[menuLeftActive,current == index?menuLeftActivea:{}]" @tap.stop="swichMenu(index)">
<view class="menu_item_name">{{item[keyName]}}</view>
<view class="y_teg" :style="[{'background':tegColor}]" v-if="current == index && isTeg"></view>
</view>
</scroll-view>
<scroll-view :scroll-top="scrollRightTop" scroll-y scroll-with-animation :style="[menuRight]"
@scroll="rightScroll">
<view class="menu_right_view">
<view class="menu_right_item" :id="'item' + index" v-for="(item , index) in tabbar" :key="index">
<view class="menu_right_title">{{item[keyName]}}</view>
<view class="">
<slot :scroll_list='item[tabbarName]'></slot>
</view>
</view>
</view>
</scroll-view>
</view>
</view>
</template>
<script>
/*
* zhSlidingMenu 分类商品-单向联动 + 双向联动，支持自定义商品内容
* @property {Array} tabbar 分类数据
* @property {String} keyName 从tabbar元素对象中读取的键名
* @property {Number} scrollH scroll高度
* @property {Object} menuLeft 左侧样式
* @property {Object} menuLeftActive 左侧未选中样式
* @property {Object} menuLeftActivea 左侧选中样式
* @property {Object} menuRight 右侧样式
* @property {Object} tabbarName tabbar数组中指定对象的目标属性名
* @property {Boolean} isTeg 左侧竖条标记
* @property {String} tegColor 左侧竖条标记颜色
*/
export default {
props: {
tabbar: {
typeof: Array,
default: () => []
},
keyName: {
typeof: String,
default: () => 'name'
},
scrollH: {
typeof: Number,
default: () => 500
},
menuLeft: {
typeof: Object,
default: () => ({
'width': '200rpx',
// 'background': '#F5F5F5',
'background': '#fff',
})
},
menuLeftActive: {
typeof: Object,
default: () => ({
'color': '#333333',
'font-weight': '400',
'font-size': '30rpx',
})
},
menuLeftActivea: {
typeof: Object,
default: () => ({
'color': '#29B3FE',
'font-weight': '500',
'background': '#F5F5F5',
// 'background': '#fff',
})
},
menuRight: {
typeof: Object,
default: () => ({
background: '#fff',
})
},
tabbarName: {
typeof: String,
default: () => 'children'
},
isTeg:{
typeof: Boolean,
default: () => true
},
tegColor:{
typeof: String,
default: () => '#29B3FE'
}
},
data() {
return {
scrollTop: 0, //tab标题的滚动条位置
oldScrollTop: 0,
current: 0, // 预设当前项的值
menuHeight: 0, // 左边菜单的高度
menuItemHeight: 0, // 左边菜单item的高度
itemId: '', // 栏目右边scroll-view用于滚动的id
arr: [], //左侧菜单距离登录距离列表
scrollRightTop: 0, // 右边栏目scroll-view的滚动条高度
timer: null, // 定时器
}
},
mounted() {
this.getMenuItemTop()
},
methods: {
// 点击左边的栏目切换
async swichMenu(index) {
if (this.arr.length == 0) {
await this.getMenuItemTop();
}
if (index == this.current) return;
this.scrollRightTop = this.oldScrollTop;
this.$nextTick(() => {
this.scrollRightTop = this.arr[index];
this.current = index;
this.leftMenuStatus(index);
})
},
// 获取一个目标元素的高度
getElRect(elClass, dataVal) {
new Promise((resolve, reject) => {
const query = uni.createSelectorQuery().in(this);
query.select('.' + elClass).fields({
size: true
}, res => {
// 如果节点尚未生成，res值为null，循环调用执行
if (!res) {
setTimeout(() => {
this.getElRect(elClass);
}, 10);
return;
}
this[dataVal] = res.height;
resolve();
}).exec();
})
},
// 观测元素相交状态
async observer() {
this.tabbar.map((val, index) => {
let observer = uni.createIntersectionObserver(this);
// 检测右边scroll-view的id为itemxx的元素与right-box的相交状态
// 如果跟.right-box底部相交，就动态设置左边栏目的活动状态
observer.relativeTo('.right-box', {
top: 0
}).observe('#item' + index, res => {
if (res.intersectionRatio > 0) {
let id = res.id.substring(4);
this.leftMenuStatus(id);
}
})
})
},
// 设置左边菜单的滚动状态
async leftMenuStatus(index) {
this.current = index;
// 如果为0，意味着尚未初始化
if (this.menuHeight == 0 || this.menuItemHeight == 0) {
await this.getElRect('menu-scroll-view', 'menuHeight');
await this.getElRect('menu_item', 'menuItemHeight');
}
// 将菜单活动item垂直居中
this.scrollTop = index * this.menuItemHeight + this.menuItemHeight / 2 - this.menuHeight / 2;
},
// 获取右边菜单每个item到顶部的距离
getMenuItemTop() {
new Promise(resolve => {
let selectorQuery = uni.createSelectorQuery().in(this);
selectorQuery.selectAll('.menu_right_item').boundingClientRect((rects) => {
// 如果节点尚未生成，rects值为[](因为用selectAll，所以返回的是数组)，循环调用执行
if (!rects.length) {
setTimeout(() => {
this.getMenuItemTop();
}, 10);
return;
}
rects.forEach((rect) => {
// 这里减去rects[0].top，是因为第一项顶部可能不是贴到导航栏(比如有个搜索框的情况)
this.arr.push(rect.top - rects[0].top);
resolve();
})
}).exec()
})
},
// 右边菜单滚动
async rightScroll(e) {
this.oldScrollTop = e.detail.scrollTop;
if (this.arr.length == 0) {
await this.getMenuItemTop();
}
if (this.timer) return;
if (!this.menuHeight) {
await this.getElRect('menu-scroll-view', 'menuHeight');
}
setTimeout(() => { // 节流
this.timer = null;
// scrollHeight为右边菜单垂直中点位置
let scrollHeight = e.detail.scrollTop;
for (let i = 0; i < this.arr.length; i++) {
let height1 = this.arr[i];
let height2 = this.arr[i + 1];
// 如果不存在height2，意味着数据循环已经到了最后一个，设置左边菜单为最后一项即可
if (!height2 || scrollHeight >= height1 && scrollHeight < height2) {
this.leftMenuStatus(i);
return;
}
}
}, 10)
},
reset() { //父级重置
this.$nextTick(async () => {
await this.getMenuItemTop();
this.current = 0
this.scrollTop = 0
this.scrollRightTop = 0
})
}
}
}
</script>
<style lang="scss" scoped>
.content {
display: flex;
flex-direction: column;
.cont {
flex: 1;
display: flex;
overflow: hidden;
.cont_view {
height: 100%;
.menu_item {
position: relative;
padding: 24rpx 12rpx;
.menu_item_name {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
overflow: hidden;
text-align: center;
}
.y_teg {
width: 6upx;
height: 40upx;
border-radius: 3upx;
position: absolute;
left: 0%;
top: 50%;
z-index: 99;
transform: translate(0, -50%);
}
}
}
}
}
.menu_right_view {
padding: 24upx;
background-color: #F5F5F5;
.menu_right_item {
margin-bottom: 30rpx;
// height: 160rpx;
}
.menu_right_item:last-child {
min-height: 100vh;
}
}
.menu_right_title {
color: #29B3FE;
font-weight: bold;
font-size: 28rpx;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
overflow: hidden;
}
</style>
4681
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
