332 lines
8.2 KiB
Vue
332 lines
8.2 KiB
Vue
|
<template>
|
|||
|
|
<view class="flow-box" :style="'height: ' + loadingTop + 'rpx'" ref="flow_box">
|
|||
|
|
<view v-for="(item, index) in newList" :key="item.objId" class="item good_item" v-show="positionList[item.objId].imageLoad" :class="positionList[item.objId].right ? 'right' : 'left'" :style="{top: positionList[item.objId].top + 'rpx'}"
|
|||
|
|
@click="onPageJump(item)">
|
|||
|
|
<view class="goods_img">
|
|||
|
|
<image :data-id="item.objId" @load="onImageLoad" :src="item.img" mode="widthFix"></image>
|
|||
|
|
</view>
|
|||
|
|
<view class="title">{{ item.name }}</view>
|
|||
|
|
<view class="sell_well">
|
|||
|
|
<text>热销</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="info">
|
|||
|
|
<text class="money"><text>{{ item.priceDiscount }}</text></text>
|
|||
|
|
<text class="count">{{ item.numSales || 0 }}人购买</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
const defaultData = {
|
|||
|
|
// 起始距离（rpx）
|
|||
|
|
startTop: 20,
|
|||
|
|
// 除了图片和标题以外的高度（rpx）
|
|||
|
|
contentHeight: 40 + 32 + 20 + 30 + 60,
|
|||
|
|
// 瀑布流容器宽度（rpx）
|
|||
|
|
viewWidth: 344,
|
|||
|
|
// 标题可显示宽度（rpx）
|
|||
|
|
titleWidth: 300,
|
|||
|
|
// 标题文字大小（rpx）
|
|||
|
|
titleSize: 28,
|
|||
|
|
// 容器之间的间隔Y轴（rpx）
|
|||
|
|
viewSpace: 20,
|
|||
|
|
// 列表ID参数名称
|
|||
|
|
idName: "objId",
|
|||
|
|
// 列表标题参数名称
|
|||
|
|
titleName: "name",
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 文字换行计算行数
|
|||
|
|
function drawtext(text, maxWidth) {
|
|||
|
|
let textArr = text.split("");
|
|||
|
|
let len = textArr.length;
|
|||
|
|
// 上个节点
|
|||
|
|
let previousNode = 0;
|
|||
|
|
// 记录节点宽度
|
|||
|
|
let nodeWidth = 0;
|
|||
|
|
// 文本换行数组
|
|||
|
|
let rowText = [];
|
|||
|
|
// 如果是字母，侧保存长度
|
|||
|
|
let letterWidth = 0;
|
|||
|
|
// 汉字宽度
|
|||
|
|
let chineseWidth = defaultData.titleSize;
|
|||
|
|
// otherFont宽度
|
|||
|
|
let otherWidth = defaultData.titleSize / 2;
|
|||
|
|
for (let i = 0; i < len; i++) {
|
|||
|
|
if (/[\u4e00-\u9fa5]|[\uFE30-\uFFA0]/g.test(textArr[i])) {
|
|||
|
|
if(letterWidth > 0){
|
|||
|
|
if(nodeWidth + chineseWidth + letterWidth * otherWidth > maxWidth){
|
|||
|
|
rowText.push({
|
|||
|
|
type: "text",
|
|||
|
|
content: text.substring(previousNode, i)
|
|||
|
|
});
|
|||
|
|
previousNode = i;
|
|||
|
|
nodeWidth = chineseWidth;
|
|||
|
|
letterWidth = 0;
|
|||
|
|
} else {
|
|||
|
|
nodeWidth += chineseWidth + letterWidth * otherWidth;
|
|||
|
|
letterWidth = 0;
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
if(nodeWidth + chineseWidth > maxWidth){
|
|||
|
|
rowText.push({
|
|||
|
|
type: "text",
|
|||
|
|
content: text.substring(previousNode, i)
|
|||
|
|
});
|
|||
|
|
previousNode = i;
|
|||
|
|
nodeWidth = chineseWidth;
|
|||
|
|
}else{
|
|||
|
|
nodeWidth += chineseWidth;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
if(/\n/g.test(textArr[i])){
|
|||
|
|
rowText.push({
|
|||
|
|
type: "break",
|
|||
|
|
content: text.substring(previousNode, i)
|
|||
|
|
});
|
|||
|
|
previousNode = i + 1;
|
|||
|
|
nodeWidth = 0;
|
|||
|
|
letterWidth = 0;
|
|||
|
|
}else if(textArr[i] == "\\" && textArr[i + 1] == "n"){
|
|||
|
|
rowText.push({
|
|||
|
|
type: "break",
|
|||
|
|
content: text.substring(previousNode, i)
|
|||
|
|
});
|
|||
|
|
previousNode = i + 2;
|
|||
|
|
nodeWidth = 0;
|
|||
|
|
letterWidth = 0;
|
|||
|
|
}else if(/[a-zA-Z0-9]/g.test(textArr[i])){
|
|||
|
|
letterWidth += 1;
|
|||
|
|
if(nodeWidth + letterWidth * otherWidth > maxWidth){
|
|||
|
|
rowText.push({
|
|||
|
|
type: "text",
|
|||
|
|
content: text.substring(previousNode, i + 1 - letterWidth)
|
|||
|
|
});
|
|||
|
|
previousNode = i + 1 - letterWidth;
|
|||
|
|
nodeWidth = letterWidth * otherWidth;
|
|||
|
|
letterWidth = 0;
|
|||
|
|
}
|
|||
|
|
} else{
|
|||
|
|
if(nodeWidth + otherWidth > maxWidth){
|
|||
|
|
rowText.push({
|
|||
|
|
type: "text",
|
|||
|
|
content: text.substring(previousNode, i)
|
|||
|
|
});
|
|||
|
|
previousNode = i;
|
|||
|
|
nodeWidth = otherWidth;
|
|||
|
|
}else{
|
|||
|
|
nodeWidth += otherWidth;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
if (previousNode < len) {
|
|||
|
|
rowText.push({
|
|||
|
|
type: "text",
|
|||
|
|
content: text.substring(previousNode, len)
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
return rowText.length;
|
|||
|
|
}
|
|||
|
|
let allow = true;
|
|||
|
|
export default {
|
|||
|
|
props: {
|
|||
|
|
// 数据列表
|
|||
|
|
list: {
|
|||
|
|
type: Array,
|
|||
|
|
default () {
|
|||
|
|
return [];
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
newList: [],
|
|||
|
|
positionList: [],
|
|||
|
|
loadingTop: 0,
|
|||
|
|
leftHistoryTop: 0,
|
|||
|
|
rightHistoryTop: 0
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
watch: {
|
|||
|
|
// 数据
|
|||
|
|
list: function(newVal, oldVal) {
|
|||
|
|
this.newList = newVal;
|
|||
|
|
this.getCalculationPosition();
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
onPageJump(item) {
|
|||
|
|
uni.navigateTo({
|
|||
|
|
url: "/pages/home/shop/goodsDetail?objId=" + item.objId
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
refreshData() {},
|
|||
|
|
// 节流
|
|||
|
|
throttle(callback,time = 400){
|
|||
|
|
if(!allow) return false;
|
|||
|
|
allow = false;
|
|||
|
|
setTimeout(function(){
|
|||
|
|
allow = true;
|
|||
|
|
callback();
|
|||
|
|
},time);
|
|||
|
|
},
|
|||
|
|
// 获取数据位置信息 top,right
|
|||
|
|
getCalculationPosition(){
|
|||
|
|
let leftHistoryTop = defaultData.startTop;
|
|||
|
|
let rightHistoryTop = defaultData.startTop;
|
|||
|
|
let positionList = this.positionList;
|
|||
|
|
this.newList.forEach((item,index) => {
|
|||
|
|
let currentHeight = defaultData.contentHeight;
|
|||
|
|
let positionItem = {};
|
|||
|
|
// 查看是否有位置数据
|
|||
|
|
if(positionList[item[defaultData.idName]]){
|
|||
|
|
positionItem = positionList[item[defaultData.idName]];
|
|||
|
|
}else {
|
|||
|
|
positionList[item[defaultData.idName]] = {};
|
|||
|
|
}
|
|||
|
|
// 查看是否有图片高度数据，没有默认等宽
|
|||
|
|
if(positionItem.imageHeight){
|
|||
|
|
currentHeight += positionItem.imageHeight;
|
|||
|
|
positionList[item[defaultData.idName]].imageLoad = true;
|
|||
|
|
}else{
|
|||
|
|
currentHeight += defaultData.viewWidth;
|
|||
|
|
}
|
|||
|
|
// 查看是否有标题高度数据，没有获取高度
|
|||
|
|
if(positionItem.titleHeight){
|
|||
|
|
currentHeight += positionItem.titleHeight;
|
|||
|
|
}else{
|
|||
|
|
let titleListLen = drawtext(item[defaultData.titleName], defaultData.titleWidth);
|
|||
|
|
titleListLen = titleListLen > 2 ? 2 : titleListLen;
|
|||
|
|
positionList[item[defaultData.idName]].titleHeight = titleListLen * (defaultData.titleSize + 6);
|
|||
|
|
currentHeight += titleListLen * (defaultData.titleSize + 6);
|
|||
|
|
}
|
|||
|
|
if(leftHistoryTop > rightHistoryTop){
|
|||
|
|
positionList[item[defaultData.idName]].top = rightHistoryTop;
|
|||
|
|
positionList[item[defaultData.idName]].right = true;
|
|||
|
|
positionList[item[defaultData.idName]].height = currentHeight;
|
|||
|
|
rightHistoryTop += currentHeight + defaultData.viewSpace;
|
|||
|
|
}else{
|
|||
|
|
positionList[item[defaultData.idName]].top = leftHistoryTop;
|
|||
|
|
positionList[item[defaultData.idName]].right = false;
|
|||
|
|
positionList[item[defaultData.idName]].height = currentHeight;
|
|||
|
|
leftHistoryTop += currentHeight + defaultData.viewSpace;
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
if(leftHistoryTop > rightHistoryTop){
|
|||
|
|
this.loadingTop = leftHistoryTop;
|
|||
|
|
}else{
|
|||
|
|
this.loadingTop = rightHistoryTop;
|
|||
|
|
}
|
|||
|
|
this.positionList = positionList;
|
|||
|
|
this.$forceUpdate();
|
|||
|
|
},
|
|||
|
|
// 图片加载完成
|
|||
|
|
onImageLoad(e){
|
|||
|
|
let id = e.currentTarget.dataset.id;
|
|||
|
|
let scale = defaultData.viewWidth / e.detail.width;
|
|||
|
|
let height = scale * e.detail.height;
|
|||
|
|
if(this.positionList[id]){
|
|||
|
|
this.positionList[id].imageHeight = height;
|
|||
|
|
}else{
|
|||
|
|
this.positionList[id] = {
|
|||
|
|
imageHeight: height
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
// 图片加载完刷新位置节流一下，提升性能
|
|||
|
|
this.throttle(() => {
|
|||
|
|
this.getCalculationPosition();
|
|||
|
|
}, 100);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped lang="scss">
|
|||
|
|
@import '@/style/mixin.scss';
|
|||
|
|
|
|||
|
|
.flow-box {
|
|||
|
|
position: relative;
|
|||
|
|
color: #1a1a1a;
|
|||
|
|
padding: 0 20rpx 0rpx 20rpx;
|
|||
|
|
box-sizing: content-box;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.flow-box .left {
|
|||
|
|
left: 20rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.flow-box .right {
|
|||
|
|
right: 20rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.flow-box .good_item {
|
|||
|
|
position: absolute;
|
|||
|
|
width: 345rpx;
|
|||
|
|
border: 2rpx solid #f9f9f9;
|
|||
|
|
background: #fff;
|
|||
|
|
border-radius: 20rpx;
|
|||
|
|
overflow: hidden;
|
|||
|
|
margin-bottom: 20rpx;
|
|||
|
|
|
|||
|
|
&.noMargin {
|
|||
|
|
margin-right: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.goods_img {
|
|||
|
|
image {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 345rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.title {
|
|||
|
|
margin: 20rpx 20rpx;
|
|||
|
|
color: #333333;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
@include bov(2);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.sell_well {
|
|||
|
|
display: flex;
|
|||
|
|
padding: 0rpx 20rpx 20rpx 20rpx;
|
|||
|
|
|
|||
|
|
text {
|
|||
|
|
height: 32rpx;
|
|||
|
|
border-radius: 4rpx;
|
|||
|
|
border: solid 2rpx $themeColor;
|
|||
|
|
line-height: 28rpx;
|
|||
|
|
padding: 0 15rpx;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
color: $themeColor;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.info {
|
|||
|
|
width: 100%;
|
|||
|
|
padding: 0rpx 20rpx 30rpx 20rpx;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
|
|||
|
|
.money {
|
|||
|
|
font-size: 26rpx;
|
|||
|
|
color: #ff3d3d;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
|
|||
|
|
text {
|
|||
|
|
font-size: 36rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.count {
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
color: #999;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|