白入門---Vue無限スクロール(vue-infinite-scroll)

Vue無限スクロール(vue-infinite-scroll)
1.プラグインのインストール
1.npm i vue-infinite-scroll–save:vue-infinite-scrollプラグインをインストールし、パッケージの名前とバージョン番号をdependenciesに入れます.
2.Dは–save-devのようにインストールされたパッケージの名前とバージョン番号がpackageに存在する.jsonのdevDependenciesはこの中にありますが、-saveはパッケージの名前とバージョン番号をdependenciesの中に置きます.
2.プラグインの使用

import infiniteScroll from 'vue-infinite-scroll'
Vue.use(infiniteScroll)

3.コンポーネントでのプラグインの使用
v-infinite-scroll="loadMore"を使用してページが最後までトリガーされたときにこの関数を実行し、infinite-scroll-disabled="busy"を使用して、スクロールが条件を満たした後にloadMore関数を実行するかどうかを判断し、infinite-scroll-distance="x"を使用して底からどのくらい離れた後にloadMoreを実行します.

"loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
  ...

  import HeadNav <span class="hljs-keyword">from</span> <span class="hljs-string">'@/components/Head'</span><span class="hljs-comment">//        </span>
  import NavBread <span class="hljs-keyword">from</span> <span class="hljs-string">'@/components/NavBread'</span><span class="hljs-comment">//        </span>
  import Footer <span class="hljs-keyword">from</span> <span class="hljs-string">'@/components/Foot'</span><span class="hljs-comment">//        </span>
  import axios <span class="hljs-keyword">from</span> <span class="hljs-string">'axios'</span><span class="hljs-comment">//  axios</span>
  export <span class="hljs-keyword">default</span>{
    data(){
      <span class="hljs-keyword">return</span>{
        list:[],<span class="hljs-comment">//       </span>
        sortFlog:<span class="hljs-keyword">true</span>,<span class="hljs-comment">//           </span>
        priceChecked:<span class="hljs-string">'all'</span>,<span class="hljs-comment">//         </span>
        busy:<span class="hljs-keyword">true</span>,<span class="hljs-comment">//        loadMore  </span>
        page:<span class="hljs-number">1</span>,<span class="hljs-comment">//        </span>
        pageSize:<span class="hljs-number">8</span>,<span class="hljs-comment">//      8   </span>
        flag:<span class="hljs-keyword">false</span>,<span class="hljs-comment">//      </span>
        priceFilter:[<span class="hljs-comment">//     </span>
          {
            startPrice:<span class="hljs-string">'0'</span>,
            endPrice:<span class="hljs-string">'100'</span>
          },
          {
            startPrice:<span class="hljs-string">'1000'</span>,
            endPrice:<span class="hljs-string">'500'</span>
          },
          {
            startPrice:<span class="hljs-string">'5000'</span>,
            endPrice:<span class="hljs-string">'1000'</span>
          },
          {
            startPrice:<span class="hljs-string">'1000'</span>,
            endPrice:<span class="hljs-string">'5000'</span>
          }
        ]
      }
    },
    components:{<span class="hljs-comment">//  </span>
      HeadNav,
      NavBread,
      Footer,
    },
    created(){
      <span class="hljs-keyword">this</span>.getGoods()
    },
    methods:{
          getGoodsList() {
            axios.<span class="hljs-keyword">get</span>(<span class="hljs-string">"http://easy-mock.com/mock/59664d4d58618039284c7710/example/goods/list"</span>).then(res=>{
                res=res.data.data;
<span class="hljs-comment">//                this.list=res;</span>
            })
          },
      getGoods(flag){
              <span class="hljs-keyword">let</span> sort=<span class="hljs-keyword">this</span>.sortFlog?<span class="hljs-number">1</span>:-<span class="hljs-number">1</span>;
              <span class="hljs-keyword">let</span> param={
                  sort:sort,
                priceLevel:<span class="hljs-keyword">this</span>.priceChecked,
                page:<span class="hljs-keyword">this</span>.page,
                pageSize:<span class="hljs-keyword">this</span>.pageSize
              }
        axios.<span class="hljs-keyword">get</span>(<span class="hljs-string">'/goods/list'</span>,{<span class="hljs-keyword">params</span>:param}).then(res=>{
<span class="hljs-comment">//          this.list= res.data.result;</span>
            <span class="hljs-keyword">if</span>(flag){<span class="hljs-comment">//        </span>
                <span class="hljs-keyword">this</span>.list=<span class="hljs-keyword">this</span>.list.concat(res.data.result);<span class="hljs-comment">//         list  </span>
              <span class="hljs-keyword">if</span>(res.data.result.length==<span class="hljs-number">0</span>){<span class="hljs-comment">//         ，      </span>
                  <span class="hljs-keyword">this</span>.busy=<span class="hljs-keyword">true</span>;
              }<span class="hljs-keyword">else</span>{
                  <span class="hljs-keyword">this</span>.busy=<span class="hljs-keyword">false</span>;
              }
            }<span class="hljs-keyword">else</span>{
                <span class="hljs-keyword">this</span>.list=res.data.result;
                <span class="hljs-keyword">this</span>.busy=<span class="hljs-keyword">false</span>;
            }
            console.log(res.data.result);
        })
      },
      sortGoods(){
        <span class="hljs-keyword">this</span>.sortFlog=!<span class="hljs-keyword">this</span>.sortFlog;
        <span class="hljs-keyword">this</span>.getGoods();
      },
      setPriceFilter(index){
          <span class="hljs-keyword">this</span>.priceChecked=index;
          <span class="hljs-keyword">this</span>.page=<span class="hljs-number">1</span>;
          <span class="hljs-keyword">this</span>.getGoods();
      },
      loadMore:function () {
        <span class="hljs-keyword">this</span>.busy=<span class="hljs-keyword">true</span>;
        setTimeout(()=>{
            <span class="hljs-keyword">this</span>.page++;
            <span class="hljs-keyword">this</span>.getGoods(<span class="hljs-keyword">true</span>);
        },<span class="hljs-number">500</span>)
      }
    }
  }