uniapp区块 滑动 业务性代码

<template>
  <view class="function-health-area">
    <view class="title">{{ title }}</view>
    <swiper 
      class="swiper" 
      :current="currentPage" 
      @change="onSwiperChange"
	  
    >
      <swiper-item v-for="(page, pageIndex) in pages" :key="pageIndex" class="swiper_pdding">
        <view class="grid-container">
          <view class="grid-item" v-for="(item, index) in page" :key="index">
            <image :src="item.icon" class="icon"></image>
            <text class="label">{{ item.label }}</text>
          </view>
        </view>
      </swiper-item>
    </swiper>
    <view class="pagination">
      <view class="slider-container">
        <view 
          class="slider" 
          :style="{ transform: `translateX(${currentPage * 100}%)` }"
        ></view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'FunctionHealthArea',
  props: {
    title: {
      type: String,
      default: '功能保健区'
    },
    items: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      currentPage: 0
    }
  },
  computed: {
    pages() {
      const itemsPerPage = 10;
      return this.items.reduce((acc, curr, i) => {
        const pageIndex = Math.floor(i / itemsPerPage);
        if (!acc[pageIndex]) {
          acc[pageIndex] = [];
        }
        acc[pageIndex].push(curr);
        return acc;
      }, []);
    }
  },
  methods: {
    onSwiperChange(e) {
      this.currentPage = e.detail.current;
    }
  }
}
</script>

<style scoped>
.swiper_pdding{
  padding:10px;
}
.function-health-area {
  background-color: #ffffff;
  border-radius: 10rpx;
  padding: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
  margin: 10px;
}
.title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
}
.swiper {
  /* height: 400rpx; */
  height: 130px;

}
.grid-container {
  display: flex;
  flex-wrap: wrap;
}
.grid-item {
  width: 20%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20rpx;
}
.icon {
  width: 60rpx;
  height: 60rpx;
  margin-bottom: 10rpx;
}
.label {
  font-size: 24rpx;
  color: #333;
  text-align: center;
}
.pagination {
  display: flex;
  justify-content: center;
  margin-top: 20rpx;
}
.slider-container {
  width: 60rpx;
  height: 6rpx;
  background-color: #e0e0e0;
  border-radius: 3rpx;
  overflow: hidden;
}
.slider {
  width: 50%;
  height: 100%;
  background-color: #27ae60;
  transition: transform 0.3s ease;
}
</style>

<template>
  <view>
    <FunctionHealthArea :items="healthItems" />
  </view>
</template>

<script>
import FunctionHealthArea from './FunctionHealthArea.vue'

export default {
  components: {
    FunctionHealthArea
  },
  data() {
    return {
      healthItems: [
        { icon: 'https://img2.baidu.com/it/u=1490602810,3032519025&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1723654800&t=d35297c11d84e04039ddf4667fcc6a6b', label: '降血脂' },
        { icon: 'https://img2.baidu.com/it/u=1490602810,3032519025&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1723654800&t=d35297c11d84e04039ddf4667fcc6a6b', label: '降血压' },
        { icon: 'https://img2.baidu.com/it/u=1490602810,3032519025&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1723654800&t=d35297c11d84e04039ddf4667fcc6a6b', label: '降血糖' },
        { icon: 'https://img2.baidu.com/it/u=1490602810,3032519025&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1723654800&t=d35297c11d84e04039ddf4667fcc6a6b', label: '保 肝' },
        { icon: 'https://img2.baidu.com/it/u=1490602810,3032519025&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1723654800&t=d35297c11d84e04039ddf4667fcc6a6b', label: '胃粘膜' },
        { icon: 'https://img2.baidu.com/it/u=1490602810,3032519025&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1723654800&t=d35297c11d84e04039ddf4667fcc6a6b', label: '骨密度' },
        { icon: 'https://img2.baidu.com/it/u=1490602810,3032519025&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1723654800&t=d35297c11d84e04039ddf4667fcc6a6b', label: '贫 血' },
        { icon: 'https://img2.baidu.com/it/u=1490602810,3032519025&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1723654800&t=d35297c11d84e04039ddf4667fcc6a6b', label: '免疫力' },
        { icon: 'https://img2.baidu.com/it/u=1490602810,3032519025&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1723654800&t=d35297c11d84e04039ddf4667fcc6a6b', label: '保 肝' },
        { icon: 'https://img2.baidu.com/it/u=1490602810,3032519025&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1723654800&t=d35297c11d84e04039ddf4667fcc6a6b', label: '辅 助' },
		{ icon: 'https://img2.baidu.com/it/u=1490602810,3032519025&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1723654800&t=d35297c11d84e04039ddf4667fcc6a6b', label: '辅 助' },
		{ icon: 'https://img2.baidu.com/it/u=1490602810,3032519025&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1723654800&t=d35297c11d84e04039ddf4667fcc6a6b', label: '辅 助' },
		{ icon: 'https://img2.baidu.com/it/u=1490602810,3032519025&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1723654800&t=d35297c11d84e04039ddf4667fcc6a6b', label: '辅 助' },
      ]
    }
  }
}
</script>