uniapp微信小程序vue项目uView UI手写分页实现简单翻页跳页功能

效果：

 

代码：

			<!--          分页-->
				<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}`);
			},