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

2024-04-09 20:09:49

微信小程序开发中选项卡.在Android中选项卡一般用fragment,到了小程序这里瞬间懵逼了.

总算做出来了.分享出来看看.

先看效果:

再上代码:

1.index.wxml

<!--index.wxml-->
<view class="swiper-tab">
  <view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">哈哈</view>
  <view class="swiper-tab-list {{currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="swichNav">呵呵</view>
  <view class="swiper-tab-list {{currentTab==2 ? 'on' : ''}}" data-current="2" bindtap="swichNav">嘿嘿</view>
</view> 

<swiper current="{{currentTab}}" class="swiper-box" duration="300" style="height:{{winHeight - 31}}px" bindchange="bindChange">
  <!-- 我是哈哈 -->
  <swiper-item>
   <view>我是哈哈</view>
  </swiper-item>
  <!-- 我是呵呵 -->
  <swiper-item>
   <view>我是呵呵</view>
  </swiper-item>
  <!-- 我是嘿嘿 -->
  <swiper-item>
   <view>我是嘿嘿</view>
  </swiper-item>
</swiper>

2.indexwxss

/**indexwxss**/
swiper-tab{
  width: 100%;
  border-bottom: 2rpx solid #777777;
  text-align: center;
  line-height: 80rpx;}
swiper-tab-list{ font-size: 30rpx;
  display: inline-block;
  width: 33%;
  color: #777777;
}
on{ color: #da7c0c;
  border-bottom: 5rpx solid #da7c0c;} 

swiper-box{ display: block; height: 100%; width: 100%; overflow: hidden; }
swiper-box view{
  text-align: center;
}

3.index.js

//index.js
//获取应用实例
var app = getApp()
Page( {
 data: {
  /**
    * 页面配置
    */
  winWidth: 0,
  winHeight: 0,
  // tab切换
  currentTab: 0,
 },
 onLoad: function() {
  var that = this; 

  /**
   * 获取系统信息
   */
  wxgetSystemInfo( { 

   success: function( res ) {
    thatsetData( {
     winWidth: reswindowWidth,
     winHeight: reswindowHeight
    });
   } 

  });
 },
 /**
   * 滑动切换tab
   */
 bindChange: function( e ) { 

  var that = this;
  thatsetData( { currentTab: edetailcurrent }); 

 },
 /**
  * 点击tab切换
  */
 swichNav: function( e ) { 

  var that = this; 

  if( thisdatacurrentTab === etargetdatasetcurrent ) {
   return false;
  } else {
   thatsetData( {
    currentTab: etargetdatasetcurrent
   })
  }
 }
})

这样一个类似viewpage的顶部选项卡就出来了.

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

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

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

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

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

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

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

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

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

微信小程序开发中选项卡.在Android中选项卡一般用fragment,到了小程序这里瞬间懵逼了. 总算做出来了.分享出来看看. 先看效果: 再上代码: 1.index.wxml  <view class="swiper-tab"> <view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0"
微信小程序开发实现的选项卡(窗口顶部/底部TabBar)页面切换功能图文详解

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

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

微信小程序可谓是今天最火的一个名词了,一经出现真是轰炸了整个开发人员,当然很多App开发人员有了一个担心,微信小程序的到来会不会给移动端App带来一个寒冬,身为一个Android开发者我是不相信的,即使有,那也是很遥远的未来. 不管微信小程序是否能颠覆当今的开发格局,我们都要以好奇的心态去接收,去学习.不排斥新技术,所以,心动不如行动,赶紧先搭建一个微信小程序开发工具.那么接下来就让我们一起来开始吧. 先放一张Github上demo的动态图开发工具下载是看到GitHub上的分享.那么你可以直接
微信小程序开发入门基础教程

微信小程序开发入门基础教程本文档将带你一步步创建完成一个微信小程序,并可以在手机上体验该小程序的实际效果. 开发准备工作获取微信小程序的 AppID 登录 https://mp.weixin.qq.com ,就可以在网站的"设置"-"开发者设置"中,查看到微信小程序的 AppID 了,注意不可直接使用服务号或订阅号的 AppID . 下载开发工具下载地址:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/dow
微信小程序开发指南详解

编写代码创建小程序实例点击开发者工具左侧导航的"编辑",我们可以看到这个项目,已经初始化并包含了一些简单的代码文件.最关键也是必不可少的,是 app.js.app.json.app.wxss 这三个.其中,.js后缀的是脚本文件,.json后缀的文件是配置文件,.wxss后缀的是样式表文件.微信小程序会读取这些文件,并生成小程序实例. 下面我们简单了解这三个文件的功能,方便修改以及从头开发自己的微信小程序. app.js是小程序的脚本代码.我们可以在这个文件中监听并处理小程序的
微信小程序开发篇之踩坑记录

最近参与开发了公司的第一款小程序,开发体验基本类似于基于webview的混合式开发,可以调用官方强大的api,但也有一些坑或者说不习惯的地方.这篇文章从实用性出发,记录了开发过程中的一些问题: 1. 样式优先级混乱在使用button组件时,发现在class中设置width不生效,下面贴上代码: .my-button{ width: 140rpx; height: 60rpx; line-height: 60rpx; padding: 0; } 经过微信调试工具排查后,发现user agent的
微信小程序开发之你可能没有踩过的神坑总结

目录 getApp() 在页面入口文件顶部定义变量你不知道的 wx.createSelectorQuery() and wx.createIntersectionObserver(); 总结 getApp() getApp() 函数是用来获取 app 实例的函数,一般情况下没啥问题,但是在几个特殊的场景下它会给你带来意想不到的 bug. 在 app.js 中的 onLaunch 回调函数中使用 // app.js App({ onLaunch() { console.info(getApp()
微信小程序开发常用功能汇总

目录获取用户信息获取手机号添加分享功能静态分享带参分享全局分享分享按钮页面跳转自定义组件定义全局组件设置默认顶部导航栏样式取消顶部默认的导航栏获取用户信息调用 wx.getUserProfile 方法获取用户基本信息.页面产生点击事件(例如 button 上 bindtap 的回调中)后才可调用,每次请求都会弹出授权窗口,用户同意后返回 userInfo 具体参数如下: 属性类型默认值必填说明 lang string en 否显示用户信息的语言 desc s

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

相关推荐

随机推荐