遍体鳞伤的 ActionSheet 与分享按钮 – 微信小程序

遍体鳞伤

说起微信小程序的操作菜单,也就是ActionSheet 可能不是小程序的开发者还不清楚这是什么。ActionSheet 可以说是非常常见,经常操作的东西了,就是下图这个菜单。

功能菜单 ActionSheet

小程序有提供官方API,调用操作菜单还是比较简单的。

wx.showActionSheet({
  itemList: ['A', 'B', 'C'],
  success: function(res) {
    console.log(res.tapIndex)
  },
  fail: function(res) {
    console.log(res.errMsg)
  }
})

然后会返回tapIndex,也就是用户点击的按钮,从上到下的顺序,从0开始。看上去非常简单,但实际上这个ActionSheet 中的菜单本身不能绑定任何事件,只能通过用户的选择结果来处理。也不能在菜单上预设参数,参数要提前设置在data 中。

而微信小程序的分享触发只有一个方法,就是通过button组建,使用open-type="share"来触发,这样通过小程序原生功能是不可能实现通过ActionSheet 来触发分享功能了。

原生的办法不行,那就只能自定义ActionSheet了,好在小程序提供的组件还比较丰富,自定义也不是很麻烦。

wxml 结构

<action-sheet hidden="{{actionSheetHidden}}" bindchange="listenerActionSheet">
   <action-sheet-item open-type="share">
         <button open-type="share">分享给好友</button>
   </action-sheet-item>
   <action-sheet-item>生成分享卡片</action-sheet-item>
   <action-sheet-cancel>取消</action-sheet-cancel>
</action-sheet>

js代码

openActionSheet(e){
    var self = this;
    self.setData({
      actionSheetHidden: !self.data.actionSheetHidden
    });

  },
listenerActionSheet: function () {
    var self = this;
    self.setData({
      actionSheetHidden: !self.data.actionSheetHidden
    })
 },

这样就自定义了一个操作菜单,并且可以直接触发分享功能。

这里还有个坑,就是触发分享需要使用button 组件,默认样式是有一个边框的,通过常规的border:0并不能去掉这个边框,原因是这个样式是写在button:after 伪类里的,需要对button:after 进行样式重写才能去掉这个边框。可以说是相当的坑了。

Bigfa

computer loser

Countine Reading

Comments : 7

  1. 对话框貌似是和贝总 :cry:

  2. 不停的否决自己就对了,然后,越过一个个坑

  3. 厉害 文

  4. :lol: 把贝总举高高啊

  5. 遍体鳞伤与首图很配哦 :idea:

  6. 请问老哥,你wp网站用的是哪个API?

  7. 遍体鳞伤的坑。

发表留言

人生在世,错别字在所难免,无需纠正。

Smilies powered by wp-alu

Post Comment