總之先上效果圖
瀑布流是使用Lin UI實現(xiàn)的所以要先安裝Lin UI
數(shù)據(jù)請求與處理
原始的api有兩個參數(shù)
- start 獲取記錄的起始序號
- count 一次獲取記錄的條數(shù)
這是封裝后的函數(shù)之后會用到
static async getLatestSpu(start, count)
這是請求到的數(shù)據(jù)格式
{
"total":1, // 數(shù)據(jù)總條數(shù)
"count":10, // 每頁展示條數(shù)
"page":0, // 頁碼
"total_page":1, // 總頁數(shù)
"items":[
{
"title":"ins復(fù)古翠綠NoteBook",
"subtitle":"林白默默的掏出小本本殃饿，將她說的話一次不漏的記了下來。",
"img":"",
"price":"29.99",
"discount_price":"27.8",
"description":null,
"tags":"林白推薦" // 標(biāo)簽以$分割
}
]
}
瀑布流組件的使用方法
Lin UI中的瀑布流組件使用了小程序中抽象節(jié)點(diǎn)l-water-flow-item中傳入一個組件作為瀑布流中的單元格，之后通過wx.lin.renderWaterFlow(data, refresh, success)函數(shù)進(jìn)行渲染其中data參數(shù)需要一個數(shù)組是瀑布流中所需要的數(shù)據(jù)，refresh參數(shù)為是否刷新數(shù)據(jù)（刪除之前已經(jīng)加載的數(shù)據(jù)），success渲染成功后的回調(diào)函數(shù)
編寫瀑布流需要的組件
先新建一個組件蹋盆。
根據(jù)需求Lin UI中的card組件tag組件和price組件很適合用來編寫需要的瀑布流單元格先把他們在json文件中引入
{
"component": true,
"usingComponents": {
"l-card": "/miniprogram_npm/lin-ui/card/index",
"l-tag": "/miniprogram_npm/lin-ui/tag/index",
"l-price": "/miniprogram_npm/lin-ui/price/index"
}
}
這是組件的js文件
Component({
properties: {
data: Object, // 接收瀑布流數(shù)組元素
showBasePrice: { // 顯示原價
type: Boolean,
value: false
}
},
data: {
tags: [] // 標(biāo)簽數(shù)組
},
lifetimes: {
attached() {
const tags = this.properties.data.tags.split('$'); // 將標(biāo)簽分割成數(shù)組
this.setData({tags});
}
}
});
有的地方瀑布流不需要顯示原價showBasePrice屬性可以用來控制是否顯示原價
接下來是wxml文件
<l-card type="cover" image="{{data.img}}" title="{{data.title}}" image-mode="widthFix"
l-class="card-container" l-img-class="card-img" l-title-class="card-title">
<view class="content-text">
<view class="tag-container">
<block wx:for="{{tags}}">
<l-tag wx:if="{{item}}" bg-color="#DCEBE6" font-color="#557862" l-class="tag-item">{{item}}</l-tag>
</block>
</view>
<view class="price">
<!-- 需要顯示原價且有優(yōu)惠價-->
<block wx:if="{{showDiscount && data.discount_price}}">
<l-price unit="￥" value="{{data.discount_price}}" unit-color="#557862" value-color="#557862" size="36" bold="600"/>
<l-price unit="￥" wx:if="{{data.price}}" unit-color="#666" value="{{data.price}}" deleted value-color="#666" del-color="#666"/>
</block>
<!-- 不需要顯示原價-->
<l-price unit="￥" wx:elif="{{data.discount_price}}" value="{{data.discount_price}}" unit-color="#557862" value-color="#557862" size="36" bold="600"/>
<l-price unit="￥" wx:else value="{{data.price}}" unit-color="#557862" value-color="#557862" size="36" bold="600"/>
</view>
<text class="describe">{{data.subtitle}}</text>
</view>
</l-card>
wxml中用到的組件用法參考
card組件文檔
tag組件文檔
price組件文檔
wxss文件就不貼了
觸底加載
小程序中因為有onReachBottom()函數(shù)觸底加載比較好實現(xiàn)，分頁的控制比較麻煩，所以我寫了一個PageBean用來控制分頁
export class PageBean {
count; // 每頁條數(shù)
start; // 開始位置
total; // 總數(shù)據(jù)條數(shù)
isEnd = false; // 是否是最后一頁
// 初始化
constructor(count = 6) {
this.start = 0;
this.count = count;
}
// 將pageBean的屬性改到下一頁
nextPage() {
if (!this.total || (this.start + this.count) < this.total) {
this.start += this.count;
} else {
this.isEnd = true;
}
}
}
下面是觸底翻頁的代碼
async onReachBottom() {
// 判斷本頁不是最后一頁且沒有在加載
if (!this.page.isEnd && !this.data.onLoad) {
// 設(shè)置狀態(tài)正在加載
this.setData({
onLoad: true
});
const spuList = await Spu.getLatestSpu(this.page.start, this.page.count);
wx.lin.renderWaterFlow(spuList.items, false, () => {
this.page.nextPage();
// 設(shè)置狀態(tài)為加載完畢
this.setData({
onLoad: false
})
});
} else if (this.page.isEnd) {
this.setData({
isEnd: true
});
}
}
page是PageBean的實例化對象友扰，在第一次加載數(shù)據(jù)時設(shè)置page對象的total值，這樣可以保證加載到最后一條后不再加載庶柿。onLoad是表示是否正在加載isEnd表示是否加載到最后一頁
交互反饋
觸底加載需要提示用戶加載狀態(tài)這個微信的wx.showToast()可以做到但是感覺太low了村怪，Lin UI有一個Loadmore組件可以做底部提示
是這樣用的
<view>
<l-water-flow generic:l-water-flow-item="r-goods-water"/>
<l-loadmore show="{{onLoad}}" type="loading" loading-text="正在加載" line/>
<l-loadmore show="{{isEnd}}" type="end" end-text="到底了" line/>
</view>
用到的屬性的含義
show:是否顯示頁底提示
type:頁底提示類型
loading-text:加載中狀態(tài)的文案
end-text:加載完成狀態(tài)的文案
line:是否顯示分割線
