最近看到nike小程序的一个切换效果还很不错，所以有空仿照了一下，先上效果图
布局很简单 主要是做切换的动画效果和轮播图高度自适应，先看一下xml代码
XML
<view class="container">
<view class="banner-body">
<image src="{{banner[navIndex].url}}" mode="aspectFill" lazy-load="{{true}}"></image>
<view class="nav-view">
<view bindtap="changeNav" data-index="{{index}}" wx:for="{{nav}}" wx:key="index" class="nav-item {{index===navIndex?'on':''}}">
<text class="iconfont {{item.icon}}"></text>
<text>{{item.title}}</text>
</view>
<view class="active-view" style="left:calc(20rpx + {{navIndex*190}}rpx )"></view>
</view>
</view>
<view class="swiper-contaier">
<swiper interval="500" current="{{navIndex}}" bindanimationfinish="finishTap" duration="500" bindchange="swiperChange" style="height:calc( {{130*(banner[navIndex].data.length/2)}}rpx )">
<swiper-item wx:for="{{banner}}" wx:key="index" hidden="{{((navIndex==index))?false:true}}">
<view class="swiper-view">
<view class="item {{isStartAnimation?(navIndex==index?'in':'out'):''}}" style="animation-duration: {{(jndex%2==0)?(0.3+(jndex/16)):(0.4+(jndex/16))}}s;" wx:for="{{item.data}}" wx:key="jndex" wx:for-index="jndex" wx:for-item="jtem">
<text class="iconfont {{jtem.img}}"></text>{{jtem.title}}
</view>
</view>
</swiper-item>
</swiper>
</view>
</view>
wxss（这里的样式我用的是less）
.container{
.banner-body{
width: 640rpx;
height: 320rpx;
margin: 30rpx auto 0;
position: relative;
image{
width: 100%;
height: 100%;
border-radius: 20rpx;
}
.nav-view{
width: 600rpx;
height: 100rpx;
background-color: #fff;
position:absolute;
bottom: -50rpx;
left: 0;
right: 0;
border-radius: 50rpx;
margin: 0 auto;
box-shadow: 0 12rpx 10rpx #f1f1f1;
padding: 10rpx 20rpx;
display: flex;
align-items: center;
justify-content: center;
.active-view{
width: 190rpx;
height: 80rpx;
background-color: #333;
position: absolute;
border-radius: 40rpx;
z-index: 1;
left: 20rpx;
transition: left 0.3s;
}
.nav-item{
width: 190rpx;
height: 80rpx;
display: flex;
align-items: center;
justify-content: center;
font-size: 24rpx;
color: #333;
z-index: 2;
.iconfont{
margin-right: 10rpx;
font-size: 32rpx;
}
&.on{
color: #fff;
}
}
}
}
.swiper-contaier{
width: 100%;
margin: 100rpx auto 0;
.swiper-view{
width: 640rpx;
display: flex;
flex-wrap: wrap;
margin: 0 auto;
justify-content: space-between;
.item{
width: 310rpx;
height: 100rpx;
background-color: #f9f9f9;
margin-bottom: 20rpx;
display: flex;
padding: 20rpx;
align-items: center;
font-size: 22rpx;
border-radius: 10rpx;
&.in{
animation-name: inanimation;
animation-timing-function: linear;
}
&.out{
animation-name: outanimation;
animation-timing-function: linear;
}
.iconfont{
margin-right: 20rpx;
font-size: 50rpx;
}
}
}
}
@keyframes inanimation {
0%{
transform: translateX(0);
}
50%{
transform: translateX(400rpx);
}
100%{
transform: translateX(0);
}
}
@keyframes outanimation {
0%{
transform: translateX(0);
}
50%{
transform: translateX(-400rpx);
}
100%{
transform: translateX(-800rpx);
}
}
}
最后就是js了
data: {
banner:[
{url:'/images/cre_01.png',
data:[
{img:'iconxiezi',title:"所有女子鞋类"},
{img:'iconxiezi',title:"人气热销"},
{img:'iconxiezi',title:"休闲"},
{img:'iconxiezi',title:"新品上市"},
{img:'iconxiezi',title:"跑步"},
{img:'iconxiezi',title:"Air Jordan 1"},
{img:'iconxiezi',title:"新品上市"},
{img:'iconxiezi',title:"跑步"},
{img:'iconxiezi',title:"Air Jordan 1"},
{img:'iconxiezi',title:"Air Jordan 1"},
{img:'iconxiezi',title:"新品上市"},
{img:'iconxiezi',title:"跑步"},
{img:'iconxiezi',title:"Air Jordan 1"}
]
},
{url:'/images/cre_02.png',
data:[
{img:'iconfuzhuang',title:"所有女子服装"},
{img:'iconfuzhuang',title:"上衣/T恤"},
{img:'iconfuzhuang',title:"外套/夹克"},
{img:'iconfuzhuang',title:"连帽衫/卫衣"},
{img:'iconfuzhuang',title:"运动裤/紧身裤"},
{img:'iconfuzhuang',title:"运动内衣"},
{img:'iconfuzhuang',title:"连帽衫/卫衣"},
{img:'iconfuzhuang',title:"运动裤/紧身裤"},
{img:'iconfuzhuang',title:"运动内衣"}
]
},
{url:'/images/cre_03.png',
data:[
{img:'iconbasketball',title:"所有女子配件"},
{img:'iconbasketball',title:"包"},
{img:'iconbasketball',title:"帽子/头带"},
{img:'iconbasketball',title:"配件折扣优惠"}
]
}
],
nav:[
{title:'鞋类',icon:'iconxiezi'},
{title:'服装',icon:'iconfuzhuang'},
{title:'配件',icon:'iconbasketball'},
],
navIndex:0,
isStartAnimation:false,
ischangeNav:true
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
changeNav(e){
if(!this.data.ischangeNav) return;
this.setData({navIndex:e.currentTarget.dataset.index,ischangeNav:false})
},
finishTap(e){
const{source,current}=e.detail
this.setData({navIndex:current,isStartAnimation:source?false:true,ischangeNav:true})
},
swiperChange(e){
const{source,current}=e.detail
if(source=='touch'){
this.setData({navIndex:current,ischangeNav:true,isStartAnimation:false})
}else{
this.setData({isStartAnimation:true})
}
}
如发现bug请评论更新哦
