微信小程序全屏轮播（仿北京环球）

空闲时间看见北京环球的微信小程序，感觉首页效果挺好看的，所以就动手做了一下。仅供参考！

1.效果预览

2.代码实现

2.1 HTML

<view class="container">
  <!-- 自定义导航栏 -->
  <view class="navi">
    <view class="fixHead">
        <view class="user_action">
        <view class="scan">
            <image src="../../image/scan.png"></image>
        </view>
        <view class="search">
            <image src="../../image/search.png"></image>
        </view>
        </view>
    </view>
    <!-- 背景 -->
    <view style="background:white">
        <image wx:if="{{isNavi}}"  style="filter: blur(80rpx)" class="navi_container_image" src="{{url}}"></image>
    </view>
  </view>
  <!-- 轮播图 -->
  <scroll-view class="scroll_v" scroll-y="{{true}}" bindscroll="bindscroll" upper-threshold="300">
    <view class="banner" style="filter: blur({{filBlur}})">
        <view class="banner_detail">
            <view class="banner_detail_title">{{currentTitle==''?bannerList[0].title:currentTitle}}</view>
            <view class="banner_detail_index">
            {{currentIndex}} / {{bannerList.length}}
            </view>
        </view>
        <swiper class="sw" circular="true" autoplay="{{isAutoPlay}}" bindchange="bindchange">
            <swiper-item class="img" wx:for="{{bannerList}}" wx:key="index">
                <view class="bannerBeautiful"> 
                    <view class="bannerBf" style="background-image: radial-gradient(transparent 60%,var({{item.color}}))"></view>
                    <image class="banner_image" src='{{item.url}}'></image>
                    <view class="bannerAf" style="background-image: linear-gradient(180deg,transparent 70%,var({{item.color}}))"></view>
                </view>
                <view class="img_extra" style="background:var({{item.color}})"></view>
            </swiper-item>
        </swiper>
    </view>
    <view class="scroll_container">
      <view class="system_menu_card" wx:for="{{10}}" :key="index">
        <image class="system_menu_card" src="/image/card.jpg"></image>
      </view>
    </view>
  </scroll-view>
</view>

2.2 CSS

.container{
  width:750rpx;
  height: 100vh;
  position: relative;
  --bgC_pink:#fdd;
  --bgC_blue:#00aecd;
  --bgC_red:#8bc34a;
  --bgC_gre:#795548;
}

/* 自定义导航头 */
.fixHead{
    width:100vw;
    height:173rpx;
    position: fixed;
    top:0;
    left:0;
    z-index:99;
  }
  .fixHead .user_action{
    width:165rpx;
    height:60rpx;
    margin-top:95rpx;
    margin-left: 25rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 30rpx;
  }
  .user_action image{
    width:50rpx;
    height:50rpx;
  }
  .user_action .scan{
    width:50rpx;
    height:50rpx;
  
  }
  .user_action .search{
    width:50rpx;
    height:50rpx;
    margin-left: 35rpx;
  }
  .navi{
    width:750rpx;
    height:173rpx;
    position: fixed;
    z-index: 5;
    overflow: hidden;
  }
  .navi_container_image{
      display: block;
      width:750rpx;
  }
/* 图片 */
.scroll_v{
    width:750rpx;
    height: 100vh;
    display: flex;
    position: absolute;
    top:0rpx;
}
.banner{
    width:750rpx;
    height: 100vh;
    position: fixed;
    top:0;
    left:0;
    bottom: 0;
    right: 0;
    z-index: 2;
}
.banner_detail{
    width:700rpx;
    height:100rpx;
    position: absolute;
    top:550rpx;
    left:50%;
    transform: translateX(-50%);
    color: white;
    display: flex;
    align-items: center;
    z-index: 1;
}
.banner_detail_title{
    width: 88vw;
    font-size: 50rpx;
    font-family: MXBlack;
    font-weight: 200;
}
.banner_detail_index{
    width:13vw;
    height:42rpx;
    background:rgba(255, 255, 255, .5);
    border-radius: 60rpx;
    text-align: center;
    line-height: 32rpx;
    font-size: 28rpx;
    font-family: MXBlack;
}
.sw{
    height:100vh;
}
.img{
    width: 750rpx;
    height:100vh;
    display: flex;
    flex-direction: column;
    float: left;
}
.bannerBeautiful{
    width:750rpx;
    height:50vh;
    position: relative;
}
.banner_image{
    display: block;
    width:750rpx;
    height:44vh;
    z-index: 3;
}
.bannerBf{
    width:750rpx;
    height:100%;
    position: absolute;
    top:0;
    left:0;
    background-repeat: no-repeat;
}
.bannerAf{
    width:750rpx;
    height:100%;
    position: absolute;
    top:0;
    left:0;
}
.img_extra{
    width: 750rpx;
    height:80vh;
    position: relative;
}

/* 主要内容区域 */
.scroll_container{
  width:750rpx;
  position: absolute;
  top:650rpx;
  z-index: 4;
}
.system_menu_card{
  width: 700rpx;
  height:660rpx;
  border-radius: 40rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin:20rpx auto;
}

2.3 JSON

{
  "usingComponents": {
  },
  "disableScroll":true,
  "navigationStyle": "custom"
}

2.4 JS

Page({
  data: {
    bannerList:[{
      url:'/image/banner1.png',
      title:'自定义标题1',
      color:'--bgC_pink'
    },{
      url:'/image/banner2.jpg',
      title:'自定义标题2',
      color:'--bgC_red'
    },{
      url:'/image/banner3.jpg',
      title:'自定义标题3',
      color:'--bgC_gre'
    },{
      url:'/image/banner4.jpg',
      title:'自定义标题4',
      color:'--bgC_blue'
    }],
    url:'', //自定义导航栏 图片
    color:'',//自定义导航栏 背景色
    isNavi:false,//是否显示自定义导航栏背景
    filBlur:'', // 模糊程度
    isAutoPlay:true, //自动轮播
    currentIndex:0,  //当前轮播索引
    currentTitle:'', //轮播图标题
    
  },
  // 初始背景图 和 颜色
  init(){
    const {bannerList,currentIndex} = this.data
    this.setData({
        url:bannerList[currentIndex].url,
        color:bannerList[currentIndex].color
    })
  },
  //手动滑动轮播
  bindchange(e){
    let currentIndex = e.detail.current
    let currentTitle = this.data.bannerList[e.detail.current].title
    this.setData({
      currentIndex:currentIndex,
      currentTitle:currentTitle,
    })
  },
  //滑动页面
  bindscroll(e){
    const {bannerList,currentIndex} = this.data
    let scrollTop = e.detail.scrollTop
    let filBlur=''
    let isAutoPlay = false
    let isNavi = false

    if(scrollTop>=100){
      filBlur = '100rpx'
      isAutoPlay= false
      if(scrollTop>=250){
        isNavi = true
      }
    }else{
      filBlur="0rpx"
      isAutoPlay=true
      isNavi=false
    }
    
    this.setData({
      filBlur:filBlur,
      isAutoPlay:isAutoPlay,
      scrollTop:scrollTop,
      url:bannerList[currentIndex].url,
      color:bannerList[currentIndex].color,
      isNavi:isNavi
    })
  },
  onLoad() {
      this.init()
  },
})