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

这篇具有很好参考价值的文章主要介绍了uniapp 自定义横向滑动列表（金刚区，类似于美团小程序首页顶部）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

封装
uniapp横向滑动,uni-app,小程序,javascript

<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>