效果：
代码：
<!-- 分页-->
<view class="paging-box">
<u-row class="paging-box-inner">
<u-col span="3">
<view class="demo-layout bg-purple">
{
{ tableData.pageInfo.current + "/" + tableData.pageInfo.total }}
</view>
</u-col>
<u-col span="5">
<view class="demo-layout bg-purple-light">
<text class="p-n-text prev-text" @click="goPage('prev')">上一页</text>
<text class="p-n-text next-text" @click="goPage('next')">下一页</text>
</view>
</u-col>
<u-col span="4">
<view class="demo-layout bg-purple-dark">
<text class="go-where">前往</text>
<!-- <text class="next-text" v-model="tableData.pageInfo.current" @change="goPage(tableData.pageInfo.current)">{
{tableData.pageInfo.current}}</text>-->
<input @change="goPage(tableData.pageInfo.current)" class="input-text" type="text"
v-model="tableData.pageInfo.current" />
<text class="page-text">页</text>
</view>
</u-col>
</u-row>
</view> tableData: {
pageInfo: {
current: 1,
total: 0
}
}, /**
* 上一页下一页
*/
goPage(val) {
console.log('val??', val)
if (val == 'prev') {
this.tableData.pageInfo.current -= 1
} else if (val == 'next') {
this.tableData.pageInfo.current += 1
} else {
this.tableData.pageInfo.current = val
}
if (this.tableData.pageInfo.current<1) {
this.tableData.pageInfo.current=1
uni.showToast({
title: '页数不能小于1',
icon: "none"
})
return;
}
if (this.tableData.pageInfo.current>this.tableData.pageInfo.total) {
this.tableData.pageInfo.current=this.tableData.pageInfo.total
uni.showToast({
title: '页数不能超过最大页数',
icon: "none"
})
return;
}
this.handleCurrentChange()
},
/**
* 每页展示条数改变事件
**/
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
},
/**
* 当前页改变事件
**/
handleCurrentChange() {
console.log('当前页', this.tableData.pageInfo.current);
let params = {};
params = {
isbn: this.bookdetail.isbn,
pageNum: this.tableData.pageInfo.current,
size: 1
};
console.log(params);
this.$ajax.readbook(params).then(res => {
if (res.data.purchased == 0) {
this.tableData.pageInfo.current = this.preNumber;
uni.showToast({
title: '本文需要购买',
icon: "none"
})
this.show = true
} else {
this.preNumber = this.tableData.pageInfo.current;
this.bookimg = null;
this.$nextTick(() => {
this.bookimg = res.data.ebookPageImage.imageUrl;
// 改变图片后滚动到页面顶部
this.scrollToTop();
});
}
});
console.log(`当前页: ${this.tableData.pageInfo.current}`);
},