微信小程序悬浮按钮-点击传参

布满荆棘的人生 2022-09-04 05:46 236阅读 0赞

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTcyMjkyOA_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTcyMjkyOA_size_16_color_FFFFFF_t_70 1][]

1.js-组件

Component({
      data: {
        play: false,
        type:''
      },
      properties: {},
      methods: {
        changePlay(){
          let flag = !this.data.play;
          this.setData({
            play:flag
          });
          //start title
          let titleOpenAn = wx.createAnimation({
            duration: 300,
            timingFunction: 'forwards',
            delay: 0,
            transformOrigin: '50% 50% 0'
          });
          titleOpenAn.opacity(0).step();
          this.setData({
            titleOpenAn:titleOpenAn.export()
          });
          let titleCloseAn = wx.createAnimation({
            duration: 300,
            timingFunction: 'forwards',
            delay: 0,
            transformOrigin: '50% 50% 0'
          });
          titleCloseAn.opacity(1).step();
          this.setData({
            titleCloseAn:titleCloseAn.export()
          });
          //end title
          // start 第一条line
          let line1OpenAn = wx.createAnimation({
            duration: 300,
            timingFunction: 'forwards',
            delay: 0,
            transformOrigin: '50% 50% 0'
          });
          line1OpenAn.translateY(12).rotate(45).scale(1.4, 1).step();
          this.setData({
            line1OpenAn:line1OpenAn.export()
          });
          let line1CloseAn = wx.createAnimation({
            duration: 300,
            timingFunction: 'forwards',
            delay: 0,
            transformOrigin: '12rpx 50%'
          });
          line1CloseAn.translateY(0).rotate(0).scale(1, 1).step();
          this.setData({
            line1CloseAn:line1CloseAn.export()
          });
          //end 第一条line
    
          // start 第二条line
          let line2OpenAn = wx.createAnimation({
            duration: 300,
            timingFunction: 'forwards',
            delay: 0,
            transformOrigin: '100% 0'
          });
          line2OpenAn.translateY(-6.5).translateX(-1).rotate(-45).scale(1.4, 1).step();
          this.setData({
            line2OpenAn:line2OpenAn.export()
          });
    
          let line2CloseAn = wx.createAnimation({
            duration: 300,
            timingFunction: 'forwards',
            delay: 0,
            transformOrigin: '46rpx 50%'
          });
          line2CloseAn.translateY(0).rotate(0).scale(1, 1).step();
          this.setData({
            line2CloseAn:line2CloseAn.export()
          });
          //end 第二条line
    ///start 第0个按钮
    let btn0Open = wx.createAnimation({
      duration: 300,
      timingFunction: 'forwards',
      delay: 0,
      transformOrigin: '100% 0'
    });
    btn0Open.translateX(-300).opacity(1).step();
    this.setData({
      btn0Open:btn0Open.export()
    });
    
    let btn0Close = wx.createAnimation({
      duration: 300,
      timingFunction: 'forwards',
      delay: 0,
      transformOrigin: '46rpx 50%'
    });
    btn0Close.translateX(0).opacity(0).step();
    this.setData({
      btn0Close:btn0Close.export()
    });
    /end 第0个按钮
          ///start 第一个按钮
          let btn1Open = wx.createAnimation({
            duration: 300,
            timingFunction: 'forwards',
            delay: 0,
            transformOrigin: '100% 0'
          });
          btn1Open.translateX(-60).opacity(1).step();
          this.setData({
            btn1Open:btn1Open.export()
          });
    
          let btn1Close = wx.createAnimation({
            duration: 300,
            timingFunction: 'forwards',
            delay: 0,
            transformOrigin: '46rpx 50%'
          });
          btn1Close.translateX(0).opacity(0).step();
          this.setData({
            btn1Close:btn1Close.export()
          });
          /end 第一个按钮
          //start 第二个按钮
          let btn2Open = wx.createAnimation({
            duration: 500,
            timingFunction: 'forwards',
            delay: 0,
            transformOrigin: '100% 0'
          });
          btn2Open.translateX(-120).opacity(1).step();
          this.setData({
            btn2Open:btn2Open.export()
          });
    
          let btn2Close = wx.createAnimation({
            duration: 500,
            timingFunction: 'forwards',
            delay: 0,
            transformOrigin: '46rpx 50%'
          });
          btn2Close.translateX(0).opacity(0).step();
          this.setData({
            btn2Close:btn2Close.export()
          });
          //end 第二个按钮
          //start 第三个按钮
          let btn3Open = wx.createAnimation({
            duration: 700,
            timingFunction: 'forwards',
            delay: 0,
            transformOrigin: '100% 0'
          });
          btn3Open.translateX(-180).opacity(1).step();
          this.setData({
            btn3Open:btn3Open.export()
          });
    
          let btn3Close = wx.createAnimation({
            duration: 700,
            timingFunction: 'forwards',
            delay: 0,
            transformOrigin: '46rpx 50%'
          });
          btn3Close.translateX(0).opacity(0).step();
          this.setData({
            btn3Close:btn3Close.export()
          });
          //end 第三个按钮
          //start 第四个按钮
          let btn4Open = wx.createAnimation({
            duration: 700,
            timingFunction: 'forwards',
            delay: 0,
            transformOrigin: '100% 0'
          });
          btn4Open.translateX(-240).opacity(1).step();
          this.setData({
            btn4Open:btn4Open.export()
          });
    
          let btn4Close = wx.createAnimation({
            duration: 700,
            timingFunction: 'forwards',
            delay: 0,
            transformOrigin: '46rpx 50%'
          });
          btn4Close.translateX(0).opacity(0).step();
          this.setData({
            btn4Close:btn4Close.export()
          });
          //end 第四个按钮
        },
        touch(e){
          debugger
    console.log('点击的按钮....'+JSON.stringify(e.currentTarget.dataset.index))
    this.setData({type:e.currentTarget.dataset.index})
    console.log('>>>>>>>>>type>>>>>'+this.data.type)
          //return e.currentTarget.dataset.index
        }
      }
    })

