手機頁面上拉重新整理vue

2021-07-30 03:40:44 字數 1604 閱讀 2201

最近做手機頁面用到了下拉重新整理 在網上搜到一款非常好用的外掛程式mint-ui 在此記錄下用法

首先 安裝

# vue 1.x

npm install mint-ui@1 -s

# vue 2.0

npm install mint-ui -s

然後import

import  from 'mint-ui';

vue.use(infinitescroll);

最後html<

divclass=>

<

course-list:course-list="latestcourse"v-infinite-scroll="loadmore"infinite-scroll-disabled="loading":infinite-scroll-distance="footerheight">

course-list>

<

divv-show="loading"class="page-infinite-loading">

<

divclass="loadingcon">

<

spanclass="loadingicon fl">

span>

<

spanclass="fl">載入中...

span>

div>

div>

div>注意幾點 1 loadmore是載入時的方法 邏輯按照自己的實際情況具體寫,

loadmore:function())

}}

,載入的gif效果也是自己寫,

2 列表的外層父級的overflow:hidden 且高度要寫死,我這裡是根據手機螢幕高度動態去計算列表的高度,只要讓它把整個頁面撐起來就可以了

頁面重新整理 重新整理vue頁面,解決資料丟失

解決方法一 最先想到的應該就是利用localstorage sessionstorage將資料儲存在外部,做乙個持久化儲存,下面是利用localstorage儲存的具體方案 方案一 由於state中的資料是響應式的,而資料又是通過mutation來進行修改,故在通過mutation修改state中資...

vue 頁面重新整理 provide inject

html 部分 原本 修改之後 isrouteralive js 部分 export default data watch created methods computed 其他頁面使用方法 export default watch created computed 在哪個方法呼叫就在 寫 this...

Vue 重新整理當前頁面

1.場景 在處理列表時,常常有刪除一條資料或者新增資料之後需要重新重新整理當前頁面的需求。2.遇到的問題 1.用vue router重新路由到當前頁面,頁面是不進行重新整理的 3.解決方法 provide inject 組合 作用 允許乙個祖先元件向其所有子孫後代注入乙個依賴,不論元件層次有多深,並...