當然我寫的這個拉載入 只是針對效果圖，但是也很炫酷，適合列表哦！！
啊哈原理其實就是用了
@load 和error 的2個方法來判斷是否載入完全 和出錯
<image
class
="real-image"
@load
="onloaded"
:src
="realsrc"
:mode
="mode"
@error
="handleimgerror"
>
image
>
然後就是**周小程式期邏輯了：
我封裝了成了了元件，還是看**吧，啊哈
look：
<
template
>
<
view
class
="lazy-image"
:style
="">
<
image
class
="real-image"
@load
="onloaded"
:src
="realsrc"
:mode
="mode"
@error
="handleimgerror"
>
image
>
<
view
:class
="loaded?'loaded':''"
v-if
="!isloaderror"
>
<
image
:src
="placeholdsrc"
mode
="aspectfit"
>
image
>
view
>
<
view
:class
="loaded?'loaded':''"
v-if
="isloaderror"
>
<
image
:src
="failsrc"
mode
="aspectfit"
>
image
>
view
>
view
>
template
>
<
script
>
export
default
, failsrc:,
realsrc:,
mode:,
width:
},data()
},methods:,
//載入錯誤
handleimgerror(e)
},//銷毀**
beforedestroy()
}script
>
<
style
lang
="scss"
scoped
>
.lazy-image
view
} .loaded
}style
>
用 css3動畫判讀
isloaderror:false 這個熟悉來判斷是否載入 然後用透明度來把載入的為0 顯示對的位址可以吧。。。
面對疾風吧，幫到你了 請點個贊把 啊哈
小程式入坑記 懶載入
小程式可以說是非常火熱了，開發周期短，頁面簡潔，資料控制方便，可以說結合了三大框架的特點 頁面以index為例 utils 工具類目錄，供全域性呼叫。在utils中封裝乙個tools工具類 axios獲取請求 class tools axios method,url,data success res...
uni app 小程式生成海報
有需要的可以封裝成元件使用。context.beginpath 設定線寬 context.linewidth 4 設定間距 引數為無限陣列，虛線的樣式會隨陣列迴圈 context.setlinedash 8,8 移動畫筆至座標 x20 y20 的位置 context.moveto 20,20 繪製到...
uniapp實現瀑布流懶載入實現和無限上拉載入更多
效果圖 說明 函式說明 傳入乙個陣列，迴圈獲取高度，會根據把原陣列拆分成兩個陣列，放在兩列，計算單列累計高度，對比高度值的大小，實現瀑布流的布局，由於獲取高度需要一定的時間，所以使用async await 阻塞for 迴圈的程序，每獲取到乙個的高度就賦值渲染到頁面上，實現載入出乙個就先渲染上去，達成...