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

布满荆棘的人生 2022-09-04 05:46 317阅读 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-组件

  1. Component({
  2.   data: {
  3.     play: false,
  4.     type:''
  5.   },
  6.   properties: {},
  7.   methods: {
  8.     changePlay(){
  9.       let flag = !this.data.play;
  10.       this.setData({
  11.         play:flag
  12.       });
  13.       //start title
  14.       let titleOpenAn = wx.createAnimation({
  15.         duration: 300,
  16.         timingFunction: 'forwards',
  17.         delay: 0,
  18.         transformOrigin: '50% 50% 0'
  19.       });
  20.       titleOpenAn.opacity(0).step();
  21.       this.setData({
  22.         titleOpenAn:titleOpenAn.export()
  23.       });
  24.       let titleCloseAn = wx.createAnimation({
  25.         duration: 300,
  26.         timingFunction: 'forwards',
  27.         delay: 0,
  28.         transformOrigin: '50% 50% 0'
  29.       });
  30.       titleCloseAn.opacity(1).step();
  31.       this.setData({
  32.         titleCloseAn:titleCloseAn.export()
  33.       });
  34.       //end title
  35.       // start 第一条line
  36.       let line1OpenAn = wx.createAnimation({
  37.         duration: 300,
  38.         timingFunction: 'forwards',
  39.         delay: 0,
  40.         transformOrigin: '50% 50% 0'
  41.       });
  42.       line1OpenAn.translateY(12).rotate(45).scale(1.4, 1).step();
  43.       this.setData({
  44.         line1OpenAn:line1OpenAn.export()
  45.       });
  46.       let line1CloseAn = wx.createAnimation({
  47.         duration: 300,
  48.         timingFunction: 'forwards',
  49.         delay: 0,
  50.         transformOrigin: '12rpx 50%'
  51.       });
  52.       line1CloseAn.translateY(0).rotate(0).scale(1, 1).step();
  53.       this.setData({
  54.         line1CloseAn:line1CloseAn.export()
  55.       });
  56.       //end 第一条line
  58.       // start 第二条line
  59.       let line2OpenAn = wx.createAnimation({
  60.         duration: 300,
  61.         timingFunction: 'forwards',
  62.         delay: 0,
  63.         transformOrigin: '100% 0'
  64.       });
  65.       line2OpenAn.translateY(-6.5).translateX(-1).rotate(-45).scale(1.4, 1).step();
  66.       this.setData({
  67.         line2OpenAn:line2OpenAn.export()
  68.       });
  70.       let line2CloseAn = wx.createAnimation({
  71.         duration: 300,
  72.         timingFunction: 'forwards',
  73.         delay: 0,
  74.         transformOrigin: '46rpx 50%'
  75.       });
  76.       line2CloseAn.translateY(0).rotate(0).scale(1, 1).step();
  77.       this.setData({
  78.         line2CloseAn:line2CloseAn.export()
  79.       });
  80.       //end 第二条line
  81. ///start 第0个按钮
  82. let btn0Open = wx.createAnimation({
  83.   duration: 300,
  84.   timingFunction: 'forwards',
  85.   delay: 0,
  86.   transformOrigin: '100% 0'
  87. });
  88. btn0Open.translateX(-300).opacity(1).step();
  89. this.setData({
  90.   btn0Open:btn0Open.export()
  91. });
  93. let btn0Close = wx.createAnimation({
  94.   duration: 300,
  95.   timingFunction: 'forwards',
  96.   delay: 0,
  97.   transformOrigin: '46rpx 50%'
  98. });
  99. btn0Close.translateX(0).opacity(0).step();
  100. this.setData({
  101.   btn0Close:btn0Close.export()
  102. });
  103. /end 第0个按钮
  104.       ///start 第一个按钮
  105.       let btn1Open = wx.createAnimation({
  106.         duration: 300,
  107.         timingFunction: 'forwards',
  108.         delay: 0,
  109.         transformOrigin: '100% 0'
  110.       });
  111.       btn1Open.translateX(-60).opacity(1).step();
  112.       this.setData({
  113.         btn1Open:btn1Open.export()
  114.       });
  116.       let btn1Close = wx.createAnimation({
  117.         duration: 300,
  118.         timingFunction: 'forwards',
  119.         delay: 0,
  120.         transformOrigin: '46rpx 50%'
  121.       });
  122.       btn1Close.translateX(0).opacity(0).step();
  123.       this.setData({
  124.         btn1Close:btn1Close.export()
  125.       });
  126.       /end 第一个按钮
  127.       //start 第二个按钮
  128.       let btn2Open = wx.createAnimation({
  129.         duration: 500,
  130.         timingFunction: 'forwards',
  131.         delay: 0,
  132.         transformOrigin: '100% 0'
  133.       });
  134.       btn2Open.translateX(-120).opacity(1).step();
  135.       this.setData({
  136.         btn2Open:btn2Open.export()
  137.       });
  139.       let btn2Close = wx.createAnimation({
  140.         duration: 500,
  141.         timingFunction: 'forwards',
  142.         delay: 0,
  143.         transformOrigin: '46rpx 50%'
  144.       });
  145.       btn2Close.translateX(0).opacity(0).step();
  146.       this.setData({
  147.         btn2Close:btn2Close.export()
  148.       });
  149.       //end 第二个按钮
  150.       //start 第三个按钮
  151.       let btn3Open = wx.createAnimation({
  152.         duration: 700,
  153.         timingFunction: 'forwards',
  154.         delay: 0,
  155.         transformOrigin: '100% 0'
  156.       });
  157.       btn3Open.translateX(-180).opacity(1).step();
  158.       this.setData({
  159.         btn3Open:btn3Open.export()
  160.       });
  162.       let btn3Close = wx.createAnimation({
  163.         duration: 700,
  164.         timingFunction: 'forwards',
  165.         delay: 0,
  166.         transformOrigin: '46rpx 50%'
  167.       });
  168.       btn3Close.translateX(0).opacity(0).step();
  169.       this.setData({
  170.         btn3Close:btn3Close.export()
  171.       });
  172.       //end 第三个按钮
  173.       //start 第四个按钮
  174.       let btn4Open = wx.createAnimation({
  175.         duration: 700,
  176.         timingFunction: 'forwards',
  177.         delay: 0,
  178.         transformOrigin: '100% 0'
  179.       });
  180.       btn4Open.translateX(-240).opacity(1).step();
  181.       this.setData({
  182.         btn4Open:btn4Open.export()
  183.       });
  185.       let btn4Close = wx.createAnimation({
  186.         duration: 700,
  187.         timingFunction: 'forwards',
  188.         delay: 0,
  189.         transformOrigin: '46rpx 50%'
  190.       });
  191.       btn4Close.translateX(0).opacity(0).step();
  192.       this.setData({
  193.         btn4Close:btn4Close.export()
  194.       });
  195.       //end 第四个按钮
  196.     },
  197.     touch(e){
  198.       debugger
  199. console.log('点击的按钮....'+JSON.stringify(e.currentTarget.dataset.index))
  200. this.setData({type:e.currentTarget.dataset.index})
  201. console.log('>>>>>>>>>type>>>>>'+this.data.type)
  202.       //return e.currentTarget.dataset.index
  203.     }
  204.   }
  205. })

