<template>
<view class="containar">
<!-- 案例分享 -->
<view class="typeAndList">
<scroll-view class="type" scroll-y="true" :style="{ height: wh + 'px' }">
<!-- <view class="type"> -->
<view class="typeItem" :class="checkId == item.id ? 'checked' : ''" v-for="item in typeList" :key="item.id"
@click="choose(item.id)">
<view class="active" v-show="checkId == item.id"></view>
<view class="item">{{ item.label }}</view>
</view>
<!-- </view> -->
</scroll-view>
<scroll-view scroll-y="true" class="list" :style="{ height: wh + 'px' }" :scroll-top="scrollTop">
<view class="typeItemBox" v-for="(item2, i2) in cateLevel2" :key="i2">
<view class="typeName">{{ item2.name }}</view>
<view class="boxList">
<view class="box" v-for="(item3, i3) in item2.children" :key="i3">
<view style="width: 162rpx;
height: 162rpx;border: 2rpx solid red;"></view>
<!-- <img src="@/static/imgs/mpbg.jpg" alt=""> -->
<view class="contBox">
<view class="title">{{ item3.name }}</view>
<view class="intro">{{ item3.detail }}</view>
<view class="btnBox">
<view class="btn">查看</view>
</view>
</view>
</view>
</view>
</view>
</scroll-view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
// 当前设备可用的高度
wh: 0,
scrollTop: 0,
typeList: [
{
label: '案例类型', id: '1',
children: [
{
name: '港珠澳大桥1',
children: [
{ name: '港珠澳大桥', detail: '这个项目非常好……' },
{ name: '港珠澳大桥', detail: '这个项目非常好……' },
]
},
]
},
{
label: '案例类型', id: '2',
children: [
{
name: '港珠澳大桥2',
children: [
{ name: '港珠澳大桥', detail: '这个项目非常好……' },
{ name: '港珠澳大桥', detail: '这个项目非常好……' },
{ name: '港珠澳大桥', detail: '这个项目非常好……' },
]
},
]
},
],
cateList: [],
// 二级分类的列表
cateLevel2: [],
checkId: "1"
}
},
methods: {
choose(id) {
this.checkId = id
this.typeList.forEach(item => {
if (item.id == id) {
this.cateLevel2 = item.children
}
});
this.scrollTop = this.scrollTop === 0 ? 1 : 0
console.log(this.cateLevel2);
},
getCateList() {
this.cateLevel2 = this.typeList[0].children
console.log(this.cateLevel2);
}
},
onLoad() {
const sysInfo = uni.getSystemInfoSync()
this.wh = sysInfo.windowHeight - 50
this.getCateList()
},
}
</script>
<style lang="less" scoped>
.containar {
.typeAndList {
display: flex;
justify-content: space-between;
.type {
width: 158rpx;
background: #f8f8f8;
border-radius: 0 25rpx 0 0;
.typeItem {
width: 100%;
height: 152rpx;
display: flex;
justify-content: space-between;
align-items: center;
color: #9a9a9a;
.active {
width: 8rpx;
height: 48rpx;
background: #294994;
}
.item {
width: 130rpx;
padding: 0 10rpx;
text-align: left;
height: 48rpx;
line-height: 48rpx;
font-size: 24rpx;
}
}
.checked {
background: #ffffff;
color: #302e27 !important;
}
}
.list {
width: 544rpx;
padding: 0 24rpx;
.typeItemBox {
.typeName {
padding: 18rpx 0;
color: #2d2e2e;
font-size: 24rpx;
position: sticky;
top: 0;
background: #ffffff;
}
.boxList {
.box {
width: 100%;
display: flex;
justify-content: start;
margin-bottom: 18rpx;
img {
width: 162rpx;
height: 162rpx;
border-radius: 25rpx;
}
.contBox {
width: 406rpx;
padding-left: 22rpx;
.title {
width: 100%;
overflow: hidden;
font-weight: 700;
font-size: 24rpx;
margin-bottom: 8rpx;
}
.intro {
color: #a9b7c8;
font-size: 22rpx;
height: 80rpx;
overflow: hidden;
}
.btnBox {
display: flex;
justify-content: flex-end;
.btn {
height: 36rpx;
padding: 0 10rpx;
text-align: center;
line-height: 36rpx;
font-size: 24rpx;
border-radius: 25rpx;
background: #294994;
color: #fff;
}
}
}
}
}
}
}
}
}
</style>
uniapp分类列表(简易)
于 2024-02-26 15:17:47 首次发布