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:"img1.baidu/it/u=2265759430,2688457354&fm=26&fmt=auto&gp=0.jpg"},
{id:1,imgUrl:"img1.baidu/it/u=3429531540,1015649330&fm=26&fmt=auto&gp=0.jpg"},
{id:2,imgUrl:"img0.baidu/it/u=2779568578,1953729642&fm=26&fmt=auto&gp=0.jpg"},
{id:3,imgUrl:"img0.baidu/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;}js实现轮播图最简代码
</style>
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论