第一次寫文章 主要是看到小程序這邊出現(xiàn)不支持 第三方插件，網(wǎng)上折疊導(dǎo)航欄又少的可憐 我找了一圈折疊就有 ， 但是沒一個帶動畫的，有的話都不是小程序的。?
所以我今天寫一個三毛錢特效折疊動畫導(dǎo)航欄，?
下面介紹具體實現(xiàn)思路
先看布局代碼
<view class="nav">
? ? ? <view class='navList1' wx:for="123" >
? ? ? ? ? <view class='navList1-center' bindtap='BtnNav'? data-id="{{index}}" data-state="{{index==idx?state:'close'}}">
? ? ? ? ? ? ? 一級導(dǎo)航欄{{idx}}
? ? ? ? ? </view>
? ? ? ? <view class='navList2' animation="{{index==idx?box:box2}}" >
? ? ? ? ? ? ? <view class='navList2List'>二級導(dǎo)航</view>
? ? ? ? ? ? ? <view class='navList2List'>二級導(dǎo)航</view>
? ? ? ? </view>
? ? ? </view>
</view>
實現(xiàn)思路
第一步：點擊該元素 給當(dāng)前元素賦值打開狀態(tài) 然后讓二級大盒子的高度開始動畫寬展到你要的高度，
第二步：再次點擊該元素 判斷該元素的賦值是否為打開狀態(tài) ，如是打開狀態(tài)讓他收縮為0；并且賦值為關(guān)閉狀態(tài)，
第三步：點擊當(dāng)前元素后 展開當(dāng)前二級元素? 再次點擊其他一級元素 讓所有的二級元素盒子收縮 完后開始賦值給再次點擊這個元素的高度動畫，
就是這么簡單 沒有任何困難 我就寫了十幾分鐘 理解最重要
目前網(wǎng)上太多小程序的特效 以后有空再更新幾個
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;//當(dāng)前id
? ? var state = e.currentTarget.dataset.state;//當(dāng)前狀態(tài)
? ? console.log(index)
? ? console.log(this.data.idx)
? ? if (state != 'close'){//
? ? ? this.erido(index)
? ? ? console.log("收縮全部")
? ? }else{
? ? ? //初始化? 從未點擊或開當(dāng)前元素展開 并賦值
? ? ? animation.height(200).step();
? ? ? this.setData({
? ? ? ? idx: index,
? ? ? ? box: animation.export(),
? ? ? ? state: 'open'
? ? ? })
? ? }
? ? //收縮全部 后 然后展開當(dāng)前點擊那個
? ? 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,
? ? })
? },
