小程序改变swiper样式（带缩略图）

最新推荐文章于 2023-12-11 17:05:17 发布

xx_小熊

最新推荐文章于 2023-12-11 17:05:17 发布

阅读量1.8k

点赞数 1

本文链接：https://blog.csdn.net/qq_42975998/article/details/88880809

版权

在这里插入图片描述
用两个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;
}