请教小程序点击按钮，底部出现一个类似分享的菜单

Question

showActionSheet就是一个文字菜单，但是如果要做一个像分享的菜单，即底部弹出的下拉菜单，上面有好几个图标，然后可以点击。

这样的需求是不是只能自己写一个隐藏的 view ，加上动画上升和下沉？
谢谢大佬们了。

Answer 1

我来写一下解决过程
其实对于初次编写小程序，最主要是要清楚小程序都是依靠数据驱动，也可以说是使用状态来判断，实现一些效果。
动效就很多依赖了 CSS3 了。

wxml部分

//这个是按键，用于触发。
<view style='width:710rpx;height:40px;background:#fff;border-top:1px solid #ccc;'>
    <image src="{{images[3].src}}" class='bottomIcon' bindtap='showAnswer'></image>
</view>

//这个是被触发部分
<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({

  /**
   * 页面的初始数据
   */
  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;
}

以上代码就是实现控制一个 view 的出现和消失，其实就是用函数来操作一个变量，因为这个变量是绑定在被操作的 view 上，当这个变量是 false 时，它是一个 class，变量为 true 就是另外一个 class，当切换 class 时，我们就必须借用 CSS3 这个很方便的控制动效了，动画效果都在于改变 view 的 height，结合 transition，很容易就做到想要的动效了，这个虽然简单，但是却没有多少人详细说过，或是我没有看到吧，我发出来让大家看看，希望如果有什么不对的地方，多请指教，如果有更好的方法请不吝赐教，谢谢。

Answer 2

自己写吧，很简单的，不难

Answer 3

这个功能实现起来也不是很麻烦的啦。几个view加hidden就能搞定啦

Answer 4

可以把它单独做成一个template,方便在各个页面去使用。

Answer 5

不想写 就去拉个 zui 的组件不就好了