4试探后端

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

一、请求接口渲染首页数据

1.1 添加请求接口方法__init()

__init(){
			uni.request(
			{
			url:"http://192.168.8.6:3000/api/index_list/data",
			success: (res) => {
						let data = res.data.data;
						this.topBar = data.topBar;
						this.newTopBar = this.initData(data);
					}
				})
			},

1.2 添加存储数据方法initData()

initData(res){
				let arr = [];
				for(let i =0;i<this.topBar.length;i++){
					let obj = {
						data:[]
					}
					//获取首次数据
					if(i==0){
						obj.data = res.data;
					}
					arr.push(obj)
				}
				return arr;
			},

1.3 渲染首页数据

<block v-for='(k,i) in item.data' :key='i'>
						
		<IndexSwiper v-if='k.type==="swiperList"' :dataList='k.data'></IndexSwiper>
		<template v-if='k.type==="recommendList"' >
				<Recommend :dataList='k.data'></Recommend>
				<Card cardTitle='猜你喜欢'></Card>
		</template>
		<CommodityList v-if='k.type==="commodityList"' :dataList='k.data'></CommodityList>
						
</block>

二、修正可视区域高度问题

出现问题
ios，Android，小程序，小程序下正常
要兼容可视区域获取

1.1 使用getSystemInfo获取可视区域高度，这里要注意ios、安卓、各种小程序表现形式不一样。
1.2 onready代码如下:

uni.getSystemInfo({
				success: (res) => {
					this.clentHeight = res.windowHeight - uni.upx2px(80)-this.getClientHeight();
				}
			})

1.3 封装兼容方法

getClientHeight(){
				const res = uni.getSystemInfoSync();
				const system = res.platform;
				if( system ==='ios' ){
					return 44+res.statusBarHeight;
				}else if( system==='android' ){
					return 48+res.statusBarHeight;
				}else{
					return 0;
				}
				
			}

三、滑动不同板块展示不同数据

1.1 完成效果切换到不同页面展示不同数据

1.2 请求数据为：

addData(){
				//拿到索引
				let index = this.topBarIndex;
				//拿到id
				let id = this.topBar[index].id;
				//请求不同的数据
				uni.request({
					url:'http://192.168.8.6:3000/api/index_list/'+id+'/data/1',
					success: (res) => {
						let data = res.data.data;
						this.newTopBar[index].data= [...this.newTopBar[index].data,...data];
					}
				})
			}

四、修正重复请求数据

1.1 原有问题：只要滑动或者点击都会请求一次数据。
1.2 修正逻辑：默认一个first值，滑动到某一个板块把当前的值修改成last,然后每次滑动都判断，如果值为first就加载数据，那么其实值为last了已经，所以就不重复请求数据了。
1.3 具体解决方法代码如下：

changeTab(index){
				//每一次滑动==》赋值first
				if( this.newTopBar[this.topBarIndex].load  ==='first'){
					this.addData();
				}
			},
addData(callback){
//当请求结束后，重新赋值
				this.newTopBar[index].load='last';
},
initData(res){
let obj = {
	data:[],
load:"first"
}
}

五、上拉加载更多数据

1.1 给scroll-view添加触底事件
<scroll-view @scrolltolower=‘loadMore(index)’>
1.2 template中添加滑动显示文字的容器

{{item.loadText}}

1.3 触底方法定义代码：

loadMore(index){
				
				this.newTopBar[index].loadText = '加载中...';
				//请求完数据 ，文字提示信息又换成【上拉加载更多...】
				this.addData(()=>{
					this.newTopBar[index].loadText = '上拉加载更多...';
				})
			}

1.4 加载不同数据的page算法代码：
let page = Math.ceil(this.newTopBar[index].data.length / 5) + 1;

六、request封装

1.1 对于uni.request封装有利于后期的维护。
1.2 在common目录中新建api目录，在api目录中新建request.js文件
1.3 request.js代码如下：

export default{
	common:{
		baseUrl:"http://192.168.8.6:3000/api",
		data:{},
		header:{
			"Content-Type":"application/json",
			"Content-Type":"application/x-www-form-urlencoded"
		},
		method:"GET",
		dataType:"json"
	},
	request( options={} ){
		
		uni.showLoading({
		    title: '加载中'
		});
		
		options.url = this.common.baseUrl + options.url;
		options.data = 	options.data || this.common.data;
		options.header = options.header || this.common.header;
		options.method = options.method || this.common.method;
		options.dataType = 	options.dataType || this.common.dataType;
		return new Promise((res,rej)=>{
			uni.request({
				...options,
				success: (result) => {
					if(result.statusCode != 200){
						return rej();
					}
					setTimeout(function () {
					    uni.hideLoading();
					}, 2000);
					let data = result.data.data;
					res(data);
				}
			})
		})
	}
}

1.4 调用方式：

$http.request({
	url:'/index_list/'+id+'/data/'+page+''
}).then((res)=>{
	this.newTopBar[index].data = [...this.newTopBar[index].data,...res];
}).catch(()=>{
	uni.showToast({
		title:'请求失败',
		icon:'none'
	})
})