uniapp 自定义横向滑动列表（金刚区，类似于美团小程序首页顶部）

最新推荐文章于 2024-07-06 21:18:06 发布

飛羽殤

最新推荐文章于 2024-07-06 21:18:06 发布

阅读量2.3k

点赞数 4

文章标签： Vue Swiper 轮播图列布局动态调整

本文链接：https://blog.csdn.net/weixin_44826388/article/details/127015327

版权

封装
在这里插入图片描述

<template>
  <view>
    <swiper :indicator-dots="isShowDot && showDot" class="swiper" :style="{height:(145*col)+'rpx'}">
      <swiper-item v-for="(item, index) in listdivInfo" :key="index" class="swiper-item">
        <view v-for="(child, code) in item" class="smallItem" :key="code" :style="{ width: width + '%' }">
          <view class="image">
            <u-image :src="imageURL(child.image)" width="64rpx" height="64rpx" radius="32rpx">
            </u-image>
          </view>
          <view class="name">{{ child.title }}</view>
        </view>
      </swiper-item>
    </swiper>
  </view>
</template>



<script>
export default {
  props: {
    list: {
      type: Array,
      default: () => {
        return [];
      },
    },
    //一行排列数
    nums: {
      type: Number,
      default: 4,
    },

    //排列行数
    col: {
      type: Number,
      default: 1,
    },
    //是否展示指示灯
    isShowDot: {
      type: Boolean,
      default: true,
    },
  },

  watch: {
    list: {
      handler: function (newVal, oldVal) {
        this.listdiv();
      },
      deep: true,
    },
  },

  mounted() {
    this.listdiv();
  },
  data() {
    return {
      listdivInfo: [],
      width: 25,
      showDot: true,
    };
  },
  methods: {
    async listdiv() {
      this.width = 100 / this.nums;
      var arr = [];
      let that = this;
      console.log(that.nums * that.col);
      await this.list.forEach((v, index) => {
        var num = Math.floor(index / (that.nums * that.col));
        if (!arr[num]) {
          arr[num] = [];
          arr[num].push(v);
        } else {
          arr[num].push(v);
        }
      });
      this.listdivInfo = arr;
      if (this.listdivInfo.length > 1) {
        this.showDot = true;
      } else {
        this.showDot = false;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.swiper {
  margin: 8rpx 32rpx;
  background: white;
  border-radius: 32rpx;
}

.swiper-item {
  display: flex;
  flex-wrap: wrap;

  .smallItem {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 16rpx 0;
    overflow: hidden;

    image {
      width: 64rpx;
      height: 64rpx;
    }

    .name {
      margin-top: 8rpx;
      font-size: 16rpx;
    }
  }
}
</style>

使用

<template>
    <view>
        <scrollX :list="cateList" :nums="5" :col="2" />
    </view>
</template>

<script>
import scrollX from "@/components/scroll-x/index.vue";
export default {
    components: {
        scrollX
    },
    data() {
        return {
            cateList: [
                {
                    title: "酒店民宿",
                    image: "图片地址",
                    path: "",
                    isPath: true,
                },
                {
                    title: "健康医疗",
                    image: "",
                    path: "",
                    isPath: true,
                },
            ]
        }
    },
}
</script>