list-waterfall 相关代码见 https://ask.dcloud.net.cn/publish/article/39444
<template>
<view class="page">
<view :style="{ height: statusBarHeight }" />
<view class="tabs">
<view v-for="(item, idx) in tabs" :key="idx" class="tab" :class="{ active: current === idx }" @click="onChange(idx)">
<text class="name">{{ item.name }}</text>
<view class="line" />
</view>
</view>
<swiper style="flex: 1" :current="current" @change="onChange($event.detail.current)">
<swiper-item>
<list>
<cell v-for="idx in 20" :key="idx">
<view class="wide">{{ idx }}</view>
</cell>
</list>
</swiper-item>
<swiper-item>
<list-waterfall>
<template v-slot:header>
<view class="header">header</view>
</template>
<cell v-for="idx in 20" :key="idx">
<view class="card">{{ idx }}</view>
</cell>
</list-waterfall>
</swiper-item>
<swiper-item>
<waterfall :left-gap="gap32" :right-gap="gap32" :column-gap="gap24" :column-width="colWidth" :column-count="colCount">
<cell v-for="idx in 20" :key="idx">
<view class="card">{{ idx }}</view>
</cell>
</waterfall>
</swiper-item>
</swiper>
</view>
</template>
<script>
import ListWaterfall from './list-waterfall.vue'
export default {
components: {
ListWaterfall,
},
data() {
const sys = uni.getSystemInfoSync()
return {
load: [0, 0, 0],
current: 1,
tabs: [{ name: '关注' }, { name: '发现' }, { name: '推荐' }],
//
gap32: uni.upx2px(32),
gap24: uni.upx2px(24),
colWidth: uni.upx2px(331),
statusBarHeight: sys.statusBarHeight,
}
},
created() {
this.$set(this.load, this.current, 1)
},
methods: {
onChange(idx) {
if (this.current === idx) return
this.load[idx] = 1
this.current = idx
},
},
}
</script>
