微信小程序实现顶部普通选项卡效果(非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顶部选项卡链接

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

(0)

相关推荐

  • 微信小程序之选项卡的实现方法

     微信小程序之选项卡的实现方法 前言: 从事前端的同学们一定不会对选项卡陌生,不管是自己原生写的,还是各个UI框架里带的,我想大家都使用过很多选项卡,对选项卡的原理也足够清楚了,下面我们来在微信小程序里实现选项卡的功能. 微信小程序里没有自带选项卡组件,但是却带有swiper组件,所以,我们便利用swiper来实现选项卡的功能. 先看效果图: 实现代码: 页面代码: <view class="swiper-tab"> <view class="swiper-

  • 微信小程序实战之顶部导航栏(选项卡)(1)

    本文实例为大家分享了微信小程序顶部导航栏的具体代码,供大家参考,具体内容如下 需求:顶部导航栏 效果图: wxml: <!--导航条--> <view class="navbar"> <text wx:for="{{navbar}}" data-idx="{{index}}" class="item {{currentTab==index ? 'active' : ''}}" wx:key=&qu

  • 微信小程序实现顶部选项卡(swiper)

    微信小程序顶部选项卡在开发中是非常常用的,下面用一点时间实现了一下. 效果图: 下面直接上代码: wxml: <!--pages/index/index.wxml--> <view class="swiper-tab"> <view class="tab-item {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav"&

  • 微信小程序开发之选项卡(窗口底部TabBar)页面切换

    微信小程序开发中窗口底部tab栏切换页面很简单很方便. 代码: 1.app.json //app.json { "pages":[ "pages/index/index", "pages/logs/logs" ], "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": &qu

  • 微信小程序开发之实现选项卡(窗口顶部TabBar)页面切换

    微信小程序开发中选项卡.在Android中选项卡一般用fragment,到了小程序这里瞬间懵逼了. 总算做出来了.分享出来看看. 先看效果: 再上代码: 1.index.wxml <!--index.wxml--> <view class="swiper-tab"> <view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0"

  • 微信小程序 选项卡的简单实例

    微信小程序 选项卡的简单实例 看下效果 代码: home.wxml <!--pages/home/home.wxml--> <view class="swiper-tab"> <view class="swiper-tab-item {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">热门</view&g

  • 微信小程序 实现tabs选项卡效果实例代码

    最近微信应用号是炒的如火如荼,热门满满,但是也可以发现搜索关键词出来,各类网站出现的还都是微信的官方文档解释.正好赶上这个热潮,这几天先把小程序技术文档看了个遍,就直接着手写案例了.很多组件微信内部已经封装完了,正好发现没有tab选项卡效果,这两天正好研究了下.思路如下: 1.首先点击导航的时候需要两个变量,一个存储当前点击样式类,一个是其它导航默认的样式类 2.选项卡内容列表同样也需要两个变量,一个存储当前显示块,一个存储的是其它隐藏的默认块 3.使用三目运算通过点击获取导航索引,根据索引判断

  • 微信小程序 tabs选项卡效果的实现

    微信小程序 tabs选项卡效果 前言: 最近微信应用号是炒的如火如荼,热门满满,但是也可以发现搜索关键词出来,各类网站出现的还都是微信的官方文档解释.正好赶上这个热潮,这几天先把小程序技术文档看了个遍,就直接着手写案例了.很多组件微信内部已经封装完了,正好发现没有tab选项卡效果,这两天正好研究了下.思路如下: 1.首先点击导航的时候需要两个变量,一个存储当前点击样式类,一个是其它导航默认的样式类 2.选项卡内容列表同样也需要两个变量,一个存储当前显示块,一个存储的是其它隐藏的默认块 3.使用三

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

    背景:前段时间写了一个抢红包小程序,里面涉及到了顶部选项卡,把它抽了出来. 效果图: 下面直接上代码: wxml: <view class="navbar"> <text wx:for="{{navbar}}" data-index="{{index}}" class="item {{currentIndex==index?'active':''}}" bindtap="navbarTab"

  • 微信小程序实现导航栏选项卡效果

    本文实例为大家分享了微信小程序实现MUI顶部选项卡的具体代码,供大家参考,具体内容如下 DEMO下载 效果图 WXML <import src="../../template/list.wxml"/> <view class="tui-tabbar-content"> <view class="tui-tabbar-group"> <text data-id="0" bindtap=&

  • 微信小程序开发实现的选项卡(窗口顶部/底部TabBar)页面切换功能图文详解

    本文实例讲述了微信小程序开发实现的选项卡(窗口顶部/底部TabBar)页面切换功能.分享给大家供大家参考,具体如下: 微信小程序开发中选项卡.在android中选项卡一般用fragment,到了小程序这里瞬间懵逼了. 总算做出来了.分享出来看看. 先看效果: 再上代码: 1.index.wxml <!--index.wxml--> <view class="swiper-tab"> <view class="swiper-tab-list {{c

  • 微信小程序实现顶部导航特效

    本文实例为大家分享了微信小程序实现顶部导航的具体代码,供大家参考,具体内容如下 之前Android开发时,顶部导航用到viewPage,微信小程序里想要达到同样的效果,可用swiper来实现,先看效果图 上代码: 1.swiperTab.js Page({ data: { // tab切换 currentTab: 0, }, swichNav: function (e) { console.log(e); var that = this; if (this.data.currentTab ===

  • 微信小程序实现滚动Tab选项卡

    本文实例为大家分享了微信小程序实现滚动Tab选项卡的具体代码,供大家参考,具体内容如下 最终效果如上.问题: 1.tab标题总共8个,所以一屏无法全部显示. 2.tab内容区左右滑动切换时,tab标题随即做标记(active). 3.当active的标题不在当前屏显示时,要使其能显示到当前屏中. 一.wxml结构 tab标题因一排八个,所以使用 scroll-view组件,使其可横向滚动. tab内容可左右滑动切换,使用swiper组件实现 为了偷懒,所以数据都通过wx:for遍历重复出来. 说

  • 微信小程序实现吸顶盒效果

    本文实例为大家分享了微信小程序实现吸顶盒效果的具体代码,供大家参考,具体内容如下 html部分  <!-- 列表 -->     <view class="partner-content-container mt15">         <!-- 吸顶盒 -->         <view class="partner-list-header {{isFixedTop?'tab-fixed':''}}" id='operat

  • uniapp开发微信小程序自定义顶部导航栏功能实例

    目录 自定义导航栏渐变色,先上效果 重点来了,导航栏设置渐变色 补充:更换图标 总结 自定义导航栏渐变色,先上效果 使用uniapp开发小程序,在不同界面,要去对页面进行修改顶部导航栏. 比如说要去定义导航栏的背景颜色,常规的去定义导航栏背景颜色 全局定义导航栏 "window": { "navigationBarBackgroundColor": "#32A2FD", // 顶部背景颜色 "navigationBarTitleText

  • 微信小程序 利用css实现遮罩效果实例详解

    微信小程序 利用css实现遮罩效果实例详解 实现效果图: 如图所示,使用css实现小程序的遮罩效果,代码如下 js文件代码: //index.js //获取应用实例 var app = getApp() Page({ data: { flag: false }, a: function(){ this.setData({flag: false}) }, b: function(){ this.setData({flag: true}) } }) wxss文件代码: .b1{position:fi

  • 微信小程序中顶部导航栏的实现代码

    微信小程序中顶部导航栏的实现 实例代码: <view class="swiper-tab"> <view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">11</view> <view class="swiper-tab-list {{curre

  • 微信小程序 配置顶部导航条标题颜色的实现方法

    微信小程序 配置顶部导航条标题颜色的实现方法 关于小程序导航顶部配置都写在.json文件中. { "window":{ "navigationBarBackgroundColor": "#ffffff", "navigationBarTextStyle": "black", "navigationBarTitleText": "微信接口功能演示", "bac

随机推荐