請(qǐng)教小程序點(diǎn)擊按鈕，底部出現(xiàn)一個(gè)類似分享的菜單

不想寫 就去拉個(gè) zui 的組件不就好了

可以把它單獨(dú)做成一個(gè)template,方便在各個(gè)頁面去使用。

我來寫一下解決過程
其實(shí)對(duì)于初次編寫小程序，最主要是要清楚小程序都是依靠數(shù)據(jù)驅(qū)動(dòng)，也可以說是使用狀態(tài)來判斷，實(shí)現(xiàn)一些效果。
動(dòng)效就很多依賴了 CSS3 了。

wxml部分

//這個(gè)是按鍵，用于觸發(fā)。
<view style='width:710rpx;height:40px;background:#fff;border-top:1px solid #ccc;'>
    <image src="{{images[3].src}}" class='bottomIcon' bindtap='showAnswer'></image>
</view>

//這個(gè)是被觸發(fā)部分
<view class='{{answer? "showAnswer" : "foldAnswer"}}'>
  <image src='../images/answer_detail_b.png' style='width:20px;height:20px;float:left;margin:10px;'></image>
  <text style='color:#48C0F0'>分享部分</text>
  <view class='ok' bindtap='foldAnswer'>
    <image src='../images/OK.png' style='width:60px;height:26px;'></image>
  </view>
</view>

js部分

// pages/strengthen/Subtopic.js
Page({

  /**
   * 頁面的初始數(shù)據(jù)
   */
  data: {
    answer: false
  },
  showAnswer: function () {
    this.setData({
      answer: true
    })
  },
  foldAnswer: function () {
    this.setData({
      answer: false
    })
  }
})

wxss部分

.showAnswer {
  width: 100%;
  height: 240px;
  position: fixed;
  bottom: 0;
  transition: height 0.25s;
  line-height: 36px;
  backdrop-filter: blur(5px);
  background-color: rgba(0, 0, 0, 0.6);
  box-shadow: 0 -3.5px 15.5px 0 rgba(0, 0, 0, 0.33);
}
.foldAnswer {
  width: 100%;
  height: 0;
  position: fixed;
  bottom: 0;
  background: #555;
  transition: height 0.25s;
  line-height: 36px;
}

以上代碼就是實(shí)現(xiàn)控制一個(gè) view 的出現(xiàn)和消失，其實(shí)就是用函數(shù)來操作一個(gè)變量，因?yàn)檫@個(gè)變量是綁定在被操作的 view 上，當(dāng)這個(gè)變量是 false 時(shí)，它是一個(gè) class，變量為 true 就是另外一個(gè) class，當(dāng)切換 class 時(shí)，我們就必須借用 CSS3 這個(gè)很方便的控制動(dòng)效了，動(dòng)畫效果都在于改變 view 的 height，結(jié)合 transition，很容易就做到想要的動(dòng)效了，這個(gè)雖然簡(jiǎn)單，但是卻沒有多少人詳細(xì)說過，或是我沒有看到吧，我發(fā)出來讓大家看看，希望如果有什么不對(duì)的地方，多請(qǐng)指教，如果有更好的方法請(qǐng)不吝賜教，謝謝。

自己寫吧，很簡(jiǎn)單的，不難

這個(gè)功能實(shí)現(xiàn)起來也不是很麻煩的啦。幾個(gè)view加hidden就能搞定啦