小程序导航栏简单动画

最新推荐文章于 2024-09-18 08:57:41 发布

百味苦

最新推荐文章于 2024-09-18 08:57:41 发布

阅读量698

点赞数

分类专栏： js，JQuery

本文链接：https://blog.csdn.net/qq_38026437/article/details/82967431

版权

博客介绍了如何在小程序中为导航栏添加简单的动画效果，通过调整原始样式并实现动态变换，达到提升用户体验的目的。读者可以自行下载代码进行测试。

摘要由CSDN通过智能技术生成

<view class="navbar">
  <view wx:for="{
  {navbar}}" data-idx="{
  {index}}" class="item {
  {currentTab==index ? 'active' : 'active1'}}" wx:key="unique" bindtap="navbarTap">{
  {item}}</view>
</view>

<view hidden="{
  {currentTab!==0}}">
  tab_01
</view>

<view hidden="{
  {currentTab!==1}}">
  tab_02
</view>

<view hidden="{
  {currentTab!==2}}">
  tab_03
</view>

/* 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.activ