<template>
<view class="content">
<!-- 大类 -->
<view class="bg-fff tabtop">
<view class="m-015">
<scroll-view scroll-x="true" class="scroll-tap text-center">
<view class=" ">
<view class="scroll-tab-item rounded" v-for="(item ,index) in wasteClass_item" :key="index"
:class="{'active':Inv==index}" @click="changeTab(index)">
<view class="flex flex-column align-center justify-center text-center">
<view class="scroll-tab-icon ">
<image class="w-100 h-100" :src="item.image" mode=""></image>
</view>
<view class="scroll-tab-text">{{item.name}}</view>
</view>
</view>
</view>
</scroll-view>
</view>
</view>
<!-- 大类的子集 -->
<view class="bg-fff tabbottom">
<view class="m-015">
<view class="tabbottom-item flex flex-wrap">
<view class=" tabbottom-list rounded position-relative" v-for="( items , index) in child"
:key="index">
<view class="flex align-center justify-around">
<view class="pic-box">
<image class="w-100 h-100" :src="items.image" mode=""></image>
</view>
<view class="text-box">
<view class="text-title">{{items.name}}</view>
<view class="text-description">实物为准</view>
</view>
</view>
<view class="tabbottom-xuan position-absolute">
<view class=" tabbottom-xuan-checked flex align-center justify-center rounded-2">
<text>√</text>
</view>
<view class=" tabbottom-xuan-cancel flex align-center justify-center rounded-2">
<text>×</text>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
import { BASE_URL, API_URL } from '@/env.js';
export default {
data() {
return {
Inv: 0,
wasteClass_item: [],
child: []
}
},
onLoad() {
this.wasteClass()
},
methods: {
changeTab(index) {
this.Inv = index
this.child = this.wasteClass_item[index].children
console.log(this.child)
},
wasteClass() {
let that = this
uni.request({
url: API_URL + '请求的接口地址',
method: 'GET',
success(res) {
console.log(res)
that.wasteClass_item = res.data.data
that.child = res.data.data[0].children
}
})
}
}
}
</script>
<style>
.tabtop{margin-top:10px;padding:20px 0 9px}
.tabbottom{margin-top:10px}
.scroll-tap{white-space:nowrap}
.scroll-tab-item{display:inline-block;margin-right:10px;padding:6px 30px;border:2px solid #000}
.active{background:linear-gradient(to right,#52e0a3,#0fe9c4);border-image:linear-gradient(to right,#52e0a3,#0fe9c4)}
.scroll-tab-item:last-child{margin-right:0}
.scroll-tab-text{font-size:13px}
.scroll-tab-icon{width:43rpx;height:39rpx}
.tabbottom-item{padding:12px 0 17px}
.tabbottom-list{border:2px solid #000;padding:11px 11px 21px 9px;margin-bottom:10px;margin-right:5px}
.pic-box{width:30px;height:40px}
.text-box{margin-left:8px}
.text-title{font-size:14px}
.text-description{font-size:12px;color:#666;margin-top:10px}
.tabbottom-xuan{top:-13%;right:-8%}
.tabbottom-xuan-checked{width:20px;height:20px;background:linear-gradient(to right,#52e0a3,#0fe9c4)}
.tabbottom-xuan-cancel{width:20px;height:20px;background:#eee}
</style>
样式仅供参考,有多处自定义样式
我的接口请求回来的数据格式是这样的