jingheng_H5/pagesA/themes/default/components/themes-hot.vue

<template>
  <view class="themes-hot-sale">
    <scroll-view class="scroll-list" :scroll-x="true" @scroll="scrollHandle($event)">
      <view class="scroll-list-row" v-for="(items, idx) in shopMenu" :key="idx">
        <view
          class="scroll-list-item"
          v-for="(item, index) in items"
          :key="index"
          @tap.stop="goShopCgry(item.hrefurl, item.id)"
        >
          <view class="list-item flex flex-w">
            <view class="list-item-c flex flex-colum al-item-center">
              <view class="list-item-cnt position-r">
                <image
                  class="item-c-img border-rius-r"
                  :src="item.imgurl"
                  mode=""
                ></image>
                <!-- <text
                  class="item-c-hot hot-s1 position-a"
                  :style="{ 'border-color': '#FE7D11', color: '#FE7D11' }"
                  v-if="index == 0"
                  >HOT</text
                > -->
              </view>
              <text class="list-item-tl fs12">{{ item.text }}</text>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
    <view v-if="isShowDots" class="list-dots">
      <view class="list-dots__item" :style="'left:' + dotLeft + 'px'"></view>
    </view>
  </view>
</template>

<script>
import { mapState } from "vuex";
export default {
  props: {
    shopMenu: {
      type: Array,
      default: function() {
        return [];
      },
    },
    isShowDots: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      width: 0,  // scroll-list节点宽度
      dotLeft: 0,  // 圆点滚动的距离
    }
  },
  computed: {
    ...mapState(["opt"]),
  },
  mounted() {
    const query = uni.createSelectorQuery().in(this);
    query.select('.scroll-list').boundingClientRect(data => {
      this.width = data.width;
      console.log("得到布局位置信息" + this.width);
    }).exec();
  },
  methods: {
    scrollHandle(e){
      let scrollLeft = e.detail.scrollLeft;
      let scrollWidth  = e.detail.scrollWidth;
      let ratio = scrollLeft / (scrollWidth - this.width);
      this.dotLeft = 18 * ratio;
    },
    goShopCgry(url, id) {
      uni.navigateTo({
        url: url,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.themes-hot-sale {
  background: #FFF;
  padding: 16rpx 16rpx;
  box-shadow: 0rpx 4px 8rpx 0rpx rgba(0,0,0,0.0300);
  border-radius: 20rpx;
  margin-top: 28rpx;
  .swiper-container {
    height: 450rpx;
    &.swiper-single {
      height: 210rpx;
    }
  }

  .scroll-list {
    width: 100%;
    position: relative;
    width: calc(100% + 16rpx);
    right: -16rpx;
    left: 0;
    white-space: nowrap;
    & ::-webkit-scrollbar {
      display: none;
    }
    &-row:not(:last-child) {
      margin-bottom: 18rpx;
    }
    .scroll-list-item {
      background: none;
      display: inline-block;
      margin-left: 35rpx;

      .list-item-c {
        width: 106rpx;

        .list-item-cnt {
          .item-c-img {
            width: 90rpx;
            height: 90rpx;
            vertical-align: middle;
          }

          .item-c-hot {
            padding: 2rpx 10rpx;
            font-size: 20rpx;
            border: 2rpx solid;
            border-radius: 50rpx 60rpx 60rpx 0px;
            background-color: #fff;
            top: 6rpx;
            right: -12rpx;
          }

          .hot-s1 {
            background-color: #fff;
          }
        }
        .list-item-tl {
          max-width: 100%;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          padding-top: 10rpx;
        }
      }
    }
    .scroll-list-item:first-child {
      margin-left: 0;
    }
  }
  .list-dots {
    margin-top: 18rpx;
    position: relative;
    width: 72rpx;
    height: 6rpx;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    background: #EAEAEA;
    border-radius: 6rpx;
    &__item {
      position: absolute;
      top: 0;
      width: 50%;
      height: 100%;
      background: linear-gradient(150deg, #00AE68 0%, #096742 100%);
    }
  }
}

.top {
  margin-top: -60rpx;
}
.top-z {
  margin-top: 0rpx;
}
.top-m {
  margin-top: -50rpx;
}
</style>