1. 程式人生 > >微信小程式使用show-actionSheet元件實現轉發功能

微信小程式使用show-actionSheet元件實現轉發功能

通過微信小程式官方文件,我們發現只能通過
官方提供button的元件來完成轉發功能。
那麼如何通過show-actionSheet元件來實現轉發功能。
官方文件:

在這裡插入圖片描述我們需要實現的功能如圖所示:

在這裡插入圖片描述

在這裡插入圖片描述

程式碼實現:

其中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檔案

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

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

page data

 data: {
    actionSheetHidden: true,
    itemList: [{
      name: "下載視訊"
    }, {
      name: '舉報使用者'
    }],
  },