ActionSheet

ActionSheet用于显示包含一系列可交互的动作集合,包括说明、跳转等。由底部弹出,一般用于响应用户对页面的点击。
如果在 H5 页面原生实现这个功能还是有点麻烦的,在小程序中就比较容易,直接调用 API wx.showActionSheet()就可以了,mpvue框架对微信的 API 支持的也十分完美,因此在mpvue中就可以这样实现:

  1. <template>
  2. <divclass="page">
  3. <divclass="page__bd">
  4. <divclass="weui-btn-area">
  5. <buttontype="default" @click="open">ActionSheet</button>
  6. </div>
  7. </div>
  8. </div>
  9. </template>
  10. <script>
  11. import base64 from '../../../static/images/base64';
  12. exportdefault{
  13. data(){
  14. return{
  15. itemList:['A','B','C']
  16. }
  17. },
  18. methods:{
  19. open(){
  20. let _this =this;
  21. wx.showActionSheet({
  22. itemList:this.itemList,
  23. success:function(res){
  24. console.log("index:"+ res.tapIndex,"用户选的值为:"+ _this.itemList[res.tapIndex]);
  25. }
  26. });
  27. }
  28. }
  29. }
  30. </script>
  31. <style>
  32. page {
  33. margin-top:50px;
  34. padding:15px;
  35. box-sizing: border-box;
  36. }
  37. </style>

说两个比较重要的参数

itemList

  • 类型:String Array
  • 必填:是
  • 说明:按钮的文字数组,数组长度最大为6个

success

  • 类型:Function
  • 必填:否
  • 说明:接口调用成功的回调函数,详见返回参数说明
success 参数说明

tapIndex

  • 类型:Number
  • 说明:用户点击的按钮项目,在itemList中所对应的索引值

tip:可以用res.tapIndex可以获取用户点击值所对应的索引值。

效果

actionsheet