微信小程序自定义组件之多功能按钮

效果如图，已经封装好了，直接可以使用，其中有路径的地方需要根据情况改为自己项目中的文件所在路径，文章最后会介绍使用方法

iconClick.wxml

<view>
    <image src="{{iconA}}" class="img-style" animation="{{animCollect}}" bindtap="_clickA"></image>
    <image src="{{iconB}}" class="img-style" animation="{{animTranspond}}" bindtap="_clickB"></image>
    <image src="{{iconC}}" class="img-style" animation="{{animInput}}" bindtap="_clickC"></image>
    <image src="../../icon/add.png" class="img-plus-style" animation="{{animPlus}}" catchtap="_moreBtn"></image>
</view>

iconClick.wxss

.img-plus-style {
    height: 100rpx;
    width: 100rpx;
    position: fixed;
    bottom: 4%;
    right: 5%;
    z-index: 100;
}
.img-style {
    height: 120rpx;
    width: 120rpx;
    position: fixed;
    bottom: 4%;
    right: 5%;
    opacity: 0;
}

iconClick.json

{
  "usingComponents": { },
  "component": true
}

iconClick.js

Component({

    /**
     * 页面的初始数据
     */
    data: {
        isPopping: false,//是否已经弹出
        animPlus: {},//旋转动画
        animCollect: {},//item位移,透明度
        animTranspond: {},//item位移,透明度
        animInput: {},//item位移,透明度
        iconA: "",
        iconB: "",
        iconC: ""
    },

    properties: {
        iconA: {
            type: String,
            value: ""
        },
        iconB: {
            type: String,
            value: ""
        },
        iconC: {
            type: String,
            value: ""
        }
    },
    attached: function(){
        let that = this;
        this.setData({
            iconA: that.properties.iconA,
            iconB: that.properties.iconB,
            iconC: that.properties.iconC
        })
    },

    methods: {

        _moreBtn: function () {
            this._plus();
        },

        //点击弹出
        _plus: function () {
            if (!this.data.isPopping) {
                this._popp();
                this.setData({
                    isPopping: true
                })
            }
            else {
                this._takeback();
                this.setData({
                    isPopping: false
                });
            }
        },
        _clickA: function () {
            this.triggerEvent("clickA");
            this._plus();
        },
        _clickB: function () {
            this.triggerEvent("clickB");
            this._plus();
        },
        _clickC: function () {
            this.triggerEvent("clickC");
            this._plus();
        },

        //弹出动画
        _popp: function () {
            //plus顺时针旋转
            let animationPlus = wx.createAnimation({
                duration: 500,
                timingFunction: 'ease'
            })
            let animationcollect = wx.createAnimation({
                duration: 500,
                timingFunction: 'ease'
            })
            let animationTranspond = wx.createAnimation({
                duration: 500,
                timingFunction: 'ease'
            })
            let animationInput = wx.createAnimation({
                duration: 500,
                timingFunction: 'ease'
            })
            animationPlus.rotateZ(180).step();
            animationcollect.translate(-0, -100).rotateZ(0).opacity(1).step();
            animationTranspond.translate(-85, -75).rotateZ(0).opacity(1).step();
            animationInput.translate(-80, 10).rotateZ(0).opacity(1).step();
            this.setData({
                animPlus: animationPlus.export(),
                animCollect: animationcollect.export(),
                animTranspond: animationTranspond.export(),
                animInput: animationInput.export(),
            })
        },
        //收回动画
        _takeback: function () {
            //plus逆时针旋转
            var animationPlus = wx.createAnimation({
                duration: 500,
                timingFunction: 'ease-out'
            })
            var animationcollect = wx.createAnimation({
                duration: 500,
                timingFunction: 'ease-out'
            })
            var animationTranspond = wx.createAnimation({
                duration: 500,
                timingFunction: 'ease-out'
            })
            var animationInput = wx.createAnimation({
                duration: 500,
                timingFunction: 'ease-out'
            })
            animationPlus.rotateZ(0).step();
            animationcollect.translate(0, 0).rotateZ(0).opacity(0).step();
            animationTranspond.translate(0, 0).rotateZ(0).opacity(0).step();
            animationInput.translate(0, 0).rotateZ(0).opacity(0).step();
            this.setData({
                animPlus: animationPlus.export(),
                animCollect: animationcollect.export(),
                animTranspond: animationTranspond.export(),
                animInput: animationInput.export(),
            })
        },
    }
})

使用方法如下：

现在json文件中引入组件

"usingComponents": {
    "iconClick": "../../../../component/iconClick/iconClick"
  },

在wxml文件中设置组件的属性及图标路径等相关信息

   <iconClick
            id="iconClick"
            iconA="/pages/icon/save1.png"
            iconB="/pages/icon/daikaifa.png"
            iconC="/pages/icon/daikaifa.png"
            bind:clickA="_clickA"
            bind:clickB="_clickB"
            bind:clickC="_clickC"
    >
    </iconClick>

在js文件中初始化组件，和点击按钮后触发的相关逻辑

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
      var component=this.selectComponent("#iconClick")
  },
  _clickA() {
    console.log("点击了A")
  },
  _clickB () {
    console.log("点击了B")
  },
  _clickC: function () {
    console.log("点击了C")
  },