2.0 微信小程序实现收缩菜单

GIF.gif

case.wxss

page{
  background-color: #F5F5F5;
}

/* 按钮固定在右下边角
.up_img{
    position: fixed;
    bottom: 30rpx;
    right: 30rpx;
    width: 100rpx;
    height: 100rpx;
} */


/* z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
元素可拥有负的 z-index 属性值。
Z-index 仅能在定位元素上奏效（例如 position:absolute;）！ */

.img-plus-style {
  height: 150rpx;
  width: 150rpx;
  position: absolute;
  bottom: 250rpx;
  right: 100rpx;
  z-index: 100;
}
 
 /* opacity 属性设置元素的不透明级别。
 规定不透明度。从 0.0 （完全透明）到 1.0（完全不透明）。 */
.img-style {
  height: 150rpx;
  width: 150rpx;
  position: absolute;
  bottom: 250rpx;
  right: 100rpx;
  opacity: 0;
}

.container{
  display: flex;
  flex-direction: column;
}

.content_one_line{
  display: flex;
  flex-direction:row;
}

.example-img-style {
  height: 150rpx;
  width: 150rpx;
}


.root{
  margin-top: 30rpx;
  margin-left: 30rpx;
}

case.json

{
  "navigationBarBackgroundColor": "#0099FF"
}

case.json

<view>
  <image wx:if="{{!isManClick}}" src="/images/ic_man_normal.png" class="img-style" animation="{{animMan}}" bindtap="manOnclick"></image>
  <image wx:else src="/images/ic_man_select.png" class="img-style" animation="{{animMan}}" bindtap="manOnclick"></image>

  <image wx:if="{{!isWomanClick}}" src="/images/ic_woman_normal.png" class="img-style" animation="{{animWoman}}" bindtap="womanOnClick"></image>
  <image wx:else src="/images/ic_woman_select.png" class="img-style" animation="{{animWoman}}" bindtap="womanOnClick"></image>

  <image wx:if="{{!isTalkClick}}" src="/images/ic_talk_normal.png" class="img-style" animation="{{animTalk}}" bindtap="talkOnclick"></image>
  <image wx:else src="/images/ic_talk_select.png" class="img-style" animation="{{animTalk}}" bindtap="talkOnclick"></image>

  <image wx:if="{{!isPopping}}" src="/images/ic_add_normal.png" class="img-plus-style" animation="{{animPlus}}" bindtap="plus"></image>
  <image wx:else src="/images/ic_add_select.png" class="img-plus-style" animation="{{animPlus}}" bindtap="plus"></image>

</view>

<view class='root'>
<text>功能图标说明如下：</text>
<view class='content_one_line'>

  <view class='container'>
    <image  src="/images/ic_man_normal.png" class="example-img-style" ></image>
    <text>男神</text>
  </view>

    <view class='container'>
    <image  src="/images/ic_woman_normal.png" class="example-img-style" ></image>
    <text>女神</text>
  </view>

    <view class='container'>
    <image  src="/images/ic_talk_normal.png" class="example-img-style" ></image>
    <text>找话题</text>
  </view>

</view>

</view>

case.json

