uniApp通过swiper和scroll-view实现带缩略图轮播

 

 

 HTML:

<view class="peopleSwiper">
  <swiper class="bigImg" :current="current">
    <swiper-item v-for="(big,index) in imgSwiperData" :key="index">
      <image :src="big.imgUrl" mode="scaleToFill"></image>
    </swiper-item>
  </swiper>
  <scroll-view class="smallImg" scroll-x="true">
    <view v-for="(small,index) in imgSwiperData" :key="index" @click="changeBigPic(index)">
      <image :src="small.imgUrl" mode="widthFix" class="smallItem" :class="[index == current ? 'active' : '']"></image>
    </view>
  </scroll-view>
</view>

JS:

export default {
  data() {
    return {
      current: 0,//轮播图索引
      imgSwiperData:[
{id:0,imgUrl:"https://img1.baidu.com/it/u=2265759430,2688457354&fm=26&fmt=auto&gp=0.jpg"},                
{id:1,imgUrl:"https://img1.baidu.com/it/u=3429531540,1015649330&fm=26&fmt=auto&gp=0.jpg"},        
{id:2,imgUrl:"https://img0.baidu.com/it/u=2779568578,1953729642&fm=26&fmt=auto&gp=0.jpg"},        
{id:3,imgUrl:"https://img0.baidu.com/it/u=2668412444,819000202&fm=26&fmt=auto&gp=0.jpg"},
      ],
    }
  },
  methods:{
    //点击小图切换指定大图
    changeBigPic(index){
      this.current = index;
    },
  }
}

CSS:

.bigImg{width:100%;height:21rem;}
.bigImg image{width:100%;height:21rem;}
.smallImg{position:absolute;bottom:2rem;left:0;width:100%;padding:0 1rem;box-sizing:border-box;white-space:nowrap;text-align:center;}
.smallImg view{display:inline-block;width:16%;margin:0 0.5rem;}
.smallItem{width:100%;border-radius:5rem;box-sizing:border-box;}
.smallItem.active{border:0.1rem solid #ff7834;box-sizing:border-box;}

组件:

<!--带缩略图轮播图组件-->
<template>
<view class="peopleSwiper">
<swiper class="bigImg" :current="current">
<swiper-item v-for="(big,index) in imgSwiperData" :key="index">
<image :src="big.imgUrl" mode="scaleToFill"></image>
</swiper-item>
</swiper>
<scroll-view class="smallImg" scroll-x="true">
<view v-for="(small,index) in imgSwiperData" :key="index" @click="changeBigPic(index)">
<image :src="small.imgUrl" mode="widthFix" class="smallItem" :class="[index == current ? 'active' : '']"></image>
</view>
</scroll-view>
</view>
</template>
<script>
export default {
  name:"ImgSwiper",
  props:{
    imgSwiperData:Array,
    //imgUrl 图片地址
  },
  data() {
    return {
      current: 0,//轮播图索引
    }
  },
  methods:{
    //点击小图切换指定大图
    changeBigPic(index){
      this.current = index;
    },
  }
}
</script>
<style>
.bigImg{width:100%;height:21rem;}
.bigImg image{width:100%;height:21rem;}
.smallImg{position:absolute;bottom:2rem;left:0;width:100%;padding:0 1rem;box-sizing:border-box;white-space:nowrap;text-align:center;}
.smallImg view{display:inline-block;width:16%;margin:0 0.5rem;}
.smallItem{width:100%;border-radius:5rem;box-sizing:border-box;}
.smallItem.active{border:0.1rem solid #ff7834;box-sizing:border-box;}
</style>