空闲时间看见北京环球的微信小程序,感觉首页效果挺好看的,所以就动手做了一下。仅供参考!
1.效果预览
![](https://i-blog.csdnimg.cn/blog_migrate/b1e3aaa8893a418965cccbfa978ba720.gif)
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()
},
})