小程序改变swiper样式(带缩略图)
用两个swiper,通过相同的current来实现联动
html部分:
<view class="diaries">
<!-- 背景图 -->
<image class="bg-img" src="{{bgSrc}}"></image>
<!-- 大图轮播 -->
<swiper
circular="{{circular}}"
indicator-dots="{{indicatorDots}}"
autoplay="{{autoplay}}"
interval="{{interval}}"
duration="{{duration}}"
bindchange="intervalChange"
next-margin="100rpx"
current="{{current}}"
previous-margin="100rpx"
class="swiper-news"
>
<block wx:for="{{newsList}}" wx:key="{{index}}">
<swiper-item class="new-item">
<view class="{{index==current?'bg-msg':'bg-unmsg'}}">
<image class="{{index==current?'slide-image':'other-image'}}" data-index="{{index}}" src="{{item.cover_img}}"/>
<view wx:if="{{index==current}}">标题</view>
</view>
</swiper-item>
</block>
</swiper>
<!-- 小图轮播 -->
<swiper
indicator-dots="{{indicatorDots}}"
autoplay="{{autoplay}}"
interval="{{interval}}"
duration="{{duration}}"
bindchange="dotsChange"
next-margin="580rpx"
current="{{current}}"
class="swiper-dots"
>
<block wx:for="{{newsList}}" wx:key="{{index}}">
<swiper-item class="dot-item" data-index="{{index}}" bindtap="changeIndex">
<image class="dot-image" data-index="{{index}}" src="{{item.cover_img}}"/>
<view class="{{index==current?'line':''}}"></view>
</swiper-item>
</block>
</swiper>
</view>
js部分:
Page({
data: {
indicatorDots: false,
autoplay: false,
circular: false,
interval: 5000,
duration: 1000,
current: 0,
newsList: [
{ cover_img:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1553791564915&di=82f97326fbe75661887d1af7fda9d568&imgtype=0&src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2Fc331932c2426b65af464f7d33d70998e1b4f907d4e277-xAZ1WC_fw658'},
{ cover_img: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1553792367072&di=802a2f24ef6758ec18ae7cbf73090889&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201808%2F15%2F20180815175029_gwreg.jpg'},
{ cover_img:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1554387191&di=edd137ed04e730249baed20be1fd0b6b&imgtype=jpg&er=1&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201708%2F08%2F20170808180405_XjuVx.thumb.700_0.jpeg'},
{ cover_img:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1553792634916&di=e3f02dbd42e36313181882988ad61754&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201807%2F01%2F20180701171229_4vdmG.jpeg'},
{ cover_img:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1553792761227&di=1510f0c987e6e79029f8fa8b9a7cc26a&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201710%2F23%2F20171023093859_Cz4ij.png'},
],
bgSrc: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1553791564915&di=82f97326fbe75661887d1af7fda9d568&imgtype=0&src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2Fc331932c2426b65af464f7d33d70998e1b4f907d4e277-xAZ1WC_fw658'
},
// 大图滑动
intervalChange(e) {
this.setData({
current: e.detail.current
})
//改变背景图
let src = this.data.newsList[e.detail.current].cover_img
this.setData({
bgSrc: src
})
},
// 小图滑动
dotsChange(e){
this.setData({
current: e.detail.current
})
//改变背景图
let src = this.data.newsList[e.detail.current].cover_img
this.setData({
bgSrc: src
})
},
// 点击小图
changeIndex(e){
this.setData({
current: e.currentTarget.dataset.index
})
//改变背景图
let src = this.data.newsList[e.currentTarget.dataset.index].cover_img
this.setData({
bgSrc: src
})
}
})
css部分:
/* component/index/knowledge.wxss */
.page{
height: 100%;
}
.diaries{
height: 100%;
}
.swiper-news{
height: 822rpx;
margin-top: 32rpx
}
.new-item{
height: 100%;
display:flex;
flex-direction: column;
align-items:center;
}
.bg-img{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
filter: blur(50rpx);
}
.slide-image{
width: 468rpx;
height: 556rpx;
border-radius: 20rpx;
margin-bottom: 26rpx;
box-shadow:0rpx 40rpx 50rpx -40rpx #3f3e3e;
position:absolute;
top:-142rpx;
}
.other-image{
width: 468rpx;
height: 516rpx;
border-radius: 20rpx;
}
.bg-msg{
width: 540rpx;
height: 640rpx;
background-color: white;
border-radius: 20rpx;
display: flex;
justify-content: center;
box-shadow:0rpx 40rpx 50rpx -40rpx #3f3e3e;
position:absolute;
bottom:32rpx;
padding: 0 34rpx;
padding-top:446rpx;
box-sizing:border-box;
}
.bg-unmsg{
width: 540rpx;
height: 659rpx;
border-radius: 20rpx;
display: flex;
justify-content: center;
position:absolute;
bottom:0;
}
.swiper-dots{
margin-top: 8rpx;
}
.dot-item{
display: flex;
flex-direction: column;
align-items: center;
margin-left:280rpx;
}
.dot-image{
width: 118rpx;
height: 154rpx;
border-radius: 10rpx;
}
.line{
width: 50rpx;
height: 8rpx;
background-color: white;
border-radius: 8rpx;
margin-top: 24rpx;
}