最近看到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請評論更新哦
