Vue外掛程式 vant當中van list的使用

先看官網  點這裡

1、安裝

npm i vant -s

2、引入 在src/main.js裡面引入 

import vue from

'vue';
import 
from
'vant';
vue.use(list);

3、使用  teamplate

//van-list  是必須帶的標籤，裡面的標籤可以自己加

list
v-model="
loading
":finished="
finished
"finished-text="沒有更多啦"
@load="
load_more
"class="
publist
" >
for="
(item,ing) of list
" :key="
ing">}

script

export default

},methods:,
onload() 
axios.post(
'api/test/xbxxf
',data)
.then(res =>
else
} })
}}}

另外注意css，因為滑動載入，看你滑動的是不是當前模組，如果滑動的不是當前的模組，是父元素或者其他的元素，不會觸發載入事件，也不會請求資料

vue專案中使用vant外掛程式

下面使用vant外掛程式的方法是官方推薦的一種方法，是自動按需引入的。如果您按照下面方法沒能成功引入vant，您可以到官網去檢視其它引入方法。vant官網 在專案的根目錄下，使用npm i vant s命令安裝vant 在專案的根目錄下，使用npm i babel plugin import d命令...

骨架屏（vant外掛程式）

顯示如圖 skeleton 骨架屏 將loading屬性設定成false表示內容載入完成，此時會隱藏佔位圖，並顯示skeleton的子元件段落佔位圖寬度，可傳陣列來設定每一行的寬度段落佔位圖行數頭像佔位圖大小通過title屬性顯示標題佔位圖，通過row屬性配置佔位段落行數 main.js 引入van...

vue 移動端適配vant

下面我們分別將這兩個工具配置到專案中完成 rem 適配。一 使用 lib flexible 動態設定 rem 基準值 html 標籤的字型大小 1 安裝 npm i amfe flexible2 然後在 main.js 中載入執行該模組 import amfe flexible 二 使用 postc...