实现排行榜功能

这篇博客主要是为了给朋友讲解的 她的项目是使用uniapp来实现的 写的比较急 不对的也可以指出来
主要是为了实现排行榜功能 切换不同的排行榜
vue中class的绑定 (当有一个确定的公共的class类名 加一个不确定(点击邀请好友时显示的样式)的类名 )
仔细看两者是有区别的
特别注意vue中是 [ ] 这个符号

  <div class="public mytab">
      <div :class="['c_common',tabIndex==1?'active':'brfore']" @click="tab(1)">邀请好友</div>
      <div :class="['c_common',tabIndex==2?'active':'brfore']" @click="tab(2)">推广排行</div>
</div>

小程序的class绑定

	 <view class="features_text  {{id==index?'actives':''}}" wx:for="{{tagList}}" wx:key="index" data-id="{{index}}"
        data-tagId="{{item.id}}" catchtap="changeFeat">{{item.name}}</view>

下面以这个为例
uniapp中的绑定

	<view class="whole  flex">
			<view @click="wholechange(0)" :class="wholeIndex == 0 ? 'w_after' : 'w_active'">
				邀请好友
			</view>
			<view @click="wholechange(1)" :class="wholeIndex == 1 ? 'w_after' : 'w_active'">
				推广排行
			</view>
		</view>

css样式
点击哪项就添加下划线

.flex {
	display: flex;
}

.whole {
	width: 530rpx;
	/* height: 78rpx; */
	background: #FFFFFF;
	margin: auto;
	justify-content: space-between;
	margin-top: 47rpx;
	color: #7F7F7F;
	font-size: 30rpx;
	font-weight: bold;
	text-align: center;
}

.w_after {
	width: 139rpx;
	height: 29rpx;
	color: #212121;
}

.w_after::after {
	content: ' ';
	display: block;
	width: 28rpx;
	height: 6rpx;
	background: #FEA100;
	border-radius: 3rpx;
	margin: auto;
}

data中初始化
pageNumber: 1,
pageSize: 10,
wholeIndex: 0, //默认先展示  邀请好友这个tab
rank:0  // 邀请好友的默认参数  看后端规定 邀请好友时需要传什么参数以及参数值
list：[],//html中for循环需要渲染的数据 

首先实现切换功能
邀请好友 0 推广排行 1

		wholechange(indexTwo) {//上方传的参数  0 1 
			this.wholeIndex = indexTwo;
		if (indexTwo == 0) { 
							this.rank = 0;
						} else if (index == 1) { 
							this.rank = 1
			}
			以下是切换时清空之前页面的数据
			this.pageNumber = 1;
				this.list = [];
				this.getRanking() //渲染数据
			
		},

渲染数据的 // 记得在onload中执行一遍
getRanking(){
//需要传的参数 看接口需要什么

let params = {
				pageNumber: this.pageNumber,
				pageSize: this.pageSize,
				rank：this.rank//比如我们需要这个获取当前展示的是哪个tab
			}
	httpPost('接口地址', params).then(res => {//根据自己的请求封装方法来  这里就演示一下
				
				this.list = this.list.concat(res.data.list); //这里就是上方html中循环渲染用到的数组  
				将当前页(比如第2页的数据 )放入数组中  
			}).catch(err => {
					console.log('2222',this.list.length );

			})

}
//上拉加载数据 也就是分页

onReachBottom: function() {
		if (this.exists) {//是否存在下一页 后端返回  也可以自己判断 看之前的博客
				this.pageNumber++;
				this.getRanking();
				
		} else {
			if (this.pageNumber > 1) {
				uni.showToast({
					title: '没有更多数据了',
					icon: "none"
				});
			}
		}
	},
	onPullDownRefresh() {
		// console.log("触发了下拉刷新"),
			uni.stopPullDownRefresh();//因为没有下拉刷新功能  所以此处禁止
	},