微信小程序使用actionSheet组件实现转发分享功能

最新推荐文章于 2025-06-04 21:24:54 发布

原创最新推荐文章于 2025-06-04 21:24:54 发布 · 939 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ActionSheet #小程序 #分享

JS 同时被 2 个专栏收录

34 篇文章

订阅专栏

小程序

17 篇文章

订阅专栏

本文介绍了一种使用wxml和js在小程序中实现下拉菜单的方法。通过按钮触发，显示包含分享、下载视频和举报用户等选项的行动面板。代码示例展示了如何用数据绑定控制面板的显示与隐藏。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

wxml文件


<button bindtap='listenerActionSheet'>显示</button>
<action-sheet  hidden="{{actionSheetHidden}}" bindchange="listenerActionSheet" wx:for-index="idx">
   <action-sheet-item>
         <button open-type="share">分享给微信好友</button>
   </action-sheet-item>
<view wx:for="{{itemList}}" wx:for-item="item" wx:for-index="idx" >
   <action-sheet-item bindtap='operate' id='{{idx}}'>{{item.name}}</action-sheet-item>
</view>
   <action-sheet-cancel>取消</action-sheet-cancel>
</action-sheet>

js文件

 data: {
    actionSheetHidden: true,
    itemList: [{
      name: "下载视频"
    }, {
      name: '举报用户'
    }],
  },

 listenerButton: function() {
    this.setData({
      actionSheetHidden: !this.data.actionSheetHidden
    });
  },
  listenerActionSheet: function() {

    this.setData({
      actionSheetHidden: !this.data.actionSheetHidden,
    })
  },