2，wxml组件

  1. <view class="menu-box">
  2.   <view class="navbar {
  3.    { play?'active':'' }}">
  4.     <view class="btn" bindtap="changePlay">
  5.       <view class="line" animation="{
  6.    { !play?line1CloseAn:line1OpenAn }}"></view>
  7.       <view class="line" animation="{
  8.    { !play?line2CloseAn:line2OpenAn }}"></view>
  9.       <view class="title" animation="{
  10.    { !play?titleCloseAn:titleOpenAn }}">
  11.         功能区
  12.       </view>
  13.     </view>
  14.   </view>
  15.   <view class="menu"  >
  16.     <view animation="{
  17.    { !play?btn4Close:btn4Open }}" bindtap='touch' data-index='fendan'>
  18.       <text>分单</text>
  19.     </view>
  20.     <view animation="{
  21.    { !play?btn3Close:btn3Open }}" bindtap='touch' data-index='shendan'>
  22.       <text>审单</text>
  23.     </view>
  24.     <view animation="{
  25.    { !play?btn2Close:btn2Open }}" bindtap='touch'  data-index='diku'>
  26.       <text>抵库</text>
  27.     </view>
  28.     <view animation="{
  29.    { !play?btn1Close:btn1Open }}" bindtap='touch' data-index='liku'>
  30.       <text>离库</text>
  31.     </view>
  32.     <view animation="{
  33.    { !play?btn0Close:btn0Open }}" bindtap='touch' data-index='detail'>
  34.       <text>详情</text>
  35.     </view>
  36.   </view>
  37. </view>

