Skip to content

Commit

Permalink
feat: infinate-scroll and refresh ✨
Browse files Browse the repository at this point in the history
  • Loading branch information
@TIGERB
TIGERB committed Nov 22, 2016
1 parent 8c28cb2 commit 1711ebf
Show file tree
Hide file tree
Showing 7 changed files with 110 additions and 91 deletions.
14 changes: 8 additions & 6 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,11 @@
> a easy example to use vue to implement easy web

## Latest Version 0.5.0(2016/11/25)
## Latest Version 0.5.0(2016/11/22)

- 0.5.0
+ use vue 2.0
+ use vuex 2.0
- 0.3.0
+ change UI for easy-vue
+ use vue-progressbar
Expand All @@ -23,8 +24,9 @@
> <http://tigerb.github.io/easy-vue>
## How To Use ?
* `update the variable "domain" to your domain in webpack.config.js`
* `npm install`
* `bower install`
* `npm run test (develop environment) OR npm run build (production environment)`
* `php environment to use server.php simulate api`
1. npm install
2. bower install
3. build
- develop environment: `DOMAIN=http://yourdomain npm run test`
- production environment: `DOMAIN=http://yourdomain npm run build`
4. php environment to use server.php simulate api
15 changes: 7 additions & 8 deletions app.js
View file
Original file line number Diff line number Diff line change
@@ -1,26 +1,26 @@
var Vue　　　 = require('vue'); // get vue
var App　　　 = require('./app.vue'); // get root module
var store　　 = require('./store.js'); // get root module
var store　　 = require('./store.js'); // get vuxe -> store

var VueRouter = require('vue-router'); //get vue-router
var VueProgressBar = require('vue-progressbar'); // get vue-progressbar
var infiniteScroll = require('vue-infinite-scroll');
var infiniteScroll = require('vue-infinite-scroll');// get vue-infinite-scroll

Vue.use(infiniteScroll)
Vue.use(VueRouter); //error:　Please install the Router with Vue.use() before creating an instance
Vue.use(VueRouter);
var options = {
color: '#bffaf3',
color: '#fff',
failedColor: '#874b4b',
thickness: '5px',
thickness: '3px',
transition: {
speed: '0.2s',
opacity: '0.6s'
},
autoRevert: true,
location: 'left',
location: 'top',
inverse: false
};
Vue.use(VueProgressBar, options);
Vue.use(infiniteScroll)

