弹出action sheet
当前位置:   article > 正文

uniapp接口-uni.showActionSheet 从底部向上弹出操作菜单

uniapp接口-uni.showActionSheet 从底部向上弹出操作菜单

官方示例:https://uniapp.dcloud.io/api/ui/prompt?id=showactionsheet

效果图:

注意:该示例在手机上运行时可能会出现标题不显示的bug

代码实现:

  1. <template>
  2. <view><button @tap="actionSheetTap">弹出action sheet</button></view>
  3. </template>
  4. <script>
  5. export default {
  6. data() {
  7. return {
  8. buttonRect: {}
  9. };
  10. },
  11. methods: {
  12. actionSheetTap() {
  13. const that = this;
  14. uni.showActionSheet({
  15. title: '标题',
  16. itemList: ['item1', 'item2', 'item3', 'item4'],
  17. popover: {
  18. top: that.buttonRect.top * 2 + that.buttonRect.height,
  19. left: that.buttonRect.left + that.buttonRect.width / 2
  20. },
  21. success: e => {
  22. uni.showToast({
  23. title: '点击了第' + e.tapIndex + '个选项',
  24. icon: 'none'
  25. });
  26. }
  27. });
  28. }
  29. }
  30. };
  31. </script>

 

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/Gausst松鼠会/article/detail/481374
推荐阅读
相关标签
  

闽ICP备14008679号