这里有新鲜出炉的 vue.js 教程,程序狗速度看过来!
Vue.js 是构建 web 界面的 JavaScript 库,提供数据驱动的组件,还有简单灵活的 API,使得 MVVM 更简单。
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)
- }
- }
- })
- })
来源: http://www.phperz.com/article/17/0812/338904.html