小程序导航栏简单动画

忘是亡心i 2022-05-08 01:08 216阅读 0赞

/* pages/dhl/dhl.wxss */
    
    page {
      display: flex;
      flex-direction: column;
      height: 100%;
    }
    
    .navbar {
      flex: none;
      display: flex;
      background: #fff;
    }
    
    .navbar .item {
      position: relative;
      flex: auto;
      text-align: center;
      line-height: 80rpx;
    }
    
    .navbar .item.active {
      color: red;
    }
    
    .navbar .item.active:after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      border-bottom: 4rpx solid red;
      transition: 0.2s all linear;
    }
    
    .navbar .item.active1:after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 50%;
      width: 0;
      border-bottom: 4rpx solid red;
      transition: 0.2s all linear;
    }

// pages/dhl/dhl.js
    Page({
    
      /**
       * 页面的初始数据
       */
      data: {
        navbar: ['首页', '个人中心', '订单'],
    
        currentTab: 0
      },
    
      /**
       * 生命周期函数--监听页面加载
       */
      navbarTap: function(e) {
        //console.log(e.currentTarget.dataset.idx);
        this.setData({
    
          currentTab: e.currentTarget.dataset.idx
    
        })
    
      },
      onLoad: function(options) {
    
      },
    
      /**
       * 生命周期函数--监听页面初次渲染完成
       */
      onReady: function() {
    
      },
    
      /**
       * 生命周期函数--监听页面显示
       */
      onShow: function() {
    
      },
    
      /**
       * 生命周期函数--监听页面隐藏
       */
      onHide: function() {
    
      },
    
      /**
       * 生命周期函数--监听页面卸载
       */
      onUnload: function() {
    
      },
    
      /**
       * 页面相关事件处理函数--监听用户下拉动作
       */
      onPullDownRefresh: function() {
    
      },
    
      /**
       * 页面上拉触底事件的处理函数
       */
      onReachBottom: function() {
    
      },
    
      /**
       * 用户点击右上角分享
       */
      onShareAppMessage: function() {
    
      }
    })

原始样式我随便在网上找的，然后加上了动画效果，勉强能看 ，想看效果可以自己拉过去试下