微信小程序悬浮功能小按钮

悠悠 2022-09-04 04:54 448阅读 0赞

如上图所示，废话不多说，直接上代码  
一、WXML

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTcyMjkyOA_size_16_color_FFFFFF_t_70][]![20210811104059131.png][]

<view class="menu-box">  
  <view class="navbar \{ \{ play?'active':'' \}\}">  
    <view class="btn" bindtap="changePlay">  
      <view class="line" animation="\{ \{ !play?line1CloseAn:line1OpenAn \}\}"></view>  
      <view class="line" animation="\{ \{ !play?line2CloseAn:line2OpenAn \}\}"></view>  
      <view class="title" animation="\{ \{ !play?titleCloseAn:titleOpenAn \}\}">  
        菜单  
      </view>  
    </view>  
  </view>  
  <view class="menu">  
    <view animation="\{ \{ !play?btn4Close:btn4Open \}\}">  
      <text>我的</text>  
    </view>  
    <view animation="\{ \{ !play?btn3Close:btn3Open \}\}">  
      <text>购物</text>  
    </view>  
    <view animation="\{ \{ !play?btn2Close:btn2Open \}\}">  
      <text>个人</text>  
    </view>  
    <view animation="\{ \{ !play?btn1Close:btn1Open \}\}">  
      <text>哈哈</text>  
    </view>  
  </view>  
</view>   
二、WXSS中

.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;  
\}

三js中

Component(\{  
  data: \{  
    play: false  
  \},  
  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 第一个按钮  
      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 btn4Close = wx.createAnimation(\{  
        duration: 700,  
        timingFunction: 'forwards',  
        delay: 0,  
        transformOrigin: '46rpx 50%'  
      \});  
      btn4Close.translateX(0).opacity(0).step();  
      this.setData(\{  
        btn4Close:btn4Close.export()  
      \});  
      //end 第四个按钮  
    \}  
  \}  
\})

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTcyMjkyOA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20210811104047357.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTcyMjkyOA==,size_16,color_FFFFFF,t_70
[20210811104059131.png]: /images/20220829/c533a5f0d39549b1af9a613bd135bcc5.png