网站建设朝阳,电商详情页图片,建设网站需要api吗,个人网站设计论文范文目录 场景实现 场景
假设#xff0c;我们现在有这么一个需求#xff1a; 上述图片的空白内容是活动的#xff0c;由下面的两个按钮控制上一页、下一页#xff1b;我们应该可以怎么去实现#xff1f;
实现
思路#xff1a; 其实这个问题#xff0c;我们仿照其他的UI框… 目录 场景实现 场景
假设我们现在有这么一个需求 上述图片的空白内容是活动的由下面的两个按钮控制上一页、下一页我们应该可以怎么去实现
实现
思路 其实这个问题我们仿照其他的UI框架应该也可以获取大致思路例如element-ui; 可以将空白内容作为一个table的某一页数据然后点击底部的分页组件的上一页或者下一页来做到数据的切页效果。 这里使用vue element admin 中的一个综合table来看下效果图 这下有没有感觉顿时思路就来了 定义变量当前页码currentPage、每页数据数量pageSize总数据源列表dataList 点击按钮切换页码监听页码的变化获取到当前页的数据从而渲染到页面上。 注意点这里建议使用计算属性computed而不是监听属性watch为什么这是因为计算属性的一个特性计算属性相比监听而言计算属性具有缓存特性直白的说计算属性的依赖也就是计算属性中所用到的变量如果不变那么计算属性不会被再次调用从而进一步的提高性能。 代码如下
templatediv!-- 数据列表 --ulli v-foritem in currentPageData :keyitem.id{{ item.content }}/li/ul!-- 分页控件 --button clickprevPage :disabledcurrentPage 1上一页/buttonbutton clicknextPage :disabledcurrentPage totalPages下一页/button/div
/templatescript
export default {data() {return {currentPage: 1,pageSize: 10,dataList: [], // 假设这是从服务器获取的数据列表};},computed: {totalPages() {return Math.ceil(this.dataList.length / this.pageSize);},currentPageData() {let start (this.currentPage - 1) * this.pageSize;let end start this.pageSize;return this.dataList.slice(start, end);},},methods: {nextPage() {if (this.currentPage this.totalPages) {this.currentPage;}},prevPage() {if (this.currentPage 1) {this.currentPage--;}},},
};
/script完结。
