发表于： 2020-07-18 22:29:51
0 2043
今日完成:
注意:
1.直接写for循环或者while循环,声明变量写在外面,
在循环内引入,写在内部每次循环就会重新声明
如果是数组,就会只显示最后一次的结果
2.不要直接写入全局变量带入到循环中,如果要把它引为条件,可以声明一个变量代替,
在变量上的操作,不影响全局变量
如:
if(this.page + 4 <= this.totalpage)
{
m=this.page
while(i<5)
{
arr.push(m)
m++
i++
中的m之余全局变量this.page,如果this.page++,全局变量就发生了改变,
这里的目的不是为了改变它,而是以它的值为条件依据
ps;这里也可以写成m=this.page+i
遇到问题:
分页判断,代码:
if (this.totalpage > 5)
{
if(this.page + 4 <= this.totalpage)
{
m=this.page
while(i<5)
{
arr.push(m)
m++
i++
//这里也可以写成m=this.page+i
}
return arr
}
else
{
n=this.totalpage-4
while(i<5)
{
arr.push(n)
n++
i++
}
return arr
}
}
else{
return this.totalpage
}
}
描述:按初始值的显示第一页,每页10条显示
遇到问题1:
总也是大于5时 ,不显示,只有小于等于5时,显示全部页数
原因:
因为第一次请求时,上传一个params的默认值
axios.get('/carrots-admin-ajax/a/article/search',
//参数一表示请求地址
{
params:{
page:2,//默认值,默认显示第一页
size:10//默认值,默认每页显示10条
}
}
//参数二表示配置信息
//params表示传递到服务器端的数据,以url参数的形式拼接到请求地址后面
//headers表示请求头
)
.then(res=>{
if(res.data.code===0){
//成功请求
this.list = res.data.data.page
之后,从请求回来的数据上赋值
因为原始的res也就是响应数据中,没有page,上传的params跟响应的数据不画等号
也就是说相当于前面有个默认值,后面再次赋值,因为没这个值,显示就是未定义,
函数在大于5时无法运行,
解决:
这里去掉后面的赋值,后端会根据上传的默认值改变页面,但是不会把它加入到响应的数据中
这里设置默认值,之后直接用this.page调用即可,调用的是自己设置的默认值这里是1,初始显示第一页
遇到问题2:
初始化后能显示大于5的页数,但是改变页数,就显示最后5页
原因:
初始时,设置的初始值为1,引入显示正常
在改变页数后,因为input中设置的type=text是字符串类型,输入后显示的是字符串类型的数字,
判断中的this.page+4无法计算,就跳到后半段部分,显示最后5页
解决:
1.改变input的type类型,但还要在改变数字类型的默认样式
or
2.转换得到的数字字符串的类型,转成数字类型
this.page= Number(this.page)
遇到问题:
改变每页显示的条数和跳转页数,在输入之后,页面跳转之前,
页面就已经实时显示了计算属性
解决:
双向绑定不再直接绑定size和page,中间隔一个变量,
计算属性是用size和page运算,但是要在点击之后在给它们赋值,使默认值修改
这里就需要还需要改变下上传的显示页面的初始值,使得页面和计算属性点击之后一起运行
sub(){
this.page = this.pagen
this.size = this.sizem
axios.get('/carrots-admin-ajax/a/article/search', {
params:{
page:this.pagen,
size:this.sizem//显示条数
}
})
点击跳转相应页面
tiao(aaa){
this.page = aaa
axios.get('/carrots-admin-ajax/a/article/search', {
params:{
page:this.page,
size:this.sizem//显示条数
}
})
.then(res=>{
this.list = res.data.data.articleList
})
}
@click="tiao(pa)">{{pa}}</div>
当前页背景颜色
:class="{num:true,active:isactive}"
返回列表
评论