BLQ
WaterFall 瀑布流该组件一般用于两栏高度不一的滑动场景。
平台差异说明
小程序 | h5 | android | ios |
---|---|---|---|
√ | √ | √ | √ |
::: tip 温馨提示
由于小程序端暂不支持作用域插槽和同名插槽,故小程序端根据下标或者uid
循环产生多个具名插槽的方式来实现。
:::
下载安装
npm install @tjdata/s-waterfall
基本使用
<template>
<view>
<s-waterfall :list="list">
<!-- #ifndef MP-WEIXIN -->
<template slot-scope="props" slot="content">
<view class="content">
<view>{{props.row.title}}</view>
<view class="money">{{props.row.money}}元</view>
<view style="margin: 0 0 8rpx 0;">
<text class="label">{{props.row.label}}</text>
</view>
<view class="shop-name">{{props.row.shop}}</view>
</view>
</template>
<!-- #endif -->
<!-- #ifdef MP-WEIXIN -->
<view class="content" v-for="(item, index) in list" slot="content{{index}}" :key="index">
<view>{{item.title}}</view>
<view class="money">{{item.money}}元</view>
<view style="margin: 0 0 8rpx 0;">
<text class="label">{{item.label}}</text>
</view>
<view class="shop-name">{{item.shop}}</view>
</view>
<!-- #endif -->
</s-waterfall>
<view class="load-txt">{{ajax.loadTxt}}</view>
</view>
</template>
<script>
import sWaterfall from "@tjdata/s-waterfall"
export default {
components: {
sWaterfall
},
data() {
return {
list: [],
ajax: {
// 是否可以加载
load: true,
// 加载中提示文字
loadTxt: '',
// 每页的请求条件
rows:10,
// 页码
page:1,
}
}
},
onReady() {
this.getList();
},
// 触底触发
onReachBottom() {
this.getList();
},
// 下拉刷新
onPullDownRefresh(){
// 正常情况下接口返回应该很会很快。故意延迟调用,让用户有在刷新的体验感
setTimeout(()=>{
this.ajax.page = 1;
this.ajax.load = true;
this.list = []
this.getList();
},800);
},
methods: {
// 获取数据
getList() {
/*
无真实数据,当前由 setTimeout 模拟异步请求、
自行替换 请求方法将数据 传入 addList() 方法中
自行解决数据格式,自行修改组件内布局和内容绑定
*/
if (!this.ajax.load) {
return;
}
this.ajax.load = false;
this.ajax.loadTxt = '加载中';
setTimeout(() => {
// 生成随机数方法
let random = (min = 0, max) => {
return Math.floor(Math.random() * max) + min;
}
// 待选的图片数据
let imgs = ["https://img-blog.csdnimg.cn/38e9b54a3a074ffca0927167bf67d1d3.png#pic_center", "https://img-blog.csdnimg.cn/1d7a6b34e2e94abf8688d280f59e3369.jpeg", "https://img-blog.csdnimg.cn/1472181254924cc49deac35f921f2586.jpeg"];
// 待选的标题数据
let titles = [
'荣耀平板8 【保护套装】 6G + 126G;荣耀平板8 【保护套装】 6G + 126G;荣耀平板8 【保护套装】 6G + 126G;',
'支持国货 踏网红一字带凉鞋女,支持国货 踏网红一字带凉鞋女,支持国货 踏网红一字带凉鞋女。',
'Apple Mac Mini 到底有多香。',
'京东电器爆款好物推荐。',
'兰蔻七夕星河限定 196款,兰蔻七夕星河限定 196款,兰蔻七夕星河限定 196款',
];
let tags = [
'家电电器',
'化妆品',
'好物推荐',
'电子数码'
]
let res = [];
for (let i = 0; i < 10; i++) {
res.push({
url: imgs[random(0, imgs.length)],
title: titles[random(0, titles.length)],
money: random(9, 9999),
label: tags[random(0,tags.length)],
shop:'唐诗三百首旗舰店'
})
}
this.list = this.list.concat(res)
this.ajax.load = true;
uni.stopPullDownRefresh()
}, 1000);
}
}
}
</script>
<style lang="scss">
page {
background-color: #f3f3f3;
}
</style>
<style lang="scss">
.load-txt{
padding: 0 0 20rpx 0;
text-align: center;
color: #999;
font-size: 24rpx;
}
.content{
font-size: 28rpx;
color: #666;
margin-top: 16rpx;
.money{
color: #fa3534;
margin-top: 8rpx;
}
.label{
background-color: #fa3534;
color: #fff;
font-size: 20rpx;
padding: 4rpx 16rpx;
border-radius: 20rpx;
}
.shop-name{
font-size: 20rpx;
color: #999;
}
}
</style>
API
Props
参数 | 说明 | 类型 | 默认值 | 可选值 |
---|---|---|---|---|
list | 瀑布流列表数据 | Array | [] | - |
name | 列表数据图片key的名称 | String | url | - |
itemStyle | 数据项块的样式 | Object | - | - |
imageStyle | 图片的样式 | Object | - | - |
Event
| 事件名 | 说明 | 回调参数 | | :----: | :----: | :----: | :----: | | onTap | 点击某项数据时 | value:数据 |
Solt
| 名称 | 说明 | | :----: | :----: | :----: | | image | 自定义图片区域所有内容 | | content | 自定义内容区所有内容 |