vue.js加载新的内容(实例代码)
网络编程 2021-07-04 18:32www.168986.cn编程入门
vue是一种轻巧便捷的框架,那么如何进行对于数据加载的刷新呢?以下就是我对于vue.js数据加载的一点想法
vue是一种轻巧便捷的框架,那么如何进行对于数据加载的刷新呢?以下就是我对于vue.js数据加载的一点想法
源码:
<div @scroll="onScroll($event)" style="height: 100%;overflow: auto;"> <ul class="shop-brand-index" v-show="sitems.length > 0" > <li v-for="item in sitems"> <div @click="linkUrl(item.code)"><img v-bind:src="item.publicImg"></div> </li> </ul> <div class="loading_wrap myload disn"> <p>加载中...</p> <i class="loading"></i> </div> </div>
解析:
$(function() { var pageNum = 1; var pageSize = 6; vue = new Vue({ el: '#app', data: { items: [], pageNum: pageNum, pageSize: pageSize, rawItems: [], sitems:[] }, methods: { getList: function() { $.showLoading(); this.$http.get(store.list, { pageNum: pageNum, pageSize: pageSize }).then(function(result) { $.removeLoading(); this.sitems = result.data.data.items; }, function() { $.removeLoading(); $.showAlert({ 'title': '提示', 'content': "页面偷懒了~~", 'sure': this.close }); }) }, close: function() { history.go(-1); }, onScroll: function(event) { var offsetHeight = event.currentTarget.offsetHeight, scrollHeight = event.target.scrollHeight, scrollTop = event.target.scrollTop, scrollBottom = offsetHeight + scrollTop; if(scrollBottom == scrollHeight+10 ||scrollBottom == scrollHeight) { if(this.pageNum == Math.ceil(this.rawItems.length / this.pageSize)) { return } this.pageNum++; pageNum++; $(".myload").removeClass("disn"); vue.$http.get(store.list, { pageNum: pageNum, pageSize: pageSize }).then(function(result) { setTimeout(function() { $(".myload").addClass("disn"); vue.sitems = vue.sitems.concat(result.data.data.items); }, 2000) }, function() { $(".myload").addClass("disn"); }) } }, }, ready: function() { this.getList(); for(var i = 0; i <= 1000; i++) { this.rawItems.push(i) } } }) })
以上所述是长沙网络推广给大家介绍的vue.js加载新的内容(实例代码),希望对大家有所帮助,如果大家有任何疑问请给我留言,长沙网络推广会及时回复大家的。在此也非常感谢大家对狼蚁SEO网站的支持!
编程语言
- 机械手焊接机器人编程 机械手焊接设备编程
- vb数据库编程实例,vb做数据库
- tiobe世界编程语言排行榜,全球编程语言排行
- 成都java编程培训 成都it编程培训中心
- 编程基础培训,编程基础知识培训
- flash游戏编程基础教程,flash游戏开发教程
- 不会英语能学编程吗 不会英语可以学程序员吗
- 爱心代码编程C语言 爱心代码编程c语言公式
- c语言编程学习入门 c语言编程快速入门
- 西门子plc编程培训 西门子plc编程培训班
- 哪里可以学编程 台州哪里可以学编程
- 少儿编程哪个好 少儿编程哪个品牌好
- 编程是什么意思,图形编程是什么意思
- c语言编程软件下载,c语言编程软件在哪下载
- java编程软件下载,java编程下载手机版
- ug编程培训学校,ug编程培训教程