Uniapp项目—商城分类页

Uniapp项目—商城分类页

---

如图：

 

具体代码：

<template>
	<view>
		<view @click="aaa" class="search">
			<view class="input">
				<image src="../../../static/index/search.png"></image>
			</view>
		</view>
		<view class="classification">

			<view class="left">
				<scroll-view class="leftScroll" style="height: 100vh;" :scroll-top="scrollTop" scroll-y="true">
					<view :class="{type1:true, current:(index1 === i)}" :style="{lineHeight: type1LineHeight, fontSize: type1Size, height: type1Height, color: selected(i)}"
					 v-for="(item,i) in listRight" :key="i" @click="changeType1(item,i)">{{item.title}}</view>
				</scroll-view>
			</view>
			<view class="right">
				<scroll-view class="rightScroll" style="height: 100vh;" :scroll-top="scrollTop" scroll-y="true">
					<view class="type2" >
						<!-- <p :style="{fontSize: type2Size}">{{ item2.title }}</p>	 -->
						<view class="type3Box">
							<view class="type3" v-for="(item1,i1) in data2" :key="i1" @click="detail(item1)">
								<image class="icon" mode="aspectFill" lazy-load="true" :src="item1.image"></image>
								<text :style="{fontSize: type3Size}">{{item1.title}}</text>
							</view>
						</view>
					</view>
					<uni-load-more :status="loadingType"></uni-load-more>
				</scroll-view>	
				
			</view>			
		</view>
	</view>
</template>

<script>
	import {getPage} from "@/http/api.js"
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	import {
		listing
	} from '../../../api/api.js'
	import {
		getTypeProduct
	} from '../../../api/type.js'
	import kScrollView from '@/components/k-scroll-view/k-scroll-view.vue';
	export default {
		props: {
			index: {
				type: Number,
				default: 0
			},
			selectedColor: {
				type: String,
				default: "#675cff"
			},
			type1Size: {
				type: String,
				default: "14px"
			},
			type2Size: {
				type: String,
				default: "14px"
			},
			type3Size: {
				type: String,
				default: "10px"
			},
			type1Height: {
				type: String,
				default: "90rpx"
			},
			type1LineHeight: {
				type: String,
				default: "90rpx"
			}
		},
		data() {
			return {
				scrollTop: 0,
				data1: [], // 用来存储传来的数据
				index1: 2, // 标识当前选中的type1
				data2: [], // 用来存储当前选中的type2数据
				color: "", // 用来存储选中type1的颜色
				load: 0, // 用来判断是否是第一次加载数据
				listRight: [],
				loadingType: 'nomore' ,//加载更多状态
				current_page : 0,
				pageList : [],
				isFinish : false
			}
		},
		onLoad() {
			listing(getTypeProduct).then(res => { // 请求商品数据
				// console.log(res.data.data)
				this.listRight = res.data.data
				// console.log(this.listRight[0])
			})
			console.log(this.pageList)
		},
		onShow() {
			this.getListPage(1)
		},
		mounted() {

		},
		onPullDownRefresh() {
			this.isFinish = false;
			this.current_page = 0;
			this.pageList = [];
			this.getListPage(1);
			// 关闭loading
			setTimeout(()=>{
				uni.stopPullDownRefresh();
			}, 1000)
		},
		beforeUpdate() {
			if (this.load == 0) {
				// 判断是不是首次加载
				// 如果是将传入的值初始化到本地
				this.index1 = this.index
				this.data1 = this.listRight
				this.color = this.selectedColor
				// console.log("这个时候的数据",this.listRight[2])
				this.changeType1(this.data1[this.index1], this.index1)
				// console.log(this.data1[this.index1],this.index1)
				this.load++
			}
			// 如果不是则不执行操作				
		},
		methods: {
			async getListPage(page) {
				if (this.isFinish) {
					return false;
				}
				let data = await getPage({
					page
				})
				// 赋值当前查询到的列表数据
				
				this.pageList = [...this.pageList, ...data.data.data]
				// 更新当前页码
				this.current_page =  data.data.current_page
				if (this.current_page >= data.data.last_page) {
					// 加载完了
					this.isFinish = true;
				}
			},
			onReachBottom() {
				// console.log("上滑动");
				this.getListPage(this.current_page + 1)
				// more = contentdown: "上拉显示更多",
				// loading =contentrefresh: "正在加载...",
				// nomore = contentnomore: "没有更多数据了"
				// 在此进行上拉刷新的业务逻辑

			},
			detail(item){
				this.$jump('/pages/goods/detail/detail?text='+item.title+'&src='+item.image+'&id='+item.id)
			},
			aaa(e) {
				this.$jump('/pages/search/search')
			},
			changeType1(item, index) {
				// console.log("现在的index",index)
				this.index1 = index
				if (item === undefined || item === null || item.product === undefined || item.product === null) {
					// console.log("该内容为空！")
					this.data2 = ['暂无数据']
				} else
					this.data2 = item.product
				// console.log(item.product)
			},
			selectType1(i, i1) {
				this.$emit("selectType", this.index1, i, i1)
			},
			// 更换颜色
			selected: function(val) {
				return (val === this.index1 ? this.selectedColor + " !important" : "")
			},
			carlist(item) {
				this.$jump('/pages/goods/detail/detail?id=' + item)
				console.log(item)
			},
		}
	}
</script>

<style lang="less" scoped>
	.search image {
		height: 50rpx;
		width: 50rpx;
		position: absolute;
		left: 15rpx;
	}

	.search {
		width: 100%;
		display: flex;
		flex-direction: row;
		line-height: 50rpx;
		height: 50rpx;
		font-size: 40rpx;
	}

	.input {
		width: 100%;
		background-color: #e8e8e8;
		border-radius: 40rpx;
	}

	.classification {
		display: flex;
		justify-content: space-between;
		width: 100%;
		height: 100%;
		background-color: #F8F8F8;

		/* 隐藏滚动条 */
		::-webkit-scrollbar {
			display: none;
			width: 0 !important;
			height: 0 !important;
			-webkit-appearance: none;
			background: transparent;
		}

		.left {
			width: 160rpx;
			background-color: #fff;

			.type1 {
				width: 158rpx;
				height: 90rpx;
				line-height: 90rpx;
				text-align: center;
				font-size: 14px;
			}

			.current {
				color: #ff852a;
				background-color: #F8F8F8;
			}
		}

		.right {
			float: right;
			width: 520rpx;
			margin-right: 30rpx;

			.type2 {
				p {
					margin: 46rpx 0 26rpx 0;
					font-size: 14px;
				}

				.type3Box {
					width: 100%;
					height: auto;
					border-radius: 28rpx;
					background-color: #fff;
					display: flex;
					flex-wrap: wrap;
					padding-top: 36rpx;
					margin-bottom: 36rpx;

					.type3 {
						margin: 0 36rpx 36rpx 36rpx;

						.icon {
							width: 180rpx;
							height: 180rpx;
							display: block;
						}

						text {
							padding: 18rpx 0;
							display: block;
							width: 100rpx;
							font-size: 10px;
							overflow: hidden;
							text-align: center;
						}
					}
				}
			}
		}
	}
</style>