脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → 微信小程序选项卡效果

微信小程序实现顶部普通选项卡效果(非swiper)

 更新时间：2020年06月19日 15:34:47   作者：纸上得来终觉浅-绝知此事要躬行  
这篇文章主要为大家详细介绍了微信小程序实现顶部普通选项卡效果，非swiper，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

背景：前段时间写了一个抢红包小程序，里面涉及到了顶部选项卡，把它抽了出来。

效果图：

下面直接上代码:

wxml:

<view class="navbar"> 
 <text wx:for="{{navbar}}" data-index="{{index}}" 
 class="item {{currentIndex==index?'active':''}}" 
 bindtap="navbarTab" wx:key="unique">{{item}}</text> 
 </view> 
 <view hidden="{{currentIndex!==0}}"> 
 
 </view> 
 <view hidden="{{currentIndex!==1}}"> 
 
 </view>

wxss:

.navbar{ 
 display: flex; 
 width: 100%; 
 flex-direction: row; 
 line-height: 80rpx; 
 position: fixed; 
 top: 0; 
} 
.navbar .item{ 
 flex: auto; 
 font-size: 30rpx; 
 text-align: center; 
 background: #fff; 
 font-weight: bold; 
} 
.navbar .item.active{ 
 color: #36DB2C; 
 position: relative; 
} 
.navbar .item.active::after{ 
 content: ""; 
 display: block; 
 position: absolute; 
 height: 4rpx; 
 bottom: 0; 
 left: 0; 
 right: 0; 
 background: #36DB2C; 
}

js:

data: { 
 navbar: ["我发出的", "我收到的"], 
 currentIndex: 0,//tabbar索引 
 }, 
 navbarTab: function (e) { 
 this.setData({ 
 currentIndex: e.currentTarget.dataset.index 
 }); 
 },

以上是实现过程基本代码，省去了中间内容的代码。顶部个数是循环出来的，可以根据自己的实际需求设置。

附：swiper顶部选项卡链接

为大家推荐现在关注度比较高的微信小程序教程一篇：《微信小程序开发教程》小编为大家精心整理的，希望喜欢。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • JavaScript中自带的 reduce()方法使用示例详解

    JavaScript中自带的 reduce()方法使用示例详解

    下文小编给大家带来了js中自带的reduce()方法使用示例详解，非常不错，具有参考借鉴价值，感兴趣的朋友一起学习吧
    2016-08-08
  • ECMAScript 的 6 种简单数据类型

    ECMAScript 的 6 种简单数据类型

    这篇文章主要介绍了ECMAScript的 6 种简单数据类型，ECMAScript的数据类型很灵活，一种数据类型可以当作多种数据类型来使用，具体使用详情文章详细介绍需要的小伙伴可以参考一下
    2022-06-06
  • JS中的事件委托实例浅析

    JS中的事件委托实例浅析

    这篇文章主要介绍了JS中的事件委托,结合实例形式简单分析了javascript事件委托的概念、功能、使用方法及相关注意事项,需要的朋友可以参考下
    2018-03-03
  • 用js取得鼠标所在位置的对象

    用js取得鼠标所在位置的对象

    用js取得鼠标所在位置的对象...
    2007-01-01
  • JavaScript删除数组元素的方法指南

    JavaScript删除数组元素的方法指南

    作为一名前端开发工程师，我们经常需要在 JavaScript 中操作数组，其中比较常见的操作便是对数组进行元素的添加、删除和修改。在这篇文章中，我会详细介绍JS中所有删除数组元素的方法，希望对大家有所帮助
    2023-05-05
  • 微信小程序里长按识别二维码的实现过程

    微信小程序里长按识别二维码的实现过程

    这篇文章主要给大家介绍了关于微信小程序里长按识别二维码的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2021-03-03
  • js窗口震动小程序分享

    js窗口震动小程序分享

    这篇文章主要为大家分享了js窗口震动小程序,可设置抖动的频率，范围，和次数，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-11-11
  • 基于JavaScript实现评论框展开和隐藏功能

    基于JavaScript实现评论框展开和隐藏功能

    本文通过实例代码给大家介绍了基于JavaScript实现评论框展开和隐藏功能，感兴趣的朋友参考下吧
    2017-08-08
  • js变换显示图片的实例

    js变换显示图片的实例

    题意：在界面上有一张图片，下面有四个单选按钮，点击每一个按钮图片变换成不同的图片
    2013-04-04
  • vscode中使用npm安装babel的方法

    vscode中使用npm安装babel的方法

    bable是一个广泛使用的ES6转换器，可以将ES6代码转为ES5代码，本文给大家介绍VScode里面怎么使用bable，使用npm安装babel的方法，需要的朋友参考下吧
    2021-08-08

最新评论