Page({
  data: {
    isPopping: false,//是否已经弹出
    animPlus: {},//中心加号  旋转动画
    animTalk: {},//话题   位移,透明度
    animWoman: {},//女神   位移,透明度
    animMan: {},//男神    位移,透明度

    isManClick:false,
    isWomanClick:false,
    isTalkClick:false,

    case_example_data:{
      case_title:"",
      case_example_pic_path_1:"",
      case_example_pic_path_2: "",
    }
  },
  //点击弹出
  plus: function () {
    console.log("点击弹出=========")
    console.log("this.data.isPopping=========" + this.data.isPopping)
    if (!this.data.isPopping) {
      //缩回动画
      this.popp();
      this.setData({
        isPopping: true,
        isManClick: false,
        isWomanClick: false,
        isTalkClick: false
      })
    } else if (this.data.isPopping) {
      //弹出动画
      this.takeback();
      this.setData({
        isPopping: false
      })
    }
  },


  manOnclick: function () {
    var that = this;
    console.log("manOnclick")
    this.setData({
      isManClick:true,
      isPopping:false,

      case_example_data: {
        case_title: "男神",
        case_example_pic_path_1: "/images/ic_handsome_man_01.jpg",
        case_example_pic_path_2: "/images/ic_handsome_man_02.jpg",
      }
    })
    //将对象转为string
    var caseExampleData = JSON.stringify(that.data.case_example_data)
    this.takeback();
    wx.navigateTo({
      url: '/pages/case/case_example/case_example?caseExampleData=' + caseExampleData
    })
  },
  womanOnClick: function () {
    var that = this;
    console.log("womanOnclick")
    this.setData({
      isWomanClick: true,
      isPopping: false,

      case_example_data: {
        case_title: "女神",
        case_example_pic_path_1: "/images/ic_beautiful_woman_01.jpg",
        case_example_pic_path_2: "/images/ic_beautiful_woman_02.jpg",
      }
    })
    //将对象转为string
    var caseExampleData = JSON.stringify(that.data.case_example_data)
    this.takeback();
    wx.navigateTo({
      url: '/pages/case/case_example/case_example?caseExampleData=' + caseExampleData
    })
  },
  talkOnclick: function () {
    var that = this;
    console.log("talkClick")
    this.setData({
      isTalkClick: true,
      isPopping: false,

      case_example_data: {
        case_title: "找话题",
        case_example_pic_path_1: "/images/ic_talk_example_01.jpg",
        case_example_pic_path_2: "/images/ic_talk_example_02.jpg",
      }
    })
    //将对象转为string
    var caseExampleData = JSON.stringify(that.data.case_example_data)
    this.takeback();
    wx.navigateTo({
      url: '/pages/case/case_example/case_example?caseExampleData=' + caseExampleData
    })
  },

  //弹出动画
  popp: function () {
    //plus顺时针旋转
    var animationPlus = wx.createAnimation({
      duration: 500,
      timingFunction: 'ease-out'
    })
    var animationTalk = wx.createAnimation({
      duration: 500,
      timingFunction: 'ease-out'
    })
    var animationWoman = wx.createAnimation({
      duration: 500,
      timingFunction: 'ease-out'
    })
    var animationMan = wx.createAnimation({
      duration: 500,
      timingFunction: 'ease-out'
    })
    animationPlus.rotateZ(180).step();

    animationTalk.translate(-100, 100).rotateZ(360).opacity(1).step();
    animationWoman.translate(-140, 0).rotateZ(360).opacity(1).step();
    animationMan.translate(-100, -100).rotateZ(360).opacity(1).step();
   
    this.setData({
      animPlus: animationPlus.export(),
      animTalk: animationTalk.export(),
      animWoman: animationWoman.export(),
      animMan: animationMan.export(),
    })
  },
  //收回动画
  takeback: function () {
    //plus逆时针旋转
    var animationPlus = wx.createAnimation({
      duration: 500,
      timingFunction: 'ease-out'
    })
    var animationTalk = wx.createAnimation({
      duration: 500,
      timingFunction: 'ease-out'
    })
    var animationWoman = wx.createAnimation({
      duration: 500,
      timingFunction: 'ease-out'
    })
    var animationMan = wx.createAnimation({
      duration: 500,
      timingFunction: 'ease-out'
    })
    animationPlus.rotateZ(0).step();
    animationMan.translate(0, 0).rotateZ(0).opacity(0).step();
    animationWoman.translate(0, 0).rotateZ(0).opacity(0).step();
    animationTalk.translate(0, 0).rotateZ(0).opacity(0).step();
    this.setData({
      animPlus: animationPlus.export(),
      animTalk: animationTalk.export(),
      animWoman: animationWoman.export(),
      animMan: animationMan.export(),
    })
  },


  onLoad: function (options) {
    // 生命周期函数--监听页面加载
  },
  onReady: function () {
    // 生命周期函数--监听页面初次渲染完成
  },
  onShow: function () {
    // 生命周期函数--监听页面显示
  },
  onHide: function () {
    // 生命周期函数--监听页面隐藏
  },
  onUnload: function () {
    // 生命周期函数--监听页面卸载
  },
  onPullDownRefresh: function () {
    // 页面相关事件处理函数--监听用户下拉动作
  },
  onReachBottom: function () {
    // 页面上拉触底事件的处理函数
  },
  onShareAppMessage: function () {
    // 用户点击右上角分享
    return {
      title: 'title', // 分享标题
      desc: 'desc', // 分享描述
      path: 'path' // 分享路径
    }
  }
})