$ Refs

最後の更新でローリングしてロードされたパッケージにvue $ emitと$を使用します



Use Vue Emit Packages Loaded Rolling End Refresh



  • （eventName）モニターイベントで$を使用する
  • $ Emmit（eventName）トリガーイベントを使用する
    $イベントがトリガーされると$をモニターに配信し、$イベントを配信し、コマンドを送信し、学校が発行した実行コマンドを実行して1対1で実行します。
// sliding bottom loading component scrollLower.vue <template> <div> <slot name='list'></slot> <div v-show='!isLoading && isDone'> <slot>No more data the</slot> </div> <div v-show='isLoading'> <slot>Loading</slot> </div> </div> </template> <script> export default { props: { // parent component delivery methods onScroll: { type: Function, required: true }, }, data() { return { isLoading: false, // false representation to load more, true representation loaded isDone: false // false data on behalf of not fully loaded } }, methods: { init() { this.$on('loadedDone', () => { this.isLoading = false this.isDone = true }) // restore state loadable this.$on('finishLoading', () => { console.log('fhdjfdj') this.isLoading = true }) }, // Get ScrollTop getScrollTop() { var scrollTop = 0,bodyScrollTop = 0,documentScrollTop = 0 if (document.body) { bodyScrollTop = document.body.scrollTop } if (document.documentElement) { documentScrollTop = document.documentElement.scrollTop } scrollTop =bodyScrollTop - documentScrollTop > 0 ? bodyScrollTop : documentScrollTop return scrollTop }, // drop-down bottom listener event handler method scrollHander() { if (this.isLoading || this.isDone) return // text visible height let baseHeight = document.documentElement.clientHeight // hide slidably comprise an overflow portion let moreHeight = document.body.scrollHeight // sliding distance let scrollTop = this.getScrollTop() // determine whether bottoming if (baseHeight + scrollTop > moreHeight) { this.isLoading = true this.onScroll() } } }, mounted() { this.scrollview = window this.scrollview.addEventListener('scroll', this.scrollHander, false) this.$nextTick(this.init()) } } </script>

scrollLowerを使用する親コンポーネント

<template> <div> <scrollLower:onScroll='loadingData' ref='scroll'> <ul slot='list' class='ul'> <li v-for='item in list' class='listitem'>{{item}}</li> </ul> </scrollLower> </div> </template> <script> import scrollLower from '@/components/scrollLower' export default { components: { scrollLower }, data() { return { list: [1, 2, 3, 4, 5, 6, 7, 5, 8, 9, 4, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 0, 0] } }, methods:{ // function to perform load data when scrolling in the end section loadingData(){ setTimeout(()=>{ this.list.push('d') this.$refs.scroll.$emit('loadedDone') },2000) } } } </script> <style> .listitem{ width: 500px height: 150px border: 1px solid } </style>