第一次写文章 主要是看到小程序这边出现不支持 第三方插件，网上折叠导航栏又少的可怜 我找了一圈折叠就有 ， 但是没一个带动画的，有的话都不是小程序的。
所以我今天写一个三毛钱特效折叠动画导航栏，
下面介绍具体实现思路
先看布局代码
<view class="nav">
<view class='navList1' wx:for="123" >
<view class='navList1-center' bindtap='BtnNav' data-id="{{index}}" data-state="{{index==idx?state:'close'}}">
一级导航栏{{idx}}
</view>
<view class='navList2' animation="{{index==idx?box:box2}}" >
<view class='navList2List'>二级导航</view>
<view class='navList2List'>二级导航</view>
</view>
</view>
</view>
实现思路
第一步：点击该元素 给当前元素赋值打开状态 然后让二级大盒子的高度开始动画宽展到你要的高度，
第二步：再次点击该元素 判断该元素的赋值是否为打开状态 ，如是打开状态让他收缩为0；并且赋值为关闭状态，
第三步：点击当前元素后 展开当前二级元素 再次点击其他一级元素 让所有的二级元素盒子收缩 完后开始赋值给再次点击这个元素的高度动画，
就是这么简单 没有任何困难 我就写了十几分钟 理解最重要
目前网上太多小程序的特效 以后有空再更新几个
JS代码 我只能说 能不看尽量不看 思路都给你写好了 按照思路来简简单单 以后自己能手写
data: {
box:"",
idx:"",
state:"close",
box2:'',
},
BtnNav:function(e){
var animation = wx.createAnimation({
duration: 500,
timingFunction: 'ease',
delay: 100
})
var index = e.currentTarget.dataset.id;//当前id
var state = e.currentTarget.dataset.state;//当前状态
console.log(index)
console.log(this.data.idx)
if (state != 'close'){//
this.erido(index)
console.log("收缩全部")
}else{
//初始化 从未点击或开当前元素展开 并赋值
animation.height(200).step();
this.setData({
idx: index,
box: animation.export(),
state: 'open'
})
}
//收缩全部 后 然后展开当前点击那个
if (this.data.idx == index && state == "open") {//
animation.height(0).step();
this.setData({
idx: index,
box: animation.export(),
state: 'close'
})
return false;
}
},
//收缩全部
erido:function(id){
var state;
var animation = wx.createAnimation({
duration: 500,
timingFunction: 'ease',
delay: 100
})
animation.height(0).step();
this.setData({
box2: animation.export(),
idx: id,
})
},