3 css-组件

  1. .menu-box {
  2.   position: fixed;
  3.   bottom: 40vw;
  4.   right: 30rpx;
  5.   width: 100rpx;
  6.   padding-bottom: 100rpx;
  7. }
  8. .menu-box .navbar {
  9.   z-index: 1000;
  10.   position: absolute;
  11.   bottom: 0rpx;
  12.   width: 110rpx;
  13.   height: 110rpx;
  14.   text-align: center;
  15.   /* background-color:#009DA0;rgba(0, 0, 0, 0.6); */
  16.     background-color:#009DA0;
  17.   color: white;
  18.   font-size: 0rpx;
  19.   border-radius: 60%;
  20. }
  21. .menu-box .navbar>.btn {
  22.   padding: 25rpx;
  23.   width: 100%;
  24.   height: 100%;
  25.   box-sizing: border-box;
  26. }
  27. .menu-box .navbar>.btn>.line {
  28.   height: 6rpx;
  29.   background-color: white;
  30.   margin: 0px 2rpx 6rpx 2rpx;
  31.   border-radius: 6rpx;
  32. }
  33. .menu-box .navbar>.btn>.title {
  34.   font-size: 20rpx;
  35. }
  36. .menu-box .active {
  37.   background-color: pink;
  38. }
  39. .menu-box .menu{
  40.   /* width: 100rpx; */
  41.   height: 100rpx;
  42.   /* overflow: hidden; */
  43.   position: relative;
  44.   /* margin: 0 auto; */
  45.   bottom: -100rpx;
  46. }
  47. .menu-box .menu>view {
  48.   z-index: 100;
  49.   background-color:#009DA0;
  50.   margin-bottom: 20rpx;
  51.   border-radius: 50%;
  52.   height: 100rpx;
  53.   line-height: 100rpx;
  54.   position: absolute;
  55.   width: 100rpx;
  56.   height: 100rpx;
  57.   margin-left: auto;
  58.   margin-right: auto;
  59.   opacity: 0;
  60.   font-size: 0rpx;
  61.   color: red;
  62. }
  63. .menu-box .menu>view text{
  64.   display: inline-block;
  65.   position: absolute;
  66.   text-align: center;
  67.   width:100%;
  68.   height: 100%;
  69.   color: white;
  70.   z-index: 10000;
  71.   font-size: 25rpx;
  72. }

1.js-页面

  1. // pages/test/function/index.js
  2. Page({
  4.   /**
  5.    * 页面的初始数据
  6.    */
  7.   data: {
  9.   },
  11.   /**
  12.    * 生命周期函数--监听页面加载
  13.    */
  14.   onLoad: function (options) {
  15.       this.setData({
  16.         keyboard: this.selectComponent('#keyboard')
  17.       })
  18.   },
  19. //
  20. gettouch:function(e){
  21.   var aa=this.data.keyboard.data.type;
  22.   debugger
  23.   console.log(aa)
  25. },
  26.   /**
  27.    * 生命周期函数--监听页面初次渲染完成
  28.    */
  29.   onReady: function () {
  31.   },
  33.   /**
  34.    * 生命周期函数--监听页面显示
  35.    */
  36.   onShow: function () {
  38.   },
  40.   /**
  41.    * 生命周期函数--监听页面隐藏
  42.    */
  43.   onHide: function () {
  45.   },
  47.   /**
  48.    * 生命周期函数--监听页面卸载
  49.    */
  50.   onUnload: function () {
  52.   },
  54.   /**
  55.    * 页面相关事件处理函数--监听用户下拉动作
  56.    */
  57.   onPullDownRefresh: function () {
  59.   },
  61.   /**
  62.    * 页面上拉触底事件的处理函数
  63.    */
  64.   onReachBottom: function () {
  66.   },
  68.   /**
  69.    * 用户点击右上角分享
  70.    */
  71.   onShareAppMessage: function () {
  73.   }
  74. })

