微信小程序仿胖东来轮播和背景效果(有效果图)

效果图

.wxml

<view class="swiper-index" style="--width--:{{windowWidth}}px;">
  <image src="{{swiperList[(cardCur + bgIndex == -1?swiperList.length - 1:cardCur + bgIndex > swiperList.length -1?0:cardCur + bgIndex)]}}" class="swiper-bg" style="--filter--:blur({{(1 - radio) * 12}}px);"></image>
  <swiper class="card-swiper square-dot" indicator-dots="true" circular="{{true}}" autoplay="{{true}}" 
  style="--scale--:{{radio}};"
  interval="{{5000}}" duration="500"  indicator-color="#ffffff" indicator-active-color="#F2F2F2"
  bindtransition="cardSition" bindanimationfinish="cardFinish"
  data-windowWidth="{{windowWidth}}" data-bgindex="{{bgIndex}}">
    <swiper-item wx:for="{{swiperList}}" wx:key="index" class="{{cardCur==index?'cur':''}}">
      <view class="swiper-item">
        <image class="swiper-image" src="{{item}}"></image>
      </view>
    </swiper-item>
  </swiper>
</view>
<view style="background: #fff;height: 10px;"></view>

.js

Page({
  data: {
    swiperList: [
      'https://ossweb-img.qq.com/images/lol/web201310/skin/big84000.jpg',
      'https://ossweb-img.qq.com/images/lol/web201310/skin/big84001.jpg',
      'https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg'
    ],
    cardCur:0,
    windowWidth:wx.getSystemInfoSync().windowWidth,
    radio:1,
    bgIndex:'',
  },
  cardFinish(e){
    this.setData({
      radio:1,
      bgIndex:0,
      cardCur: e.detail.current,
    })
  },
  cardSition(e){
    let dx = Math.abs(e.detail.dx),windowWidth = e.currentTarget.dataset.windowwidth,
    bgindex = e.currentTarget.dataset.bgindex;
    let num = dx / windowWidth
    let radio = 1 - num < 0.9?0.9:1 - num;
    let index = num > 0.45?(e.detail.dx < 0?-1:1):0
    this.setData({
      radio,
    })
    if(index != bgindex){
      this.setData({
        bgIndex:index,
      })
    }
  },
})

.wxss

view,scroll-view,swiper,image {box-sizing: border-box;}
.swiper-index{padding: 10px;height: 260px;padding-top:100px;position: relative;}
.swiper-index::after{content: '';width: 120%;position: absolute;
  left: -10%;bottom: -30px;height: 30px;box-shadow: 0 -15px 15px 0px rgba(255,255,255,0.6);}
.swiper-bg{position: absolute;left: 0;top: 0;width: 100%;height: 100%;filter: var(--filter--);z-index: -1;
transition: all 0.3s;}
.card-swiper {height: 130px !important;width: 100%;}
.card-swiper swiper-item {overflow: hidden;border-radius: 20rpx;}
.swiper-image{width:var(--width--);height: 260px;position: absolute;left: -10px;top: -100px;}
.card-swiper swiper-item .swiper-item {width: 100%;display: block;height: 100%;
transition: all 0.2s ease-in 0s;overflow: hidden;}
.card-swiper swiper-item.cur .swiper-item {transform: none;transform: scale(var(--scale--));
transition: all 0.1s ease-in 0s;border-radius: 20rpx;}
swiper.square-dot .wx-swiper-dot {background-color: #fff;opacity: 0.4;width: 10rpx;
height: 10rpx;border-radius: 20rpx;margin: 0 8rpx !important;}
swiper.square-dot .wx-swiper-dot.wx-swiper-dot-active {opacity: 1;width: 30rpx;}

遇到问题可以看我主页加我Q,很少看博客,对你有帮助别忘记点赞收藏。

相关推荐
qq22951165025 分钟前
微信小程序的汽车维修预约管理系统
微信小程序·小程序·汽车
小飞哥liac10 小时前
微信小程序的组件
微信小程序
stormjun11 小时前
Java基于微信小程序的私家车位共享系统(附源码,文档)
java·微信小程序·共享停车位·私家车共享停车位小程序·停车位共享
Bessie23414 小时前
微信小程序eval无法使用的替代方案
微信小程序·小程序·uni-app
shenweihong14 小时前
javascript实现md5算法(支持微信小程序),可分多次计算
javascript·算法·微信小程序
20 小时前
微信小程序运营日记(第四天)
微信小程序·小程序
qq22951165021 天前
小程序Android系统 校园二手物品交换平台APP
微信小程序·uni-app
一只不会编程的猫1 天前
微信小程序配置
微信小程序·小程序
程序员入门进阶1 天前
基于微信小程序的移动学习平台的设计与实现+ssm(lw+演示+源码+运行)
学习·微信小程序·小程序
黑子Kuroko1 天前
写一个 EventBus 实现微信小程序的发布订阅,支持全局消息通知、跨页面通信,高效好用!
微信小程序·eventbus·消息订阅·消息发布订阅·跨页面