栅格布局 网站设计,深圳网站制作公司哪家好,vs2013网站开发,浏览器大全下载文章目录27.分页器静态组件#xff08;难点#xff09;本人其他相关文章链接27.分页器静态组件#xff08;难点#xff09;
难点#xff1a; 考虑点1#xff1a;为啥需要分页呢#xff1f; 答案#xff1a;按需加载 考虑点2#xff1a;分页器展示#xff0c;需要哪…
文章目录27.分页器静态组件难点本人其他相关文章链接27.分页器静态组件难点
难点 考虑点1为啥需要分页呢 答案按需加载 考虑点2分页器展示需要哪些数据条件
答案需要知道4个参数pageNo、pageSize、total、continues 考虑点3为啥continues大多都是奇数个数 答案因为对称且好看。 考虑点4为啥不直接使用ElementUI啥的第三方组件呢 答案咱自己要掌握自定义分页功能因为万一产品经理想要自定义分页规则呢。 考虑点5如何设计分页器原理最难点 知道当前第几页pageNo知道分页器一共需要展示多少条数据total知道每一页需要展示数据个数pageSize知道连续的页码数比如连续页面为 5 6 7 8 9知道可能发生错误的地方比如当总页数没有连续页码多时如何处理再比如连续页码比总页数多算正常现象情况下但是pageNo为【1|2】的时候那么start就会出现【0|负数】或者pageNo为【totalPage | totalPage-1】的时候那么就会出现end totalPage。这又该如何处理。知道…不加点击事件。知道【第二页…、倒数第二页…】需要加v-if判断控制显隐。 考虑点6分页组件要注册成为全局组件因为好多地方会使用它
修改代码 src/main.js //全局注册分页组件
import Pagination from /components/Pagination
Vue.component(Pagination.name, Pagination)src/components/Pagination/index.vue templatediv classpagination!-- 上 --button :disabledpageNo 1 click$emit(getPageNo, pageNo - 1)上一页/buttonbutton v-ifstartNumAndEndNum.start 1 :class{ active: pageNo 1 } click$emit(getPageNo, 1)1/buttonbutton v-ifstartNumAndEndNum.start 2···/button!-- 中间部分,注意v-for遍历数字索引从1开始由于添加规则page startNumAndEndNum.start所以最终显示的只有continues个数字 --button v-for(page, index) in startNumAndEndNum.end v-ifpage startNumAndEndNum.start :keyindex :class{ active: pageNo page } click$emit(getPageNo, page){{ page }}/button!-- 下 --button v-ifstartNumAndEndNum.end totalPage - 1···/buttonbutton v-ifstartNumAndEndNum.end totalPage :class{active:pageNototalPage} click$emit(getPageNo, totalPage){{ totalPage }}/buttonbutton :disabledpageNo totalPage click$emit(getPageNo, pageNo 1)下一页/buttonbutton stylemargin-left: 30px共 {{ total }} 条/button/div
/templatescript
export default {name: Pagination,props: [pageNo, pageSize, total, continues],computed: {//总共多少页totalPage() {//向上取证return Math.ceil(this.total / this.pageSize);},//计算出连续的页码的起始数字与结束数字[连续页码的数字:至少是5]startNumAndEndNum() {//解构出来,不解构是作为实例身上的属性,不解构没法用所谓解构就是要将对象分解为多个属性这个对象可以是this对象也可以是普通的对象const {continues, pageNo, totalPage} this;//先定义两个变量存储起始数字与结束数字let start 0, end 0;//连续页码数字5【就是至少五页】如果出现不正常的现象【就是不够五页】//不正常现象【总页数没有连续页码多】if (continues totalPage) {start 1;end totalPage;} else {//正常现象【连续页码5但是你的总页数一定是大于等于5的】//起始数字注意parseInt()方法是向下取整start pageNo - parseInt(continues / 2);//结束数字end pageNo parseInt(continues / 2);//把出现不正常的现象【start数字出现0|负数】纠正假设pageNo为【1|2】的时候那么start就会出现【0|负数】if (start 1) {start 1;end continues;}//把出现不正常的现象[end数字大于总页码]纠正假设pageNo为【totalPage | totalPage-1】的时候那么就会出现end totalPageif (end totalPage) {end totalPage;start totalPage - continues 1;}}return {start, end};},},
};
/scriptstyle langless scoped
.pagination {text-align: center;button {margin: 0 5px;background-color: #f4f4f5;color: #606266;outline: none;border-radius: 2px;padding: 0 4px;vertical-align: top;display: inline-block;font-size: 13px;min-width: 35.5px;height: 28px;line-height: 28px;cursor: pointer;box-sizing: border-box;text-align: center;border: 0;[disabled] {color: #c0c4cc;cursor: not-allowed;}.active {cursor: not-allowed;background-color: #409eff;color: #fff;}}
}.active {background: skyblue;
}
/stylesrc/pages/Search/index.vue !-- 分页器 --
Pagination:pageNosearchParams.pageNo:pageSizesearchParams.pageSize:totaltotal:continues5getPageNogetPageNo
/import {mapGetters, mapState} from vuexmethods: {//自定义事件的回调函数---获取当前第几页getPageNo(pageNo) {//整理带给服务器参数this.searchParams.pageNo pageNo;//再次发请求this.getData();}
}computed:{//获取search模块展示产品一共多少数据...mapState({total: (state) state.search.searchList.total,}),
}问题1为啥需要分页呢 答案按需加载 问题2分页器展示需要哪些数据条件 答案自定义分页器前需要知道4个参数
pageNo代表当前第几页pageSize代表每一页展示多少条数据total代表数据总条数continues代表分页连续页码个数 问题3为啥continues大多都是奇数个数 答案因为对称且好看。比如淘宝的分页器中间7-11是奇数个。 问题4为啥不直接使用ElementUI啥的第三方组件呢 答案咱自己要掌握自定义分页功能因为万一产品经理想要自定义分页规则呢。 问题5如何设计分页逻辑最难点 答案考虑start和end的实现逻辑以及vue模板中的判断逻辑。
computed: {//总共多少页totalPage() {//向上取证return Math.ceil(this.total / this.pageSize);},//计算出连续的页码的起始数字与结束数字[连续页码的数字:至少是5]startNumAndEndNum() {//解构出来,不解构是作为实例身上的属性,不解构没法用所谓解构就是要将对象分解为多个属性这个对象可以是this对象也可以是普通的对象const {continues, pageNo, totalPage} this;//先定义两个变量存储起始数字与结束数字let start 0, end 0;//连续页码数字5【就是至少五页】如果出现不正常的现象【就是不够五页】//不正常现象【总页数没有连续页码多】if (continues totalPage) {start 1;end totalPage;} else {//正常现象【连续页码5但是你的总页数一定是大于等于5的】//起始数字注意parseInt()方法是向下取整start pageNo - parseInt(continues / 2);//结束数字end pageNo parseInt(continues / 2);//把出现不正常的现象【start数字出现0|负数】纠正假设pageNo为【1|2】的时候那么start就会出现【0|负数】if (start 1) {start 1;end continues;}//把出现不正常的现象[end数字大于总页码]纠正假设pageNo为【totalPage | totalPage-1】的时候那么就会出现end totalPageif (end totalPage) {end totalPage;start totalPage - continues 1;}}return {start, end};},},注意点6计算总共多少页可以采用Math.ceil(this.total / this.pageSize)向上取整的方式。
注意点7只有数字的页码才添加点击事件针对页码为…的不添加点击事件只会新增v-if判断。
button v-ifstartNumAndEndNum.start 1 :class{ active: pageNo 1 } click$emit(getPageNo, 1)1/button
button v-ifstartNumAndEndNum.start 2···/buttonbutton v-ifstartNumAndEndNum.end totalPage - 1···/button
button v-ifstartNumAndEndNum.end totalPage :class{active:pageNototalPage} click$emit(getPageNo, totalPage)注意点8button :disabled“pageNo 1”其中disabled用来控制是否禁用就是不可点击的意思。
注意点9子组件传父组件通信使用自定义事件除了使用this.$emit方式外也可以在标签中采用click$emit(‘getPageNo’, 1)方式。
注意点10:class{ active: pageNo 1 }用来标识哪个分页按钮高亮。
注意点11中间部分,注意v-for遍历数字索引从1开始由于添加规则page startNumAndEndNum.start所以最终显示的只有continues个数字。
button v-for(page, index) in startNumAndEndNum.end v-ifpage startNumAndEndNum.start :keyindex :class{ active: pageNo page } click$emit(getPageNo, page){{ page }}/button注意点12代码解构不解构是作为实例身上的属性,不解构没法用所谓解构就是要将对象分解为多个属性这个对象可以是this对象也可以是普通的对象。
const {continues, pageNo, totalPage} this;注意点13方法是可以返回多个参数的采用{}方式返回即可实现。
return {start, end}; 本人其他相关文章链接
1.vue尚品汇商城项目-day04【24.点击搜索按钮跳转后的页面商品列表、平台售卖属性动态展示开发Search组件】 2.vue尚品汇商城项目-day04【25.面包屑处理关键字】 3.vue尚品汇商城项目-day04【26.排序操作难点】 4.vue尚品汇商城项目-day04【27.分页器静态组件难点】 5.vue尚品汇商城项目-day04【28.详情页面Detail】 6.vue尚品汇商城项目-day04【29.加入购物车操作难点】
