uniapp微信小程序商品分类

最新推荐文章于 2024-02-26 15:17:47 发布

额12138

最新推荐文章于 2024-02-26 15:17:47 发布

阅读量475

点赞数

分类专栏： uniapp 文章标签：微信小程序前端

本文链接：https://blog.csdn.net/mengmeng12138/article/details/125746125

版权

uniapp 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<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>

样式仅供参考，有多处自定义样式
我的接口请求回来的数据格式是这样的
在这里插入图片描述