更新记录
1.2(2024-07-20) 下载此版本
1.修复vue2中web端页面初始化不加载情况;
2.实现方法:异步初始化数据页面渲染加载 // 1. 方式一 / this.$nextTick(()=>{ }) / // 2.方式二 / setTimeout(()=>{ },20) /
1.1(2024-07-19) 下载此版本
1.瀑布流组件发布上线,轻量级多端适用。 2.优化文档使用方法
1.0(2024-07-19) 下载此版本
1.瀑布流组件发布,轻量级多端适用
查看更多平台兼容性
Vue2 | Vue3 |
---|---|
√ | √ |
App | 快应用 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 |
---|---|---|---|---|---|---|
HBuilderX 3.8.0 | √ | √ | √ | √ | √ | √ |
钉钉小程序 | 快手小程序 | 飞书小程序 | 京东小程序 |
---|---|---|---|
√ | √ | √ | √ |
H5-Safari | Android Browser | 微信浏览器(Android) | QQ浏览器(Android) | Chrome | IE | Edge | Firefox | PC-Safari |
---|---|---|---|---|---|---|---|---|
√ | √ | √ | √ | √ | √ | √ | √ | √ |
1.一个闲着无聊的前端开发人员小彬,给大家分享点实用干货。有兴趣欢迎点赞收藏。
2.有疑问联系QQ173-2755-058哦。
3.插件如果有帮助到你的,请给me一个小小的收藏,谢谢大家支持。
4.遇到bug欢迎大家在下面留言或私信我,我会积极更新优化出更好的产品给大家。
5.项目实例请查看 @components/BinBin-waterfallFlowFolder/flowIndex.vue
以下是插件使用方法:
<template>
<view class="container">
<waterfallFlowVue :imgList="colums" @fastpayId="fastpayId"></waterfallFlowVue>
</view>
</template>
<script>
import waterfallFlowVue from '@/components/BinBin-waterfallFlowFolder/BinBin-waterfallFlowFolder.vue'
export default {
components: {
waterfallFlowVue
},
data() {
return {
colums: [{
id: 1,
picture: 'https://img2.baidu.com/it/u=,&fm=253&app=138&f=JPEG?w=800&h=1067',
name: '李宁1',
sale: '500',
saleType: 1,
promotionPrice: '433',
price: '566',
companyName: '好再来官方旗舰店'
},
{
id: 2,
picture: 'https://img1.baidu.com/it/u=,&fm=253&app=138&f=JPEG?w=500&h=707',
name: '李宁2',
sale: '500',
saleType: 1,
promotionPrice: '433',
price: '566',
companyName: '好再来官方旗舰店'
},
{
id: 3,
picture: 'https://t14.baidu.com/it/u=,&fm=224&app=112&f=JPEG?w=500&h=500',
name: '李宁3',
sale: '500',
saleType: 1,
promotionPrice: '433',
price: '566',
companyName: '好再来官方旗舰店'
},
{
id: 4,
picture: 'https://img2.baidu.com/it/u=,&fm=253&app=138&f=JPEG?w=500&h=707',
name: '李宁4',
sale: '500',
saleType: 1,
promotionPrice: '433',
price: '566',
companyName: '好再来官方旗舰店'
},
{
id: 5,
picture: 'https://t13.baidu.com/it/u=,&fm=224&app=112&f=JPEG?w=375&h=500',
name: '李宁5',
sale: '500',
saleType: 1,
promotionPrice: '433',
price: '566',
companyName: '好再来官方旗舰店'
},
{
id: 6,
picture: 'https://t14.baidu.com/it/u=,&fm=224&app=112&f=JPEG?w=500&h=500',
name: '李宁6',
sale: '500',
saleType: 1,
promotionPrice: '433',
price: '566',
companyName: '好再来官方旗舰店'
},
{
id: 7,
picture: 'https://cos2.solepic.com//b_461.jpg',
name: '李宁7',
sale: '500',
saleType: 1,
promotionPrice: '433',
price: '566',
companyName: '好再来官方旗舰店'
},
{
id: 8,
picture: 'https://img2.baidu.com/it/u=,&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
name: '李宁8',
sale: '500',
saleType: 1,
promotionPrice: '433',
price: '566',
companyName: '好再来官方旗舰店'
},
{
id: 9,
picture: 'https://pic.quanjing.com/87/7c/QJ.jpg@!350h',
name: '李宁9',
sale: '500',
saleType: 1,
promotionPrice: '433',
price: '566',
companyName: '好再来官方旗舰店'
},
{
id: 10,
picture: 'https://img2.baidu.com/it/u=,&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
name: '李宁10',
sale: '500',
saleType: 1,
promotionPrice: '433',
price: '566',
companyName: '好再来官方旗舰店'
},
{
id: 11,
picture: 'https://t13.baidu.com/it/u=,&fm=224&app=112&f=JPEG?w=500&h=500',
name: '李宁11',
sale: '500',
saleType: 1,
promotionPrice: '433',
price: '566',
companyName: '好再来官方旗舰店'
},
{
id: 12,
picture: 'https://img6.hznzcn.com/goods/crawler//000.jpg',
name: '定制t恤印字logo照片短袖同学聚会班服工作衣服定做广告文化衫di',
sale: '500',
saleType: 1,
promotionPrice: '433',
price: '566',
companyName: '好再来官方旗舰店'
},
]
}
},
methods: {
fastpayId(id) {
console.log(id, );
}
}
}