评论

如何实现一个带图标的actionSheet效果

一个带图标的actionSheet 😁

刚才有童鞋询问如何给actionSheet前加图标,然鹅官方没提供该效果,那么我们自己做一个定制化的actionSheet吧。
还是那句话,有需求,咱们有空就去实现下,也算是能锻炼自己的动手能力,提升点知识面。。
先看看实现后的效果图:

首先自定义actionSheet组件。
wxml
简单的页面布局。

<view class="qts-as-mask qts-class-mask {{ visible ? 'qts-as-mask-show' : '' }}" bindtap="handleClickMask" catchtouchmove="preventTouchmove" ></view>
<view class="qts-class qts-as {{ visible ? 'qts-as-show' : '' }}" catchtouchmove="preventTouchmove">
  <view class="qts-as-header qts-class-header">
    <slot name="header"></slot>
  </view>
  <view class="qts-as-actions">
    <view class="qts-as-action-item" wx:for="{{actions}}" wx:key="name">
      <button hover-class="none" bindtap="handleClickItem" data-index="{{index}}" open-type="{{item.openType}}" class="qts-as-btn-qts ptp_exposure" >
          <image wx:if="{{item.icon}}" src="{{item.icon}}" class="qts-btn-image" />
          <view class="qts-as-btn-text">{{item.name}}</view>
      </button>
    </view>
  </view>
  <view class="qts-as-cancel" wx:if="{{showCancel}}">
    <button hover-class="none" class="qts-as-cancel-btn" bindtap="handleClickCancel">取消</button>
  </view>
</view>

js处理:

定制了三种功能:

  • 是否需要隐藏取消按钮
  • 是否需要点击蒙层关闭actionSheet
  • 内容外部组件可配置
Component({
  externalClasses: ['qts-class', 'qts-class-mask', 'qts-class-header'],

  options: {
    multipleSlots: true
  },

  properties: {
    showCancel: {
      type: Boolean,
      value: true
    },
    visible: {
      type: Boolean,
      value: false
    },
    actions: {
      type: Array,
      value: []
    },
    maskClosable: {
      type: Boolean,
      value: true
    }
  },

  methods: {
    handleClickMask() {
      if (!this.data.maskClosable) return;
      this.handleClickCancel();
    },
    preventTouchmove() {},
    handleClickItem(e) {
      const dataset = e.currentTarget.dataset || ''
      this.triggerEvent('click', dataset)
      this.triggerEvent('cancel');
    },
    handleClickCancel() {
      this.triggerEvent('cancel');
    }
  }
})

应用的页面引用该组件:

<view class="container" bindtap="handleClick">点我弹出actionSheet</view>
<!-- 
   visible 弹窗显隐藏
   show-cancel 是否显示取消按钮
   bind:cancel  取消按钮点击回调
   bind:click 单个item点击回调
   mask-closable 点击蒙层是否关闭弹窗
 -->
<action-sheet visible="{{visible}}" actions="{{actions}}" show-cancel bind:cancel="handleClick" bind:click="handleClickItem" mask-closable="{{true}}" />
const app = getApp()

Page({
  data: {
  //可配置items选项,支持传入button的openType属性
    actions: [{
        name: '生成图片',
        icon: 'https://qiniu-image.qtshe.com/201809104.png'
      },
      {
        name: '转发给好友或群聊天',
        icon: 'https://qiniu-image.qtshe.com/201809105.png',
        openType: 'share'
      }
    ],
    visible: false
  },
  //弹窗显隐藏
  handleClick() {
    this.setData({
      visible: !this.data.visible
    })
  },
  //单个item点击
  //actionsheet内的点击方法
  handleClickItem({detail}) {
    if (detail.index === 0) {
      console.log(111)
       //第一个选项被点击
    }
  },
})

以上就是一个自定义actionSheet的实现方式以及引用方式。。

老规矩,附上代码片段。

https://developers.weixin.qq.com/s/Bhc0Sjmw7AgW

最后一次编辑于  05-26  
点赞 11
收藏
评论

5 个评论

  • xy
    xy
    05-08

    点个赞

    05-08
    赞同
    回复 1
  • 未知生物
    未知生物
    04-13

    先点后看 养成习惯

    04-13
    赞同
    回复 3
    • 奶八
      奶八
      04-13
      0110 0110 0110~
      04-13
      1
      回复
    • 未知生物
      未知生物
      04-13
      要用的话一定别忘了把app,wxss文件里的样式放到自己的需要用组件的页面中,要不样式会乱 给作者好评是个好组件我收下了
      04-13
      回复
    • 奶八
      奶八
      04-16
      好叻,🙏
      04-16
      1
      回复
  • Stranger
    Stranger
    04-02

    [先点赞再看]

    04-02
    赞同
    回复
  • 浮小云
    浮小云
    04-02

    👍

    04-02
    赞同
    回复
  • Admin²⁰²⁰
    Admin²⁰²⁰
    04-02

    老夫收了,最喜欢这种拎包句能用的代码

    04-02
    赞同
    回复 2
登录 后发表内容