微信小程序实现tabbar凹凸圆选中动画效果实例

目录
  • 1.实现效果
  • 2.实现原理
    • 2.1 引入阿里巴巴矢量图标
    • 2.2 css函数var
    • 2.3 ios底部安全距离
    • 2.4 css属性transition
    • 2.5 box-shadow
    • 2.6 border-radius
  • 3.实现步骤
    • 3.1 实现底部tabbar
    • 3.2 tabbar背景凹凸圆角
  • 4.实现代码
  • 参考链接:
  • 总结

1.实现效果

2.实现原理

2.1 引入阿里巴巴矢量图标

可参考文章:微信小程序引入外部icon(阿里巴巴矢量图标)[1]^{[1]}[1]

2.2 css函数var

css的var函数[2]^{[2]}[2]:var() 函数用于插入自定义的属性值,如果一个属性值在多处被使用,该方法就很有用。

语法:

var(custom-property-name, value)
描述
custom-property-name 必需。自定义属性的名称,必需以 -- 开头。
value 可选。备用值,在属性不存在的时候使用。

eg:

page {
  --color: #222;
  background: var(--color);
  --bg: orange;
  --w: 175rpx;
}

2.3 ios底部安全距离

苹果官方推荐:使用env(),constant()来进行底部安全距离适配。

iOS11 新增特性,Webkit 的一个 CSS 函数,用于设定安全区域与边界的距离,有四个预定义的变量: safe-area-inset-left:安全区域距离左边边界的距离 safe-area-inset-right:安全区域距离右边边界的距离 safe-area-inset-top:安全区域距离顶部边界的距离 safe-area-inset-bottom :安全距离底部边界的距离 一般情况下,关注safe-area-inset-bottom即可。

使用前提:

  • 网页需设置viewport-fit=cover,小程序总默认为viewport-fit=cover
  • IOS11.2之前使用constant()函数,IOS11.2之后使用env()
  • env()和constant()需要同时存在,并且constant()在前,顺序不能改变

2.4 css属性transition

CSS3 transition 属性[3]^{[3]}[3]:transition 属性设置元素当过渡效果。注:始终指定transition-duration属性,否则持续时间为0,transition不会有任何效果。

语法:

transition: property duration timing-function delay;
描述
transition-property 指定CSS属性的name,transition效果
transition-duration transition效果需要指定多少秒或毫秒才能完成
transition-timing-function 指定transition效果的转速曲线
transition-delay 定义transition效果开始的时候

2.5 box-shadow

CSS3 box-shadow 属性[4]^{[4]}[4]:可以设置一个或多个下拉阴影的框。 boxShadow 属性把一个或多个下拉阴影添加到框上。该属性是一个用逗号分隔阴影的列表,每个阴影由 2-4 个长度值、一个可选的颜色值和一个可选的 inset 关键字来规定。省略长度的值是 0。

语法:

box-shadow: h-shadow v-shadow blur spread color inset;
说明
h-shadow 必需的。水平阴影的位置。允许负值
v-shadow 必需的。垂直阴影的位置。允许负值
blur 可选。模糊距离
spread 可选。阴影的大小
color 可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表
inset 可选。从外层的阴影(开始时)改变阴影内侧阴影

2.6 border-radius

CSS3 border-radius 属性:[5]^{[5]}[5]border-radius 允许你设置元素的外边框圆角。当使用一个半径时确定一个圆形,当使用两个半径时确定一个椭圆。这个(椭)圆与边框的交集形成圆角效果。

语法

border-radius: 1-4 length|% / 1-4 length|%;

注:每个半径的四个值的顺序是:左上角,右上角,右下角,左下角。如果省略左下角,右上角是相同的。如果省略右下角,左上角是相同的。如果省略右上角,左上角是相同的。

eg:

view{
  margin: 50px auto;
  border-radius: 15rpx 50rpx;
  width: 200rpx;
  height: 100rpx;
  border: 1px solid orange;
}

3.实现步骤

3.1 实现底部tabbar

  • flex横向布局并居中,实现4个tabbar,fixed定位居于底部,并设置ios底部安全距离

  • 设置currIndex参数,表示当前选中tabbar的索引,currIndex==index设置激活样式

  • 为当前选中的tabbar添加选中背景,背景基于整个底部栏设置absolute定位,根据tabbar宽,背景度,页面总宽得出定位left偏移距离,top设置为底部栏高度的-50%

  • left偏移距离的计算:

  • 使用var函数计算:
page {
  --w: 175rpx;//tabbar宽度
  --t: 750rpx;//总宽度
  --c: 120rpx;//选中背景宽度
  /* 注意:env()和constant()需要同时存在,且constant()在前 */
  padding-bottom: calc(constant(safe-area-inset-bottom) +140rpx);
  padding-bottom: calc(env(safe-area-inset-bottom) + 140rpx);
}
-left-pad: calc(var(--t) - (4 * var(--w)));
 left: calc((var(--left-pad) / 2) + (var(--w) / 2) - (var(--c) / 2));
  • topt偏移距离的计算: top设置为底部栏高度的-50%,需要配合ios底部安全距离使用,即:
  top: calc(-50% + constant(safe-area-inset-bottom) / 2);
  top: calc(-50% + env(safe-area-inset-bottom) / 2);
  • 当选中的currIndex变化,tabbar背景设置transform偏移
  transform: translateX(calc(var(--w) * var(--n)));
  //--w:tabbar宽度,--n对应currIndex

3.2 tabbar背景凹凸圆角

  • 伪元素+box-shadow实现凹凸圆角

  • 修改伪元素背景颜色为transparent,设置box-shadow设置与页面整体背景一致

.active-tabbar-box::before,
.active-tabbar-box::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 30rpx;
  height: 30rpx;
  background: transparent;
}
.active-tabbar-box::before {
  left: -33rpx;
  border-radius: 0 30rpx 0 0;
  box-shadow: 0 -15rpx 0 0 var(--color);
}
.active-tabbar-box::after {
  right: -33rpx;
  border-radius: 30rpx 0 0 0;
  box-shadow: 0 -15rpx 0 0 var(--color);
}

4.实现代码

<view class="tabbar-box">
  <block wx:for="{{menu}}" wx:key="list">
    <view class="menu-item {{currIndex==index && 'active'}}" catchtap="tabClick" data-index="{{index}}">
      <view class="iconfont {{item.icon}}"></view>
      <text>{{item.name}}</text>
    </view>
  </block>
  <view class="active-tabbar-box" style="--n:{{currIndex}}"></view>
</view>
Page({
  data: {
    currIndex: 0,
    menu: [{
        name: "三明治",
        icon: "icon-susua-2-53"
      },
      {
        name: "汉堡",
        icon: "icon-susuhanbao"
      },
      {
        name: "冰沙",
        icon: "icon-susubingsha"
      },
      {
        name: "可乐",
        icon: "icon-susukele"
      },
    ]
  },
  tabClick(e) {
    let {
      index
    } = e.currentTarget.dataset;
    this.setData({
      currIndex: index,
    })
  },
})
@import "../utils/icon-font.wxss";
page {
  --color: #222;
  background: var(--color);
  --bg: orange;
  --w: 175rpx;
  --t: 750rpx;
  --c: 120rpx;
  /* 注意:env()和constant()需要同时存在,且constant()在前 */
  padding-bottom: calc(constant(safe-area-inset-bottom) +140rpx);
  padding-bottom: calc(env(safe-area-inset-bottom) + 140rpx);
}
.tabbar-box {
  background: #fff;
  border-radius: 10rpx 10rpx 0 0;
  position: relative;
  height: 120rpx;
  width: var(--t);
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 10;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}
.menu-item {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: var(--w);
  height: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.menu-item .iconfont {
  font-size: 40rpx;
  color: var(--color);
  transition: 0.5s all;
  position: relative;
  z-index: 9;
}
.menu-item text {
  position: absolute;
  font-size: 26rpx;
  font-weight: bold;
  color: #222;
  transition: 0.5s all;
  opacity: 0;
  transform: translateY(50rpx);
}
.menu-item.active .iconfont {
  transform: translateY(-60rpx);
}
.menu-item.active text {
  opacity: 1;
  transform: translateY(22rpx);
}
.active-tabbar-box {
  box-sizing: border-box;
  position: absolute;
  width: var(--c);
  height: var(--c);
  background: var(--bg);
  --left-pad: calc(var(--t) - (4 * var(--w)));
  left: calc((var(--left-pad) / 2) + (var(--w) / 2) - (var(--c) / 2));
  top: calc(-50% + constant(safe-area-inset-bottom) / 2);
  top: calc(-50% + env(safe-area-inset-bottom) / 2);
  border-radius: 50%;
  border: 10rpx solid var(--color);
  transition: 0.5s all;
}
.active-tabbar-box::before,
.active-tabbar-box::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 30rpx;
  height: 30rpx;
  background: transparent;
}
.active-tabbar-box::before {
  left: -33rpx;
  border-radius: 0 30rpx 0 0;
  box-shadow: 0 -15rpx 0 0 var(--color);
}
.active-tabbar-box::after {
  right: -33rpx;
  border-radius: 30rpx 0 0 0;
  box-shadow: 0 -15rpx 0 0 var(--color);
}
.active-tabbar-box {
  transform: translateX(calc(var(--w) * var(--n)));
}

