今天完成的事情：
完成了点击页码按钮来刷新页面：
首先做一个页码样式，通过获取总个数，然后用总格式除每页展示数量然后向上取整的到按钮个数
axios.get('api/a/article/search/')
.then(res => {
//console.log(res.data)
this.pagination = Math.ceil(res.data.data.total / res.data.data.size)//向上舍入
})
v-for循环把按钮都做出来
<button :class="{beclick:index == beclickBtn}" @click="pageBtn(index)" v-for="(item, index) in pagination" :key="index">{{item}}</button>
同时给按钮添加一个动态样式，通过v-bind：class添加，然后添加一个点击事件并把index传递出去，可以知道点击的是哪个btn，并通过对象记录。
data() {
return {
pagination: '',//用来记录按钮个数
beclickBtn: 0,//记录被点击的按钮的index
}
},
methods: {
toFirstPage() {
this.beclickBtn = 0
},
toLastPage() {
this.beclickBtn = this.pagination - 1
},
pageBtn(index) {
this.beclickBtn = index
},
back() {
if(this.beclickBtn > 0) {
this.beclickBtn--
}
},
next() {
if(this.beclickBtn < (this.pagination - 1)) {
this.beclickBtn++
}
}
},
这样可以实现被点击的按钮北京颜色改变的效果，然后就是前进和后退按钮，首先要是实现如果是第一页则后退按按钮隐藏，如果是最后一页则前进按钮隐藏，
<button v-if="!(beclickBtn == 0)" @click="back"><</button>
<button v-if="!(beclickBtn == pagination - 1)" @click="next">></button>
用v-if就好了，添加个基于被点击按钮的判断，再给两个按钮分别添加一个点击事件，来控制页面。
还有就是首页和最后一页按钮的实现也很简单添加一个点击事件就好了，
然后我们需要监听beclickBtn的值，如果他的值发生变化则给父组件发送一个自定义事件，也就是传递一个值
watch: {
beclickBtn() {
//console.log(this.beclickBtn)
let value = this.beclickBtn
this.$emit('pageBtnBeClick',value)
}
},
在夫组件接受并且保存保存下来：
data() {
return {
beClickBtnValue: 1,
}
},
name:'Article',
methods: {
beClickBtn(val) {
this.beClickBtnValue = val + 1
//console.log(this.beClickBtnValue)
}
},
<articleList :pagenum="beClickBtnValue"></articleList>
<articlePage @pageBtnBeClick="beClickBtn"></articlePage>
父组件接受值并且通过v-bind导入到另一个子组件，
props: {
pagenum: {
type: Number,
default: 1,
}
},
子组件接收：
watch: {
pagenum(val) {
console.log(val)
axios.get('api/a/article/search/',{
params: {
page: val
}
}) // to do page值传递过来了，但是get请求的格式还是不对明天问一下师兄
.then(res => {
console.log(res)
})
},
},
监听值得变化然后发送get请求并更新页面
明天要做的事情：
1.完善页面
2.加入新功能，点击不同的页面动态传递不同的路由
3.完成搜索功能 更具时间搜索，状态搜索，等等。
返回列表
评论