提示:uview里面轮播图实现缩略图功能
前言
使用uview组件库实现轮播图下面缩略图功能;
一、如何使用
1.效果图展示
2.实现
代码如下(示例):
<view class="topBox">
<u-swiper :list="urls2" keyName="url" :current="currentBig" :autoplay="false" @change="swiperChange" class="swiper-img">
</u-swiper>
//底部的缩略图
<view class="smallBox">
<view v-for="(item, index) in urls2" :key="index" class="smallBoxImg" @click="smallClick(item, index)">
<image :src="item.url" alt="" :class="currentBig === index ? 'smallImg2' : 'smallImg'"></image>
</view>
</view>
</view>
data() {
return {
currentBig: '',
currentSmall: '',
urls2: [],
}
},
mounted() {
// 默认选中第一项
this.currentBig = 0
},
methods: {
swiperChange(e) {
console.log(e.current, '9777')
this.currentBig = e.current
},
smallClick(item, index) {
this.$nextTick(() => {
this.currentBig = index
})
},
}
.topBox {
width: 100%;
height: 710rpx;
position: relative;
}
.topImage {
width: 100%;
height: 176rpx;
background-size: cover;
z-index: 99;
}
.swiper-img {
width: 100%;
height: 700rpx !important;
position: absolute;
top: 0;
/deep/ .u-swiper__wrapper {
width: 100%;
height: 700rpx !important;
}
/deep/ .u-swiper__wrapper__item__wrapper__image {
width: 100%;
height: 700rpx !important;
}
/deep/ .u-swiper__wrapper__item__wrapper__image div {
width: 100%;
height: 100%;
}
}
.smallBox {
width: 100%;
height: 100rpx;
position: absolute;
top: 580rpx;
z-index: 999;
display: flex;
padding: 0 26rpx;
align-items: center;
overflow: hidden;
}
.smallBoxImg {
margin-right: 16rpx;
}
.smallImg {
width: 60rpx;
height: 60rpx;
background-size: cover;
border-radius: 10rpx;
box-shadow: 0rpx 4rpx 32rpx 0rpx rgba(47, 43, 43, 0.5);
}
.smallImg2 {
width: 82rpx;
height: 82rpx;
background: #ffffff;
border-radius: 10rpx;
box-shadow: 0rpx 4rpx 32rpx 0rpx rgba(47, 43, 43, 0.5);
}
底部的缩略图是自己写的,官网组件库里面的u-swiper没有自带的缩略图功能;或者使用第三方插件;