LinUI學習11 瀑布流分頁載入的實現

在10中我們完成了對資料的分頁請求，這為我們使用linui自帶的瀑布流元件提供了資料基礎。

要實現如圖效果

要在home頁面使用linui的瀑布流，我們需要在home.json中引入

"usingcomponents":

因此我們需要自定義瀑布流內部的元件

在conpomts資料夾下新建乙個乙個spu-preview資料夾，用於存放自定義spu-preview元件

"s-spu-preview":"/components/spu-preview/index"

<

l-water-flow 
generic:l-water-flow-item
="s-spu-preview"
>
l-water-flow

/**

* 頁面上拉觸底事件的處理函式
*/onreachbottom: async function () 
wx.lin.renderwaterflow(data.items)
if(!data.moredata))}},
// 瀑布流
async initbottomspulist()
wx.lin.renderwaterflow(data.items) //linui瀑布流傳入陣列的方法
},

const tags = data.tags.split('$') //依據關鍵字「$」截斷字串組成陣列

this

.setdata()}},

/** * 元件的初始資料

*/data: ,

/** * 元件的方法列表

*/methods:

})index.json

}

<

wxs 
src="../../wxs/price.wxs"
module
="p"
>
wxs> //這裡是將折扣前後**的邏輯放在了price.wxs內部
<
view 
class
="container"
>
<
image 
mode
="widthfix"
src="}"
class
="img"
>
image
>
<
view 
class
="content-container"
>
<
text 
class
="title"
>} 
text
>
<
view 
class
="tags"
>
<
block 
wx:for
="}"
>
<
l-tag 
l-class
="l-tag"
>}
l-tag
>
block
>
view
>
<
view 
class
="price-row"
>
<
l-price 
color
=" #157658"
value-size
="28"
unit-size
="20"
autofix
value
="}"
>
l-price
>
<
l-price 
l-class
="discount_price"
color
="#999999"
size
="26"
wx:if
="}"
deleted
value
="}"
>
l-price
>
view
>
<
text 
class
="subtitle"
>}
text
>
view
>
view
>

.container

.img 
.l-tag
.title
.content-container
.price-row
.discount_price
.tags
.subtitle

function

mainprice(price,discountprice)
else
}function
slasherpriced(price,discountprice)
else
}module.exports=

jQuery無重新整理無分頁完美瀑布流

這個是個非常棒的應用！如果你善於發現美，如果你善於觀察新鮮的事物，如果你是一名有愛的前端攻城師或設計屍，那麼你一定不會對下面中的結構感到陌生。沒錯，這就是現在很火的瀑布流。也稱砌牆效果。就是這種不穩定結構，就是這種交錯之美，震撼著每個瀏覽者的視神經。對於習慣了傳統條條框框布局的讀者來說，這種方式無疑...

iOS學習筆記 瀑布流封裝

最近學習了瀑布流布局，是用collectionview實現的。首先說說設計思路，用collectionview做出來的瀑布流是固定行數或者列數的。以現在主流固定列數為例，每個item就是固定寬，不固定高，同時每個item之間的間距是固定的，那麼每行的y值計算就需要通過前一行的最短的item來確定。既...

ajax學習筆記之瀑布流

此為列數固定的瀑布流 就是無論放大縮小瀏覽器百分比 列數不變 是比較簡單的版本 學習用 這篇只是適合我自己記憶的筆記 可能不是適合所有人 隨意看看就好 布局很簡單 就是乙個ul下4個li 個數可隨意 主函式部分 請求來的資料data格式是乙個陣列中包含了多個物件 乙個物件既包含了src和寬高和介紹等...