vue3移动端H5 瀑布流显示列表

以上效果 是之前发送的改进版

waterList

<template>
  <view class="pro-cons" v-if="data.length">
    <view class="cons-left">
      <template v-for="(item, index) in data">
        <template v-if="(index + 1) % 2 === 1">
          <product :info="item" @toMaskpay="tomask"></product>
        </template>
      </template>
    </view>
    <view class="cons-right">
      <template v-for="(item, index) in data">
        <template v-if="(index + 1) % 2 === 0">
          <product :info="item" @toMaskpay="tomask"></product>
        </template>
      </template>
    </view>
  </view>
</template>
<script setup>
import { toRefs } from "vue";
import product from "./item.vue";

const props = defineProps({
  data: {
    type: Array,
    default: [],
  },
});

const { data } = toRefs(props);
</script>

<style>
.pro-cons {
  width: 100%;
  padding: 26rpx;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
}
</style>

item

<template>
  <view class="product-info" @click="gotoDetails">
    <view class="product-cover">
      <image :src="value.cover" mode="aspectFill"></image>
    </view>
    <view class="product-content">
      <view class="con-title" v-show="value.name">
        {{ value.name }}
      </view>
    </view>
    <view class="con-lable" v-if="value.is_label == 1">
      {{ value.label_name }}
    </view>
    <view class="price-con">
      <view class="old-price" v-show="value.line_price">
        原价：<text style="font-size: 16rpx">¥</text> {{ value.line_price }}
      </view>
      <view class="news-price" v-if="value.line_price">
        <text style="font-size: 24rpx">¥</text>{{ value.price.split(".")[0] }}
        <text
          >.{{
            value.price.split(".")[1] ? value.price.split(".")[1] : "00"
          }}</text
        >
      </view>
      <view class="news-price" v-else> 0.00 </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue";
const value = ref({});
const props = defineProps({
  info: {
    type: Object,
    default: () => {},
  },
});
</script>
<style lang="scss">
.product-info {
  width: 340px;
  background-color: pink;
  border-radius: 12px;
  border: 1px solid #f5f5f5;
  box-sizing: border-box;
  overflow: hidden;
  margin-bottom: 24px;
}

.product-cover {
  width: 340px;
  height: 340px;
  background: purple;
  overflow: hidden;
  box-sizing: border-box;
}

.product-cover image {
  width: 340px;
  height: 340px;
  display: block;
}

.product-content {
  width: 100%;
  padding: 16px 14px 0 14px;
  box-sizing: border-box;
}

.con-title {
  width: 100%;
  font-size: 26px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: bold;
  word-break: break-all;
  word-wrap: break-word;
  color: #333333;
  line-height: 36px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
}
.con-lable {
  display: inline-block;
  min-height: 30px;
  background: #fcf1ef;
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 20px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #ec6439;
  line-height: 20px;
  box-sizing: border-box;
  margin-left: 24px;
  max-width: calc(100% - 48px);
  word-break: break-all;
  word-wrap: break-word;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.con-button {
  width: 308px;
  height: 56px;
  background: #eb5946;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: bold;
  color: #ffffff;
  line-height: 30px;
  margin: 0 auto;
  margin-bottom: 16px;
}
.price-con {
  width: 308px;
  height: 88px;
  background-size: 100% 100%;
  //   background: url("bg.png") no-repeat;
  background-size: 100% 100%;
  position: relative;
  margin: 0 auto;
  margin-top: 16px;
  margin-bottom: 24px;
}
.old-price {
  font-size: 20px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #999999;
  line-height: 22px;
  position: absolute;
  bottom: 0;
  left: 0;
  text-decoration: line-through;
}
.news-price {
  width: 132px;
  font-size: 30px;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: bold;
  color: #ffffff;
  line-height: 30px;
  text-shadow: 0px 0px 3px #ff2f27;
  text-align: center;
  position: absolute;
  top: 12px;
  right: 20px;
}
.news-price text {
  font-size: 24px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: bold;
  color: #ffffff;
  line-height: 24px;
  text-shadow: 0px 0px 3px #ff2f27;
}
</style>

列表组件使用

    <WaterList :data='arrList'></WaterList>



const arrList = ref([
  {
    cover:
      "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
    id: 1,
    is_label: 1,
    label_name: "测试标签",
    line_price: "0.00",
    name: "瀑布流测试标题",
    price: "0.00",
  },
  {
    cover:
      "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
    id: 2,
    is_label: 2,
    label_name: "",
    line_price: "10.00",
    name: "瀑布流测试标题1",
    price: "10.00",
  },
  {
    cover:
      "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
    id: 3,
    is_label: 1,
    label_name: "测试标签2",
    line_price: "20.00",
    name: "瀑布流测试标题2",
    price: "20.00",
  },
  {
    cover:
      "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
    id: 4,
    is_label: 1,
    label_name: "测试标签3",
    line_price: "303.00",
    name: "瀑布流测试标题3",
    price: "303.00",
  },
]);