2 wxml-页面

  1. <functionView bindtap="gettouch" id="keyboard"></functionView>
  2. <view wx:for='{
  3.    {1000}}'>
  4.   <view><text>123111111111111111111111111111111111111111111111111111111111111111</text></view>
  5. </view>

3.css-页面

  1. .menu-box {
  2.   position: fixed;
  3.   bottom: 40vw;
  4.   right: 30rpx;
  5.   width: 100rpx;
  6.   padding-bottom: 100rpx;
  7. }
  8. .menu-box .navbar {
  9.   z-index: 1000;
  10.   position: absolute;
  11.   bottom: 0rpx;
  12.   width: 100rpx;
  13.   height: 100rpx;
  14.   text-align: center;
  15.   background-color: rgba(0, 0, 0, 0.6);
  16.   color: white;
  17.   font-size: 0rpx;
  18.   border-radius: 50%;
  19. }
  20. .menu-box .navbar>.btn {
  21.   padding: 25rpx;
  22.   width: 100%;
  23.   height: 100%;
  24.   box-sizing: border-box;
  25. }
  26. .menu-box .navbar>.btn>.line {
  27.   height: 6rpx;
  28.   background-color: white;
  29.   margin: 0px 2rpx 6rpx 2rpx;
  30.   border-radius: 6rpx;
  31. }
  32. .menu-box .navbar>.btn>.title {
  33.   font-size: 20rpx;
  34. }
  35. .menu-box .active {
  36.   background-color: pink;
  37. }
  38. .menu-box .menu{
  39.   /* width: 100rpx; */
  40.   height: 100rpx;
  41.   /* overflow: hidden; */
  42.   position: relative;
  43.   /* margin: 0 auto; */
  44.   bottom: -100rpx;
  45. }
  46. .menu-box .menu>view {
  47.   z-index: 100;
  48.   background-color: rgba(0, 0, 0, 0.6);
  49.   margin-bottom: 20rpx;
  50.   border-radius: 50%;
  51.   height: 100rpx;
  52.   line-height: 100rpx;
  53.   position: absolute;
  54.   width: 100rpx;
  55.   height: 100rpx;
  56.   margin-left: auto;
  57.   margin-right: auto;
  58.   opacity: 0;
  59.   font-size: 0rpx;
  60.   color: red;
  61. }
  62. .menu-box .menu>view text{
  63.   display: inline-block;
  64.   position: absolute;
  65.   text-align: center;
  66.   width:100%;
  67.   height: 100%;
  68.   color: white;
  69.   z-index: 10000;
  70.   font-size: 25rpx;
  71. }

发表评论

表情：
评论列表 （有 0 条评论，317人围观）

还没有评论，来说两句吧...

相关阅读

    相关 微信小程序路由传参

    微信小程序路由传参 在微信小程序中，可以通过路由传参将数据传递给目标页面。以下是一种常见的方式： 在源页面中，使用 `wx.navigateTo` 或 `wx.redi

    男娘i男娘i/ 0 赞/ 55 阅读

    相关 微信小程序input框传参

    在微信小程序中原生input组件无法直接传参，但可以通过自定义属性的方式达成效果 <!-- 自定义属性的命名格式为“data-自定义名字” --> <inpu

    墨蓝墨蓝/ 0 赞/ 520 阅读