瀑布流相关
个人建议(供参考)用flex布局+JS计算两列高度来实现。基本思路是flex-box容器下有左右两列容器(对应组件state中的list1和list2数组),从list1开始创建子项,创建后计算左右两列容器的高度来比较,高度小的列对应的list数组就会push一个子项,这样循环到列表项全部创建完为止。(因为商品流的图片区域高度是固定的,影响列表子项容器高度的只有标签,所以不用考虑图片加载完成后才能得到的高度,即不用考虑Image组件的onLoad事件,因此实现起来还是简单的)
注意点:Taro3的setState是异步的,给数组赋值后,获取列的DOM高度要在setState完成后。
目前纯CSS实现的瀑布流布局从multi-columns、flex-box到grid都有一定的局限性。产品要求商品流的是按行的方式排列的,高度不均的变化影响的是子项的水平位置。multi-columns是按列来排列子项,纯CSS的flex-box的瀑布流实现基本也是用列排列子项的思路。现在的grid布局实现瀑布流要基本确定每一个子项的行空间大小。grid有瀑布流布局的草案,可以完美实现瀑布流,但是还没有成为规范。
flex布局+JS计算两列高度来实现瀑布流
import Taro from '@tarojs/taro'
import React, {
Component } from 'react'
import {
View, Text, Image, ScrollView } from '@tarojs/components'
import {
gotoPresaleGoodDetails } from '@/utils/common/presale/index'
import {
jumpSpotGoodsDetail } from '@/utils/common/linkUrl/index'
import {
imgCdn, storeSign } from '@/utils/conf'
import {
addCartApi } from '@/api/pages/cart/index'
import {
tip } from '@/src/utils/util'
import './index.scss'
/**
* @description 公共组件==> 商品列表(预售/NEW/HOT/特供)
*/
export default class GatherListComp extends Component {
static defaultProps = {
list: []
}
state = {
}
componentWillMount() {
}
componentDidMount() {
}
gotoGoodDetails(item) {
// 预售or现货
if (item.labelType == 1 || item.skuType == 2 || item.type == 2) {
// 现货
jumpSpotGoodsDetail(item.skuId)
}
else if (item.labelType == 2 || item.skuType == 1 || item.type == 1) {
// 预售
gotoPresaleGoodDetails(item.id || item.skuId)
}
}
getIconFlag(item) {
let flag = ''
if (item.labelType == 2) {
flag = 'icon-pre'
}
if (item.skuType == 1) {
flag = 'icon-new'
}
if (item.skuType == 2) {
flag = 'icon-hot'
}
if (item.skuType == 3) {
flag = 'icon-tg'
}
return flag
}
// 加入购物车
addShopCarNum(item) {
Taro.showLoading({
title: '添加中', mask: true })
addCartApi({
skuId: item.skuId, quantity: 1 }).then(res => {
Taro.hideLoading()
tip('成功加入购物车')
}).catch(res => {
Taro.hideLoading()
let errorMsg = res && (res.message || res.error || '')
tip(errorMsg || '加入购物车失败')
})
}
goodsItemRender (item, index) {
return (
<View className='gat