uni-app之实现分页
一、下载库
官方文档地址为:
https://ext.dcloud.net.cn/plugin?id=32
点击下载zip压缩包即可,下载完毕后解压到放置前端相关组件目录,即components目录。
二、使用
1.引入
import uniPagination from '../../components/uni-pagination/uni-pagination/uni-pagination.vue'
2.模板区域使用(在里)
<uni-pagination @change="handlePage" show-icon="true" :total="postCount" :current="pageNum" :pageSize="pageSize"></uni-pagination>
3.编写handlePage函数
handlePage(params){
var pageIndex = params.current; console.log("this.pageNum:"+pageIndex); this.getPostListInfo(pageIndex)
}
4.我的完整代码如下
<template>
<view class="content">
<!-- <image class="logo" src="/static/logo.png"></image> -->
<view class="text-area">
<text class="title">{{ title }}</text>
</view>
<view class="uni-list">
<view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(item, index) in list" :key="index">
<!-- <view class="uni-list-cell-navigate uni-navigate-right">{{ item.Title }}</view> --> <button type="default" @click="getDetail(item.Title, item.Id, item.Url)">{{ item.Title }}</button>
</view>
<uni-pagination @change="handlePage" show-icon="true" :total="postCount" :current="pageNum" :pageSize="pageSize"></uni-pagination>
</view>
</view>
</template> <script>
import common from '../../common/common.js';
import uniPagination from '../../components/uni-pagination/uni-pagination/uni-pagination.vue';
export default {
components: { uniPagination },
data() {
return {
title: '文章列表',
postCount: 0,
pageSize: 10,
pageNum: 1,
list: []
};
}, onLoad() {
this.getPostListInfo(this.pageNum); this.getPersonalBlogInfo();
},
methods: {
getPostListInfo(pageIndex) {
console.log('pageIndex:' + pageIndex);
uni.request({
url: common.website_url + '/cnblogs/getPersonalBlogPostList/' + pageIndex,
method: 'POST',
success: res => {
console.log('isSuccess');
console.log('getPostListInfo:' + JSON.stringify(res.data));
this.list = res.data;
},
fail: function(e) {
console.log('接口调用失败:' + JSON.stringify(e));
}
});
}, getPersonalBlogInfo() {
uni.request({
url: common.website_url + '/cnblogs/getPersonalBlogInfo',
method: 'POST',
success: res => {
//console.log('getPersonalBlogInfo:' + JSON.stringify(res.data));
this.postCount = res.data.postCount;
this.pageSize = res.data.pageSize;
},
fail: function(e) {
console.log('接口调用失败:' + JSON.stringify(e));
}
});
},
getDetail(Title, Id, Url) {
console.log('Title:' + Title + ' Id:' + Id); uni.navigateTo({
url: '../post/post/post?Title=' + Title + '&Id=' + Id
});
},
handlePage(params) {
var pageIndex = params.current; console.log('this.pageNum:' + pageIndex); this.getPostListInfo(pageIndex);
}
}
};
</script> <style>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
} .logo {
height: 200rpx;
width: 200rpx;
margin-top: 200rpx;
margin-left: auto;
margin-right: auto;
margin-bottom: 50rpx;
} .text-area {
display: flex;
justify-content: center;
} .title {
font-size: 36rpx;
color: #8f8f94;
}
</style>
5.效果图
界面虽然不好看,但功能是Ok的。
当前页
点击下一页
uni-app之实现分页的更多相关文章
- uni app中使用自定义图标库
项目中难免会用到自定义图标,那在uni app中应该怎么使用呢? 首先, 将图标目录放在static资源目录下: 在main.js中引入就可以全局使用了 import '@/static/icon-o ...
- uni app 零基础小白到项目实战-1
uni-app是一个使用vue.js开发跨平台应用的前端框架. 开发者通过编写vue.js代码,uni-app将其编译到Ios,android,微信小程序等多个平台,保证其正确并达到优秀体验. Uni ...
- 浅谈APP流式分页服务端设计(转)
http://www.jianshu.com/p/13941129c826 a.cursor游标式分页 select * from table where id >cursor limit pa ...
- uni app以及小程序 --环境搭建以及编辑器
https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html 根据以上网页下载自己电脑相应的版本的微信开发者工具(目录 ...
- uni app canvas 不生效
canvas 创建canvas绘图上下文. <canvas style="width: 300px; height: 200px;" canvas-id="firs ...
- iOS应用跳转至app store 评分页
小功能之去AppStore评分 #pragma mark - 去AppStore评分 -(void)goToAppStore { NSString *str = [NSString stringWit ...
- uni app 零基础小白到项目实战2
<template> <scroll-view v-for="(card, index) in list" :key="index"> ...
- uni app 零基础小白到项目实战
$emit 子组件传给父组件 $ref 父组件操作子组件 公用模板 uni-app全局变量的几种实现方法 const websiteUrl = 'http' const now = Date.now ...
- uni app中关于图片的分包加载
因为在项目中使用了大量的静态资源图片,使得主包体积过大, 而把这些图片全部放到服务器又有点麻烦,就想能不能把图片也分包,但是直接放在分包下的话导致图片资源找不到了, 在社区中看到大佬分享的十分有用,特 ...
- APP应用测试技巧
分页数据 测试分页数据,必须要满足一页数据,根据APP设置的分页数据准备一些测试数据. 满足一页数据的时候上下滑动瀑布流时, 页面数据是否会正常展示: 是否会出现第二页请求不到数据: 是否会出现重复加 ...
随机推荐
- SpringBoot入门系列(十二)统一日志收集
前面介绍了Spring Boot 异常处理,不清楚的朋友可以看看之前的文章:https://www.cnblogs.com/zhangweizhong/category/1657780.html. 今 ...
- 使用Redis分布式锁实现主备
使用Redis分布式锁实现集群的主备 最近工作中遇到一个问题,我们会调用业务部门提供的HTTP接口获取所有的音视频任务信息,这些任务会被分发到各个机器节点进行处理.有两个方案: 方案一 为每台机器编号 ...
- Alpha总结展望——前事不忘后事之师
这个作业属于哪个课程 软件工程 这个作业要求在哪里 Alpha总结展望--前事不忘后事之师 这个作业的目标 Alpha总结展望 作业正文 正文 其他参考文献 无 一.个人感想总结 吴秋悦: 对Alph ...
- 使用turtle库绘制渐变的圆
import turtle as t t.pensize(3) t.pencolor("blue") t.penup() t.fd(-250) t.seth(0) t.pendow ...
- Java实现 蓝桥杯 算法训练 求和求平均值
试题 算法训练 求和求平均值 问题描述 从键盘输入10个浮点数,求出它们的和以及平均值,要求用函数实现 输入格式 测试数据的输入一定会满足的格式. 1 10 (1行10列的向量) 输出格式 要求用户的 ...
- Java实现 LeetCode 887 鸡蛋掉落(动态规划,谷歌面试题,蓝桥杯真题)
887. 鸡蛋掉落 你将获得 K 个鸡蛋,并可以使用一栋从 1 到 N 共有 N 层楼的建筑. 每个蛋的功能都是一样的,如果一个蛋碎了,你就不能再把它掉下去. 你知道存在楼层 F ,满足 0 < ...
- Java中lang包的常用方法介绍
JAVA API(图片来源:实验楼) 包装类 Integer包装类 方法 返回值 功能描述 byteValue() byte 以 byte 类型返回该 Integer 的值 intValue() in ...
- Java中map.getOrDefault()方法的使用
Map.getOrDefault(Object key, V defaultValue)方法的作用是: 当Map集合中有这个key时,就使用这个key值: 如果没有就使用默认值defaultV ...
- Java实现第十届蓝桥杯求和
试题 A: 求和 本题总分:5 分 [问题描述] 小明对数位中含有 2.0.1.9 的数字很感兴趣,在 1 到 40 中这样的数包 括 1.2.9.10 至 32.39 和 40,共 28 个,他们的 ...
- opencl(4)命令队列
1:创建命令队列 cl_command _queue clCreateCommandQueue( cl_context context, //上下文 cl_device_id device, ...