2，wxml组件

3 css-组件

.menu-box {
      position: fixed;
      bottom: 40vw;
      right: 30rpx;
      width: 100rpx;
      padding-bottom: 100rpx;
    }
    .menu-box .navbar {
      z-index: 1000;
      position: absolute;
      bottom: 0rpx;
      width: 110rpx;
      height: 110rpx;
      text-align: center;
      /* background-color:#009DA0;rgba(0, 0, 0, 0.6); */
        background-color:#009DA0;
      color: white;
      font-size: 0rpx;
      border-radius: 60%;
    }
    .menu-box .navbar>.btn {
      padding: 25rpx;
      width: 100%;
      height: 100%;
      box-sizing: border-box;
    }
    .menu-box .navbar>.btn>.line {
      height: 6rpx;
      background-color: white;
      margin: 0px 2rpx 6rpx 2rpx;
      border-radius: 6rpx;
    }
    .menu-box .navbar>.btn>.title {
      font-size: 20rpx;
    }
    .menu-box .active {
      background-color: pink;
    }
    .menu-box .menu{
      /* width: 100rpx; */
      height: 100rpx;
      /* overflow: hidden; */
      position: relative;
      /* margin: 0 auto; */
      bottom: -100rpx;
    }
    .menu-box .menu>view {
      z-index: 100;
      background-color:#009DA0;
      margin-bottom: 20rpx;
      border-radius: 50%;
      height: 100rpx;
      line-height: 100rpx;
      position: absolute;
      width: 100rpx;
      height: 100rpx;
      margin-left: auto;
      margin-right: auto;
      opacity: 0;
      font-size: 0rpx;
      color: red;
    }
    .menu-box .menu>view text{
      display: inline-block;
      position: absolute;
      text-align: center;
      width:100%;
      height: 100%;
      color: white;
      z-index: 10000;
      font-size: 25rpx;
    }

1.js-页面

// pages/test/function/index.js
    Page({
    
      /**
       * 页面的初始数据
       */
      data: {
    
      },
    
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
          this.setData({
            keyboard: this.selectComponent('#keyboard')
          })
      },
    //
    gettouch:function(e){
      var aa=this.data.keyboard.data.type;
      debugger
      console.log(aa)
     
    },
      /**
       * 生命周期函数--监听页面初次渲染完成
       */
      onReady: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面显示
       */
      onShow: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面隐藏
       */
      onHide: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面卸载
       */
      onUnload: function () {
    
      },
    
      /**
       * 页面相关事件处理函数--监听用户下拉动作
       */
      onPullDownRefresh: function () {
    
      },
    
      /**
       * 页面上拉触底事件的处理函数
       */
      onReachBottom: function () {
    
      },
    
      /**
       * 用户点击右上角分享
       */
      onShareAppMessage: function () {
    
      }
    })

2 wxml-页面

3.css-页面

.menu-box {
      position: fixed;
      bottom: 40vw;
      right: 30rpx;
      width: 100rpx;
      padding-bottom: 100rpx;
    }
    .menu-box .navbar {
      z-index: 1000;
      position: absolute;
      bottom: 0rpx;
      width: 100rpx;
      height: 100rpx;
      text-align: center;
      background-color: rgba(0, 0, 0, 0.6);
      color: white;
      font-size: 0rpx;
      border-radius: 50%;
    }
    .menu-box .navbar>.btn {
      padding: 25rpx;
      width: 100%;
      height: 100%;
      box-sizing: border-box;
    }
    .menu-box .navbar>.btn>.line {
      height: 6rpx;
      background-color: white;
      margin: 0px 2rpx 6rpx 2rpx;
      border-radius: 6rpx;
    }
    .menu-box .navbar>.btn>.title {
      font-size: 20rpx;
    }
    .menu-box .active {
      background-color: pink;
    }
    .menu-box .menu{
      /* width: 100rpx; */
      height: 100rpx;
      /* overflow: hidden; */
      position: relative;
      /* margin: 0 auto; */
      bottom: -100rpx;
    }
    .menu-box .menu>view {
      z-index: 100;
      background-color: rgba(0, 0, 0, 0.6);
      margin-bottom: 20rpx;
      border-radius: 50%;
      height: 100rpx;
      line-height: 100rpx;
      position: absolute;
      width: 100rpx;
      height: 100rpx;
      margin-left: auto;
      margin-right: auto;
      opacity: 0;
      font-size: 0rpx;
      color: red;
    }
    .menu-box .menu>view text{
      display: inline-block;
      position: absolute;
      text-align: center;
      width:100%;
      height: 100%;
      color: white;
      z-index: 10000;
      font-size: 25rpx;
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTcyMjkyOA_size_16_color_FFFFFF_t_70]: /images/20220829/9c3d8cb6e117421d9e8b435e59c55a03.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTcyMjkyOA_size_16_color_FFFFFF_t_70 1]: /images/20220829/1f76ab1639f24042af1db1e754f08c03.png