關於Vue iview的簡單下拉框滾動載入

2022-08-23 20:24:13 字數 1154 閱讀 9374

話不多說,直接上**,作用是下拉框內容無限滾動載入:

html:

"

position:relative

" label="

使用者名稱:

" prop="

username

">

"formvalidate.username

" :disabled="

usenamedisable

" placeholder="

請輸入使用者名稱

" @on-blur="

clickblur

" @on-focus="

clickfocus

">

class="

scollclass

" v-if="

scollshow

">

"120" :on-reach-bottom="

handlereachbottom

">

for="

item in usernamelist

" :key="

item.name

" @mousedown="

scolllistclick(item)

"class="

scolllistclass

">}

js:

//

無限載入中的事件

scolllistclick(val),

clickfocus(),

clickblur(),

//無限載入

handlereachbottom () ).then(res =>}}

else)}

})resolve();

}, 500);

});},

css:

.scollclass

/*定義滾動條軌道 內陰影+圓角

*/::-webkit-scrollbar-track

/*定義滑塊 內陰影+圓角

*/::-webkit-scrollbar-thumb

}.scolllistclass

樣式根據具體情況可以自行改動,進行進一步簡單完善封裝可以直接用

Vue iview分頁元件的簡單使用

首先看看iview 分頁元件的使用方法 1 total是page屬性,為總條數 2 current是page屬性,為當前頁數 3 page size是page屬性,為當前顯示資料條數 4 show elevat對應html 圖中跳至1頁 5 show sizer對應html圖中10條 頁 6 sho...

關於 下拉重新整理EGORefre

下拉重新整理egorefreshtableheaderview rel noopener noreferrer 關於 下拉重新整理egorefreshtableheaderview mephisto cc import egorefreshtableheaderview.h 這個裡面的東西 包含到自...

關於webview下拉重新整理的衝突

前端剛做了了乙個頁面,當頁面滾動的是的時候,下拉不會回滾,直接觸發父控制項的下拉重新整理邏輯,經過測試後發現 webview.getscrolly 的值一直為0,處理方法如下 個別頁面 getscrolly一直為0 手動滾到1 方便呼叫重新整理控制項 webview.setontouchlisten...