基于vue.js的跨平台框架 uni-app商城 毕业设计（2）分类

vue页面代码

<template>
<view >
	<view class="fenlei" :style="'height: '+gaodu+'px;'">
		
		<view class="zuo" :style="'height: '+gaodu+'px;'">
			
			<view class="xiangmu " v-for="fl in fenlei" @click="Xuanze(fl.id)"
				:class="fl.id==curFenlei ? ' xuanzhong ' : '' " >
				{
     {
     fl.name}}
			</view>
			
		</view>
		
		<scroll-view scroll-y  class="you" :style="'height: '+gaodu+'px;'" @scrolltolower="bottom">
			<!--最新产品 列表（1行2列流式布局）-->
			<view class="cp_zuixin">
				<navigator url="" class="cp_xiangmu2"
					v-for="cp in chanpin" >
					<image :src="cp.cp_tupian" mode="widthFix"  class="cp_tupian"></image>
					<view class="cp_biaoti">{
     {
     cp.cp_mingcheng}}</view>
					<view class="cp_jiage">￥ {
     {
     cp.jiage}}</view>
				</navigator>			
			</view>
		</scroll-view>
		
	</view>
</view>
</template>

<script>
	export default {
     
		data() {
     
			return {
     
				gaodu:0,
				fenlei:[],
				chanpin:[],
				page_kaishi:0,
				page_zong:0,
				curFenlei:0				
			}
		},
		onLoad() {
     
			uni.getSystemInfo({
     
				success: (res) => {
     
					this.gaodu = res.windowHeight
				}
			})
			
			
			//http://phpshop.yaoyiwangluo.com/wx_fenlei.php
			uni.request({
     
				url:this.$WebURL.WebUrl.phpweb + "/wx_fenlei.php",
				success: (res) => {
     
					this.fenlei = res.data
				}
			})
			
			//http://phpshop.yaoyiwangluo.com/wx_fenlei_chanpin.php
			//http://phpshop.yaoyiwangluo.com/wx_api_CpList_All.php
			uni.request({
     
				url:this.$WebURL.WebUrl.phpweb + "/wx_api_CpList_All.php",
				data:{
     page:this.page_kaishi},
				success:(res)=>{
     
					this.chanpin = res.data;
					this.page_zong = res.data[0].yeshu;
				}
			})				
			
			
		},
		methods: {
     
			Xuanze:function(flid){
     
				this.curFenlei = flid;
				this.chanpin =[];
				this.page_kaishi=0;
				//加载分类产品
				//this.$WebURL.WebUrl.phpweb +'/h5/wx_api_CpList_All.php'
				//参数 （1）page  当前页数    （2）cs_lxid  分类id	
				uni.request({
     
					url:this.$WebURL.WebUrl.phpweb +'/wx_api_CpList_All.php',
					data:{
     
						page:this.page_kaishi,
						cs_lxid:flid
					},
					success: (res) => {
     
						this.chanpin = res.data;
						this.page_zong = res.data[0].yeshu 
					}
				})			
							
			},			
			bottom:function(e){
     
				console.log("我到了底部了222")
			
				if(this.page_kaishi < this.page_zong){
     
					//加载数据
					this.fetchData(this.page_kaishi)
					this.page_kaishi = this.page_kaishi +1;
					console.log("下一页：" + this.page_kaishi)					
				}else{
     
					wx.showToast({
     
						title:"没有更多数据了"
					})
				}
			},
			//自定义加载方法
			//this.$WebURL.WebUrl.phpweb +'/wx_api_CpList_All.php'
			//参数 （1）page  当前页数    （2）cs_lxid  分类id
			fetchData:function(yeshu){
     
				console.log("当前页数："+ yeshu)
				uni.showLoading({
     
					title:"加载中..."
				})
				uni.request({
     
					url:this.$WebURL.WebUrl.phpweb +'/wx_api_CpList_All.php',
					data:{
     
						page:yeshu,
						cs_lxid:this.curFenlei
					},
					success: (res) => {
     
						console.log("当前数组的长度：" + res.data.length)
						for(var i=0;i<res.data.length;i++)
						{
     
							var obj = {
     };
							  obj.cp_id = res.data[i].cp_id
							  obj.cp_mingcheng = res.data[i].cp_mingcheng;
							  obj.jiage = res.data[i].jiage;
							  obj.cp_tupian = res.data[i].cp_tupian;
						    var neirong = this.chanpin;
							neirong.push(obj);
							this.chanpin = neirong;							  
						}
						uni.hideLoading()
					}
				})
			}
			
		},
		onReachBottom:function(){
     
			console.log("我到了底部了")
		}

	}
</script>

<style>
.fenlei{
     height: 100px;display: flex;}
.zuo{
     width: 25%;background-color:#ecebf0 ;}
.xiangmu{
     padding: 10px 3px; border-bottom: 1px solid  #FFFFFF; background-color:#ecebf0 ;font-size: 15px;}
.xuanzhong{
     background-color: #FFFFFF; border-left: 5px #DD524D solid;}

.you{
     width: 75%;}

.cp_zuixin{
     display: flex;flex-wrap: wrap;}
.cp_xiangmu2{
     width: 50%;padding: 3px; box-sizing: border-box;}
.cp_tupian{
     width: 100%;}
.cp_biaoti{
     font-size: 14px;color: #333333;overflow: hidden;white-space: nowrap; text-overflow: ellipsis;}
.cp_jiage{
     font-size: 12px; color: #DD524D;}	
</style>