参考链接:

[1].微信小程序引入外部icon(阿里巴巴矢量图标)

[2].CSS的var函数

[3].CSS3 transition 属性

[4].CSS3 box-shadow 属性

[5].CSS3 border-radius 属性

总结

到此这篇关于微信小程序实现tabbar凹凸圆选中动画效果的文章就介绍到这了,更多相关小程序tabbar凹凸圆选中动画内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • 微信小程序tabBar自定义弹窗遮挡不住解决技巧

    目录 背景 方法一:自定义tabbar 方法二:套用原生提供的tabbar自定义功能,嵌套自己的tabbar组件 总结 成果 背景 最近开发微信小程序发现一个问题,就是微信小程序官方自带的tabbar层级很高,自定义modal盖不住tabbar的问题:翻阅官方的社区,很多同学说 设置z-index:99999:可以解决这个问题,我实践下来是有问题的:ios是解决不了问题:经过反复实践有两种方法可以解决问题: 方法一:自定义tabbar 这个方法就是完全放弃微信官方的tabbar:自己用SPA的方

  • 微信小程序全局配置之tabBar实战案例

    目录 全局配置 - tabBar 1. 什么是 tabBar 2. tabBar 的 6 个组成部分 3. tabBar 节点的配置项 4. 每个 tab 项的配置选项 全局配置 - 案例:配置 tabBar 1. 需求描述 2. 实现步骤 3. 步骤1 - 拷贝图标资源 4.步骤2 - 新建 3 个对应的 tab 页面 5. 步骤3 - 配置 tabBar 选项 6. 完整的配置代码 总结 全局配置 - tabBar 1. 什么是 tabBar tabBar 是移动端应用常见的页面效果, 用于

  • uniapp微信小程序底部动态tabBar的解决方案(自定义tabBar导航)

    目录 需求 实现原理 实现 总结 需求 分包中如果有6个页面A B C D E F,这6个页面可以作为tabbar页面进行展示,具体配置通过后台接口返回(页面数量限制依然存在 2 - 5),比如后台配置A B C D E这个5个页面为tabbar页面,那么A B C D E将作为tab页展示,跳转方式也是tab方式跳转,跳转到F页面为普通navigate跳转.这将解决 多商家底部tab配置问题,可以让商家自己配置小程序tab页的展示模式. 实现原理 1.自定义底部导航,数据通过接口获取 2.将需

  • 微信小程序如何根据不同用户切换不同TabBar(简单易懂!)

    目录 现有需求: 1全局.app.json 2.自定义custom-tab-bar 结果展示 总结 现有需求: 小程序用户有三种身份(公众.运维人员.领导),根据不同用户身份显示不同的tabbar 众所周知微信小程序全局文件app.json里面的"tabBar"里面的list只能放置2-5个,要想实现3个tabbar,必须得复用tabbar,三种身份都需要个人中心,剩下的是长列表(两个),表单,图表 刚好是5个,废话少说,上代码 代码有点长,建议仔细看一下 1全局.app.json t

  • 微信小程序自定义渐变的tabbar导航栏功能

    做为自己的一个小笔记,以免后面再用到 1,在需要自定义的界面的json文件中加入下面代码 "navigationStyle": "custom" ,隐藏系统导航栏 { "navigationBarTitleText": "", "navigationBarBackgroundColor": "#000", "navigationBarTextStyle": "

  • 微信小程序tabBar组件切换与下拉刷新实现详解

    目录 前言 一.tabBar切换 1.为什么使用tabBar 2.注意事项 3.如何使用 二.下拉刷新 前言 基本上,所有的小程序,页面底部都有个tab,来实现页面的切换,效果如下 一.tabBar切换 1.为什么使用tabBar 在 pages.json 中提供 tabBar 配置,不仅仅是为了方便快速开发导航,更重要的是在App和小程序端提升性能.在这两个平台,底层原生引擎在启动时无需等待js引擎初始化,即可直接读取 pages.json 中配置的 tabBar 信息,渲染原生tab. 2.

  • 微信小程序实现tabbar凹凸圆选中动画效果实例

    目录 1.实现效果 2.实现原理 2.1 引入阿里巴巴矢量图标 2.2 css函数var 2.3 ios底部安全距离 2.4 css属性transition 2.5 box-shadow 2.6 border-radius 3.实现步骤 3.1 实现底部tabbar 3.2 tabbar背景凹凸圆角 4.实现代码 参考链接: 总结 1.实现效果 2.实现原理 2.1 引入阿里巴巴矢量图标 可参考文章:微信小程序引入外部icon(阿里巴巴矢量图标)[1]^{[1]}[1] 2.2 css函数var

  • 微信小程序实现录音时的麦克风动画效果实例

    前言 这个简单的麦克风demo的创意是来源于"包你说"中的录音效果,实现的方式其实也并不难,但对于小程序中的简易动画的使用的确很实用. 效果 先来看个demo,gif帧数比较低,实际效果和真机测试的流畅性还是很OK的 思路 通过setTimeout配合this.sedData来改变image中的src路径来生成动画.动画的播放以及隐藏则通过wx:if绑定一个自定义的参数来控制.下面就直接上代码. 代码 html <view class='animation-talk'> &

  • 微信小程序实现默认第一个选中变色效果

    效果图: 这里默认第一个选中 点击每个不会改变样式 根据index来实现 wxml: 页面class有三目运算 <view class='box'> <view class='box-container' wx:for="{{list}}" wx:key="list"> <view class="{{index==idx?'_left':'left'}}" bindtap='goIndex' data-index=&

  • 微信小程序实现渐入渐出动画效果

    前言 在做小程序列表展示的时候,接到了一个需求.需要在列表展示的时候加上动画效果.设计视频效果如下图: 需要在进入列表页的时候,依次展示每一条卡片,在展示完成后需要隐藏掉当天之前的卡片. 实现思路 实现该动画效果,首先需要给每个卡片添加一个css动画.因为每个卡片的显示是有时间间隔的,以及考虑到展示完成后的隐藏效果,所以动画效果需要用js动态去添加.在看了微信开发文档后,发现微信小程序提供了Animation的一个动画对象,具体看了里面的参数后发现,是可以实现需求上的效果的.具体使用如下api:

  • 微信小程序自定义tabBar的踩坑实践记录

    微信官方文档对自定义 tabBar 的阐述较为潦草,在开发自定义 tabBar 过程中我踩了很多坑,因此在此处做个总结. 我使用 Vant Weapp作为 UI 组件库,下面以此组件库为例. 定义 tabBar 创建自定义 tabBar 文件 创建一个与 /pages 的同级目录,命名为  /custom-tab-bar,注意目录层级与目录命名问题,不可用其他名称命名. 在 /custom-tab-bar 下创建四个文件: index.js index.json index.wxml index

  • 微信小程序自定义tabbar组件

    本文实例为大家分享了微信小程序自定义tabbar组件的具体代码,供大家参考,具体内容如下 由于项目需求,必须自己写组件: 第一步:在App.json中配置tabBar,自定也组件也必须配置,"custom": true,list里配置所有的tabbar页面. "tabBar": { "custom": true, "color": "red", "selectedColor": &quo

  • 微信小程序自定义tabBar组件开发详解

    本文实例为大家分享了微信小程序自定义tabBar组件的具体代码,供大家参考,具体内容如下 以下代码保存在github地址 先看一看目录 template文件夹里存放tabbar模板. template/template.wxml <template name="tabBar"> <view class="tabBar"> <block wx:for="{{tabBar}}" wx:for-item="ite

  • 微信小程序自定义tabbar custom-tab-bar 6s出不来解决方案(cover-view不兼容)

    微信小程序自定义tabbar custom-tab-bar 6s出不来解决方案,cover-view不兼容,具体内容如下所示: 1.从微信小程序的官网扣下来的demo,实际测试中,发现6s ios10 系统不兼容,里面的内容出不来 <cover-view class="tab-bar"> <cover-view class="tab-bar-border"></cover-view> <cover-view wx:for=&

  • 微信小程序底部tabBar遮挡内容的简单处理方法

    微信小程序配置tabBar之后会遮挡重要内容,而且不同机型如iPhoneX下面可能有一块空白如下图,比较坑的是页面最底部空白也会显示页面,因此需要获取被遮挡的高度 可以看出iPhoneX下面会多出一块空白也会增加tabBar的遮挡内容,可以通过wx.getSystemInfoSync()获取机型的各种信息. 其中screenHeight是屏幕高度,safeArea的bottom属性会自动计算安全区域也就是去除tabBar下面的空白区域后有用区域的纵坐标. 如此就可以简单计算出tabBar的高度:

  • 关于微信小程序自定义tabbar问题详析

    目录 1.首先按照官方组件在app.json中定义tabbar 2.在项目根目录创建自定义tabbar组件 3.组件内容如下: 4.在pages下的各个页面组件引入tabbar 总结 1.首先按照官方组件在app.json中定义tabbar "tabBar": { "custom": true, "backgroundColor": "#FFFFFF", "borderStyle": "white

随机推荐