var viewPath = './src/views/'; //component src
var routes = [
Expand All @@ -39,5 +39,4 @@ var app = new Vue({
render: function (h) {
return h(App);
}
// store,
}).$mount('#app');
6 changes: 3 additions & 3 deletions src/components/barBottom.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,17 +27,17 @@
mounted: function () {
this.$nextTick(function () {
var uri = window.location.hash;
if (uri === '#!/') {
if (uri === '#/') {
this.isOnePage = true;
this.isTwoPage = false;
this.isThreePage = false;
}
if (uri === '#!/two') {
if (uri === '#/two') {
this.isOnePage = false;
this.isTwoPage = true;
this.isThreePage = false;
}
if (uri === '#!/three') {
if (uri === '#/three') {
this.isOnePage = false;
this.isTwoPage = false;
this.isThreePage = true;
Expand Down
5 changes: 4 additions & 1 deletion src/components/barTop.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,10 @@
alert('write something');
},
refresh: function () {
this.$store.state.card.isRefresh = true;
this.$store.dispatch('getData', {
progress: this,
refresh: true
});
}
}
}
Expand Down
77 changes: 21 additions & 56 deletions src/components/card.vue
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<div class="content easy-vue-card" v-infinite-scroll="loadMore()" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
<div class="content easy-vue-card" v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
<p v-for="result in results">
<img src="../images/easy-vue.jpg">
<span>{{result}}</span>
Expand All @@ -14,86 +14,51 @@
</template>

<script>
import {mapState} from 'vuex';
module.exports = {
data:function () {
return {
busy:false,
isloadingComplete: false
isloadingComplete: false,
results: []
}
},
components:{
'nsr-loading':require('../components/loading.vue'),
},
mounted: function () {
this.$nextTick(function () {
console.log(this.$store);
console.log(this.$store.state);
console.log(this.$store.getters);
// this.$store.state.moduleCard.cardData = [];
// this.fetchData(this, true);
this.fetchData(this);
})
},
methods:{
fetchData: function (Vue, refresh) {
var self = Vue;
self.$progress.set(0);
self.$progress.start();
self.isloadingComplete = false;
self.busy = true;
fetch('/server.php')
.then(function(response) {
return response.json()
}).then(function(json) {
self.$progress.finish();
self.isloadingComplete = true;
self.busy = false;
//fake data
json = [
'Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life' + + Math.random()*100000000000,
'Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life' + + Math.random()*100000000000,
'Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life' + + Math.random()*100000000000,
'Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life' + + Math.random()*100000000000,
'Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life' + + Math.random()*100000000000,
'Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life' + + Math.random()*100000000000,
'Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life' + + Math.random()*100000000000,
'Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life' + + Math.random()*100000000000,
'Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life' + + Math.random()*100000000000,
'Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life' + + Math.random()*100000000000,
'Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life' + + Math.random()*100000000000,
'Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life' + + Math.random()*100000000000,
'Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life' + + Math.random()*100000000000,
'Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life' + + Math.random()*100000000000,
'Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life' + + Math.random()*100000000000,
'Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life' + + Math.random()*100000000000,
'Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life' + + Math.random()*100000000000,
];
if (refresh === true) {
// this.$store.moduleCard.actions.clearData();
}else {
// this.$store.moduleCard.actions.addData(json);
}
}).catch(function(ex) {
console.log(ex);
self.$progress.failed();
self.busy = false;
fetchData: function (progress) {
this.$store.dispatch('getData', {
progress: progress,
refresh: false
});
},
loadMore: function () {
// this.fetchData(this, false);
this.fetchData(this);
}
},
events:{
//catch refresh event boardcast by parent component
'refresh': function(){
this.fetchData(this, true);
computed: mapState({
results: function (state) {
return state.cardData;
},
isloadingComplete: function (state) {
return state.isloadingComplete;
},
busy: function (state) {
return state.busy;
}
}
})
}
</script>

<style>
.easy-vue-card{
background-color: #f3f3f3 !important;
background-color: #f3f3f3 !important;
}
.easy-vue-card p{
Expand Down
82 changes: 66 additions & 16 deletions store.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,31 +5,72 @@ Vue.use(Vuex);

var state = {
cardData: [],
isRefresh: false,
test: 1
isloadingComplete: false,
busy: false,
test: [
'Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life' + + Math.random()*100000000000,
'Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life' + + Math.random()*100000000000,
'Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life' + + Math.random()*100000000000,
'Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life' + + Math.random()*100000000000,
'Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life' + + Math.random()*100000000000,
'Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life' + + Math.random()*100000000000,
'Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life' + + Math.random()*100000000000,
'Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life' + + Math.random()*100000000000,
'Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life' + + Math.random()*100000000000,
'Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life' + + Math.random()*100000000000,
'Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life' + + Math.random()*100000000000,
'Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life' + + Math.random()*100000000000,
'Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life' + + Math.random()*100000000000,
'Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life' + + Math.random()*100000000000,
'Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life' + + Math.random()*100000000000,
'Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life' + + Math.random()*100000000000,
'Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life' + + Math.random()*100000000000,
]
};

var getters = {
getData: function (state) {
return state.test;
}

}

var mutations = {
updateLoadingState(state, data){
state.isloadingComplete = data;
},
updateBusyState(state, data){
state.busy = data;
},
addData(state, data){
state.cardData = state.cardData.concat(data);
},
clearData(state){
state.cardData = [];
refreshData(state, data){
state.cardData = data;
}
};

var actions = {
addData(context, data){
context.commit('addData', data);
},
clearData(context){
context.commit('clearData');
getData(context, object){
var progress = object.progress;
var isRefresh = object.refresh;
progress.$Progress.start();
context.commit('updateLoadingState', false);
context.commit('updateBusyState', true);
fetch('/server.php')
.then(function(response) {
return response.json();
}).then(function(json) {
context.commit('updateLoadingState', true);
context.commit('updateBusyState', false);
if (isRefresh === true) {
context.commit('refreshData', json);
}else {
context.commit('addData', json);
}
progress.$Progress.finish();
}).catch(function(ex) {
console.log(ex);
context.commit('updateBusyState', false);
progress.$Progress.fail();
});
}
};

Expand All @@ -40,8 +81,17 @@ var moduleCard = {
actions: actions
};

export default new Vuex.Store({
modules: {
moduleCard: moduleCard
}
var store = new Vuex.Store({
state: state,
getters: getters,
mutations: mutations,
actions: actions
});

module.exports = store;

// export default new Vuex.Store({
// modules: {
// moduleCard: moduleCard
// }
// });
2 changes: 1 addition & 1 deletion webpack.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ var CleanPlugin = require('clean-webpack-plugin');// clean bulid file
var webpackConfig = module.exports = {};//　init object
var production = process.env.NODE_ENV === 'production';// production environment

var domain = 'http://easy-vue.local'; // your domain process.env.DOMAIN
var domain = process.env.DOMAIN; // your domain process.env.DOMAIN

// input
webpackConfig.entry　 =　{
Expand Down

0 comments on commit 1711ebf

Please sign in to comment.