health-front/pages_order/product/tabNutrient/nutrientRecommendSwiper.vue

<template>
  <view>
    <swiper 
      class="swiper" 
      :current="current"
      :autoplay="false"
      :display-multiple-items="1.8"
      @change="onChange"
    >
      <swiper-item v-for="item in list" :key="item.id" style="display: inline-block;">
        <view class="swiper-item">
          <productCard 
            :data="item"
            cardStyle="width: 100%; height: 228px;"
            imgStyle="width: 100%; height: 130px;"
          ></productCard>
        </view>
      </swiper-item>
      <swiper-item style="display: inline-block;">
        <view class="swiper-item"></view>
      </swiper-item>
    </swiper>

    <indicator :current="current" :length="list.length" @click="current = $event"></indicator>
  </view>
</template>

<script>
  import productCard from '@/pages_order/product/productCard.vue'
  import indicator from '@/components/home/indicator.vue'

  export default {
		components: {
      productCard,
      indicator,
    },
		data() {
			return {
        current: 0,
        list: [],
			}
		},
		mounted() {
      this.list = [
        {
          id: '001',
					url: '', 
          name: '月度装定制营养包',
          sales: 24770,
          price: 688.00,
          originalPrice: 1664,
        },
        {
          id: '002',
					url: '', 
          name: '月度装定制营养包',
          sales: 24770,
          price: 688.00,
          originalPrice: 1664,
        },
        {
          id: '003',
					url: '', 
          name: '月度装定制营养包',
          sales: 24770,
          price: 688.00,
          originalPrice: 1664,
        },
			]
		},
		methods: {
      onChange(e) {
        this.current = e.detail.current
      }
		},
  }
</script>

<style scoped lang="scss">

.swiper {
  width: 100vw;
  height: 230px;
  margin-bottom: 24rpx;

  &-item {
    height: 460rpx;
    padding-left: 32rpx;
  }
}

</style>