xiongmao/pages/classification/classification.vue

<!-- 分类 -->
<template>
	<view class="wrap">

		<view class="header">
			<view class="header-bottom">
				<view class="search-bar">
					<image src="../../static/search-icon.png" mode="" class="search-icon"></image>
					<input type="text" value="" placeholder="西藏冬虫夏草  大红袍" placeholder-class="placeholder"
						class="search-input" />
					<button type="default" class="search-btn">搜索</button>
				</view>
			</view>
			<scroll-view scroll-x="true" class="classification-menu-list">
				<view class="classification-menu-item">
					<view class="classification-menu-item-box">
						<image src="../../static/classification-nav1.png" class="classification-menu-item-img"
							mode="heightFix">
						</image>
						节气优品
					</view>
				</view>
				<view class="classification-menu-item">
					<view class="classification-menu-item-box">
						<image src="../../static/classification-nav2.png" class="classification-menu-item-img"
							mode="heightFix">
						</image>
						区域良品
					</view>
				</view>
				<view class="classification-menu-item">
					<view class="classification-menu-item-box">
						<image src="../../static/classification-nav3.png" class="classification-menu-item-img"
							mode="heightFix">
						</image>
						传承佳品
					</view>
				</view>
				<view class="classification-menu-item">
					<view class="classification-menu-item-box">
						<image src="../../static/classification-nav4.png" class="classification-menu-item-img"
							mode="heightFix">
						</image>
						礼品心选
					</view>
				</view>
				<view class="classification-menu-item">
					<view class="classification-menu-item-box">
						<image src="../../static/classification-nav5.png" class="classification-menu-item-img"
							mode="heightFix">
						</image>
						膳食宝典
					</view>
				</view>
			</scroll-view>
		</view>

		<view class="wrap-container">
			<!--左侧栏-->
			<scroll-view class="nav_left" scroll-y="true">
				<view :class="{ 'active' : isActive === index }" class="child" v-for="(item,index) in navList"
					:key="index" @click="checked(index, item)">
					<view class="child-column">
						<text>{{item.title}}</text>
						<text>{{item.num}}</text>
					</view>
				</view>
			</scroll-view>
			<!-- <scroll-view class="nav_right" scroll-y="true" @scrolltolower="lower">
				<view class="swiper-box">
					<swiper class="swiper" :circular="true" autoplay="true" interval="2500" duration="500">
						<swiper-item v-for="(item,index) in swiperList" :key="index">
							<view class="swiper-item">
								<image :src="item" class="banner-img" mode="aspectFill" />
							</view>
						</swiper-item>
					</swiper>
				</view>
				<view class="list">
					<view class="item">
						<view class="item-top">
							地产本草 <text>323</text>
						</view>
						<view class="sub-list">
							<view class="sub-item">
								<image src="../../static/img-3.png" mode="heightFix"></image>
								当归
							</view>
							<view class="sub-item">
								<image src="../../static/img-3.png" mode="heightFix"></image>
								桂皮
							</view>
							<view class="sub-item">
								<image src="../../static/img-3.png" mode="heightFix"></image>
								桂皮
							</view>
							<view class="sub-item">
								<image src="../../static/img-3.png" mode="heightFix"></image>
								当归
							</view>
						</view>
					</view>
				</view>
			</scroll-view> -->

			<scroll-view class="product-list" scroll-y="true">
				<view class="product-item" @tap="productDetails">
					<image src="../../static/img-4.png" class="product-item-img" mode="aspectFill"></image>
					<view class="product-item-sidebar">
						<view class="product-item-name">冻干柠檬片 蜂蜜柠檬茶 保留鲜度96% 美白神器</view>
						<view class="product-item-column2-row-between">
							<view class="product-item-column2-price">
								￥394.00
								<text>￥34.00</text>
							</view>
							<button type="default" class="product-item-column2-btn">
								<image src="../../static/add-icon.png" mode=""></image>
							</button>
						</view>
					</view>
				</view>
				<view class="product-item" @tap="productDetails">
					<image src="../../static/img-4.png" class="product-item-img" mode="aspectFill"></image>
					<view class="product-item-sidebar">
						<view class="product-item-name">冻干柠檬片 蜂蜜柠檬茶 保留鲜度96% 美白神器</view>
						<view class="product-item-column2-row-between">
							<view class="product-item-column2-price">
								￥394.00
								<text>￥34.00</text>
							</view>
							<button type="default" class="product-item-column2-btn">
								<image src="../../static/add-icon.png" mode=""></image>
							</button>
						</view>
					</view>
				</view>
				<view class="product-item" @tap="productDetails">
					<image src="../../static/img-4.png" class="product-item-img" mode="aspectFill"></image>
					<view class="product-item-sidebar">
						<view class="product-item-name">冻干柠檬片 蜂蜜柠檬茶 保留鲜度96% 美白神器</view>
						<view class="product-item-column2-row-between">
							<view class="product-item-column2-price">
								￥394.00
								<text>￥34.00</text>
							</view>
							<button type="default" class="product-item-column2-btn">
								<image src="../../static/add-icon.png" mode=""></image>
							</button>
						</view>
					</view>
				</view>
				<view class="product-item" @tap="productDetails">
					<image src="../../static/img-4.png" class="product-item-img" mode="aspectFill"></image>
					<view class="product-item-sidebar">
						<view class="product-item-name">冻干柠檬片 蜂蜜柠檬茶 保留鲜度96% 美白神器</view>
						<view class="product-item-column2-row-between">
							<view class="product-item-column2-price">
								￥394.00
								<text>￥34.00</text>
							</view>
							<button type="default" class="product-item-column2-btn">
								<image src="../../static/add-icon.png" mode=""></image>
							</button>
						</view>
					</view>
				</view>
				<view class="product-item" @tap="productDetails">
					<image src="../../static/img-4.png" class="product-item-img" mode="aspectFill"></image>
					<view class="product-item-sidebar">
						<view class="product-item-name">冻干柠檬片 蜂蜜柠檬茶 保留鲜度96% 美白神器</view>
						<view class="product-item-column2-row-between">
							<view class="product-item-column2-price">
								￥394.00
								<text>￥34.00</text>
							</view>
							<button type="default" class="product-item-column2-btn">
								<image src="../../static/add-icon.png" mode=""></image>
							</button>
						</view>
					</view>
				</view>
				<view class="product-item" @tap="productDetails">
					<image src="../../static/img-4.png" class="product-item-img" mode="aspectFill"></image>
					<view class="product-item-sidebar">
						<view class="product-item-name">冻干柠檬片 蜂蜜柠檬茶 保留鲜度96% 美白神器</view>
						<view class="product-item-column2-row-between">
							<view class="product-item-column2-price">
								￥394.00
								<text>￥34.00</text>
							</view>
							<button type="default" class="product-item-column2-btn">
								<image src="../../static/add-icon.png" mode=""></image>
							</button>
						</view>
					</view>
				</view>
				<view class="product-item" @tap="productDetails">
					<image src="../../static/img-4.png" class="product-item-img" mode="aspectFill"></image>
					<view class="product-item-sidebar">
						<view class="product-item-name">冻干柠檬片 蜂蜜柠檬茶 保留鲜度96% 美白神器</view>
						<view class="product-item-column2-row-between">
							<view class="product-item-column2-price">
								￥394.00
								<text>￥34.00</text>
							</view>
							<button type="default" class="product-item-column2-btn">
								<image src="../../static/add-icon.png" mode=""></image>
							</button>
						</view>
					</view>
				</view>
			</scroll-view>

		</view>

		<!-- 底部tabbar组件 -->
		<tab-bar :current="1"></tab-bar>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				isActive: 0,
				navList: [{
					index: 0,
					title: '全部',
				}, {
					index: 1,
					title: '地产本草',
					num: '783'
				}, {
					index: 2,
					title: '地产本草',
					num: '33'
				}, {
					index: 3,
					title: '地产本草',
					num: '33'
				}, {
					index: 3,
					title: '地产本草',
					num: '33'
				}, {
					index: 3,
					title: '地产本草',
					num: '33'
				}, {
					index: 3,
					title: '地产本草',
					num: '33'
				}, {
					index: 3,
					title: '地产本草',
					num: '33'
				}, {
					index: 3,
					title: '地产本草',
					num: '33'
				}, {
					index: 3,
					title: '地产本草',
					num: '33'
				}, {
					index: 3,
					title: '地产本草',
					num: '33'
				}, {
					index: 3,
					title: '地产本草',
					num: '33'
				}, {
					index: 3,
					title: '地产本草',
					num: '33'
				}, {
					index: 3,
					title: '地产本草',
					num: '33'
				}, {
					index: 3,
					title: '地产本草',
					num: '33'
				}, {
					index: 3,
					title: '地产本草',
					num: '33'
				}, {
					index: 3,
					title: '地产本草',
					num: '33'
				}],

				//轮播
				swiperList: [
					'../../static/banner-2.png',
					'../../static/banner-2.png',
					'../../static/banner-2.png'
				],
			}
		},
		methods: {
			checked(index, item) {
				this.isActive = index;
			},
			//跳转商品详情
			productDetails(){
				uni.navigateTo({
					url: '../index/product-details/product-details'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	@import "./classification.css";
</style>