.contentBottom{ width: 98%; height: 30px; line-height: 30px; text-align: right; margin-top: 50px; padding: 0 1%; font-size: 14px; } .prePage,.knownPage,.nextPage,.nextTen,.preTen,.indexPage,.lastPage,.jumpToInputPage{ width: 30px; display: inline-block; text-align: center; border: 1px solid #CCC; cursor: pointer; } .indexPage,.lastPage,.jumpToInputPage{ font-size: 14px; padding: 0 8px; } .inputPage{ width: 36px; height: 27.5px; vertical-align: top; } .indexPage,.inputPage{ margin-left: 10px; } .prePage:hover,.knownPage:hover,.nextPage:hover,.preTen:hover,.nextTen:hover,.indexPage:hover,.lastPage:hover,.jumpToInputPage:hover{ background: rgba(230,230,230,1) } .addBgClass{ background: rgba(230,230,230,1); }
用户交互逻辑代码：
// 显示后十页。只有在page大于10时这个扩充按钮才会显示 nextTen: function(){ var that = this; var pageNum = that.totalPage; that.handleNextExtremePage(pageNum); }, // 显示前十页 preTen: function(){ var that = this; var pageNum = that.totalPage; that.handlePreExtremePage(pageNum); }, // 拉取指定页的码库数据 appointPage: function(e){ var page = e.target.dataset.curPage; this.curPage = page; var formData = { user_id: this.user_id, nickName: this.nickName, page: page }; this.getRequestFunc(formData); }, // 拉取上一页码库数据 goToPrePage: function(){ var that = this; that.curPage = parseInt(that.curPage) - 1; if(that.curPage < 1){ that.curPage = that.curPage + 1; //下面用的是一个模态框，可不写 var promptText = '这已经是第一页了！'; that.callPromptBox(promptText) }else{ var formData = { user_id: this.user_id, nickName: this.nickName, page: that.curPage }; that.getRequestFunc(formData); } }, // 拉取下一页码库数据 goToNextPage: function(){ var that = this; that.curPage = parseInt(that.curPage ) + 1; if(that.curPage > that.totalPage){ that.curPage = that.curPage - 1; var promptText = '这已经是最后一页了！'; that.callPromptBox(promptText) }else{ var formData = { user_id: this.user_id, nickName: this.nickName, page: that.curPage }; that.getRequestFunc(formData); } }, // 直接跳转到首页，即第一页 goToIndexPage: function(){ var that = this; if(that.curPage== 1){ var promptText = '这已经是第一页了！'; that.callPromptBox(promptText) }else{ that.curPage= 1; var formData = { user_id: this.user_id, nickName: this.nickName, page: that.curPage }; that.getRequestFunc(formData); } }, // 直接跳转到尾页 goToLastPage: function(){ var that = this; if(that.curPage== that.totalPage){ var promptText = '这已经是最后一页了！'; that.callPromptBox(promptText) }else{ that.curPage= that.totalPage; var formData = { user_id: this.user_id, nickName: this.nickName, page: that.curPage }; that.getRequestFunc(formData); } },
好了，做完了，大家可复制代码去查看效果，数据可以自己写死，然后去测试。
当然了，我的代码肯定有瑕疵，所以大家在测试的时候，自己觉得有优化的地方可以去尝试优化下，让代码更精简，鲁棒性更强。