微信小程序开发二：实现表单的分页，排序，搜索功能
前言：上节已经说了基本的数据传递操作，这节就使用操作完成基本的功能。
1.建立表单(挺简单的不做介绍)：
wxml:
得分排行
篮板排行
助攻排行
排名
名字
场均得分
场均篮板
场均助攻
wxss：（参考即可）
/*=======table表=======*/
.table {
border:3px solid black;
width: 740rpx;
position: relative;
top:-30rpx;
}
.tr {
width: 100%;
display: flex;
justify-content: space-between;
}
.th,.td {
padding: 10px;
border-bottom: 1px solid #dadada;
text-align: center;
width:100%;
}
.th_c{
padding: 10px;
border-bottom: 1px solid #dadada;
border-right: 1px solid #dadada;
text-align: center;
width:100%;
font-weight: 400;
background:rgba(0, 0, 0, 0.282);
}
.td_name,.th_name{
padding: 10px;
border-bottom: 1px solid #dadada;
width:2000rpx;
}
.th_name,.th {
font-weight: 400;
background-color: #fbfbfb;
}
/*=======table表=======*/2.实现分页功能：
在写代码之前先思考一下分页功能的实现需要什么：
- 实现上一页和下一页的button。
- 显示和输入页数的input。
- 记录页数编号的变量：page。
- 实现的功能算法。
wxml：
通过page控制页面的值，i +（page-1）*10即为数据的条数
[0,1,2,3,4,5,6,7,8,9]代表一页有10条数据
{{i+(page-1)*10+1}}
{{plays[i+(page-1)*10].name}}
{{plays[i+(page-1)*10].point}}
{{plays[i+(page-1)*10].bank}}
{{plays[i+(page-1)*10].help}}
上一页
下一页
js：
通过+-改变page的值实现分页（注意：page = 0时不能减，所以将page = 0时样式设为固定。）
/* =======加减页面操作========*/
/* 点击减号 */
bindMinus: function() {
var page = this.data.page;
// 如果大于1时，才可以减
if (page > 1) {
page --;
}
// 只有大于0的时候，才能normal状态，否则disable状态
var minusStatus = page <= 1 ? 'disabled' : 'normal';
// 将数值与状态写回
this.setData({
page: page,
minusStatus: minusStatus
});
},
/* 点击加号 */
bindPlus: function() {
var page = this.data.page;
// 不作过多考虑自增1
page ++;
// 只有大于一件的时候，才能normal状态，否则disable状态
var minusStatus = page < 1 ? 'disabled' : 'normal';
// 将数值与状态写回
this.setData({
page: page,
minusStatus: minusStatus
});
},
/* 输入框事件 */
bindManual: function(e) {
var page = e.detail.value;
// 将数值与状态写回
this.setData({
page: page
});
},
/* =======加减页面操作========*/css:
/*=======加减按钮=======*/
/*主容器*/
.stepper {
width: 150px;
height: 30px;
/*给主容器设一个边框*/
border: 1px solid #ccc;
border-radius: 3px;
margin-left: 220rpx;
margin-top:40rpx ;
border-radius: 10rpx;
position: relative;
top:-50rpx;
}
/*加号和减号*/
.stepper text {
width: 54px;
line-height: 30px;
text-align: center;
float: left;
background-color: rgba(194, 184, 201, 0.495);
}
/*数值*/
.stepper input {
width: 40px;
height: 30px;
float: left;
margin: 0 auto;
text-align: center;
font-size: 12px;
/*给中间的input设置左右边框即可*/
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
}
/*普通样式*/
.stepper .normal{
color: black;
}
/*禁用样式*/
.stepper .disabled{
color: #ccc;
}
/*=======加减按钮=======*/3.实现排序功能：
只需解决一个排序其他排序都是照猫画虎
不多说直接上按篮板排序的代码：
这是最简单的冒泡排序（当然时间复杂度较高，但是数据较少可以忽略）
bindbank:function(){
var that = this;
var plays = that.data.plays;
var semaphore;
console.log(plays);
for(var i=0;iNumber(plays[i].bank)){
semaphore = plays[i];
plays[i] = plays[j];
plays[j] = semaphore;}}
}
this.setData({
plays:plays
});
}, 4.实现搜索功能：
在写搜索功能代码时同样需要考虑其步骤
- 获取value的值
- 需要相应的正则表达式匹配
- 数据的修改以及还原（需要var一个原始的值保存初始数据）
bindsearch:function(e){
this.setData({
plays:this.data.search_plays
}); /*将数据置为原始值*/
var that = this;
var plays = that.data.plays;
var play = [];
var playsearch = e.detail.value.toString();
for(var i=0;i=0){
play.push(plays[i]);}
}
this.setData({
plays:play
});
}, 5.最终演示：
