赞
踩
- <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>
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。