这篇博客主要是为了给朋友讲解的 她的项目是使用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();//因为没有下拉刷新功能 所以此处禁止
},