tweaks to examples

Author: Chris Hurlburt

examples/src/components/pages/animation/Animation.vue

@@ -2,7 +2,7 @@
  <section class="animation">
  <Example-start
  title="Animation Example"
- description="This example demonstrates integrating an animation library, nameley GreenSock,
+ description="This example demonstrates integrating GreenSock with ScrollView
  to animate content at different scroll locations."
  ></Example-start>
 

examples/src/components/pages/infinitescroll/InfiniteScroll.vue

@@ -15,6 +15,7 @@
  <ScrollImage v-for="i in items" :source="i.url" :key="i.id" />
  </template>
  </scroll-view>
+ <h3 v-if="loading" class="loading">Loading...</h3>
 
  </section>
 </template>
@@ -33,7 +34,8 @@ export default {
  data() {
  return {
  page: 1,
- items: []
+ items: [],
+ loading: false,
  }
  },
  watch: {
@@ -47,13 +49,27 @@ export default {
  },
  methods: {
  fetchMore() {
+ this.loading = true
  axios.get(`https://jsonplaceholder.typicode.com/albums/${this.page}/photos`)
- .then(({ data }) => this.items = this.items.concat(data.slice(1, 6)))
- .catch(console.log)
+ .then(({ data }) => {
+ this.loading = false
+ this.items = this.items.concat(data.slice(1, 6))
+ })
+ .catch(e => {
+ this.loading = false
+ console.log(e)
+ })
  },
  },
  mounted () {
  $scrollview.onLastEntered = () => this.page++ // last component entered, increment the page
  }
 }
 </script>
+
+<style scoped>
+.loading {
+ text-align: center;
+}
+</style>
+

examples/src/components/pages/scrollmarkers/ScrollMarkers.vue

@@ -28,9 +28,9 @@
 
 
  <p v-if="currentlyShowing === 'fifth'" class="scroll-section">
- You might also notice they markers dont trigger a change
+ You might also notice the markers dont trigger a change
  of text until they're well into the viewport -- that's because
- of the scroll-view component's default offset of 200px (can be changed
+ of the scroll-view's default offset of 200px (can be changed
  via props).
  </p>
 

examples/src/components/pages/scrollspy/Scrollspy.vue

@@ -13,9 +13,9 @@
 
  <Example-start
  title="Scrollspy Navigation Example"
- description="This is an example demonstrating using scroll-view to build an advanced page navigation system.
+ description="This is an example demonstrating using ScrollView to build an advanced page navigation system.
  As you scroll the page and sections come into view, the menu on the left with dynamically mark your location.
- You can also easily scroll to sections by clicking items in the navigation."
+ You can also scroll to sections by clicking items in the navigation."
  ></Example-start>
 
  <template v-for="(section, i) in pageSections">