微信小程序开发之实现选项卡的页面切换

不言

发布时间：2018-06-23 15:42:21

3537人浏览过

来源于php中文网

原创

本篇文章主要介绍了微信小程序开发之选项卡(窗口顶部tabbar)页面切换，具有一定的参考价值，有需要的可以了解一下。

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

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

先看效果:

再上代码:

1.index.wxml

 
 
  哈哈 
  呵呵 
  嘿嘿 
 
 
 
   
   
   我是哈哈 
   
   
   
   我是呵呵 
   
   
   
   我是嘿嘿

iWebShop开源商城系统

iWebShop是一款基于PHP语言及MYSQL数据库开发的B2B2C多用户开源免费的商城系统，系统支持自营和多商家入驻、集成微信商城、手机商城、移动端APP商城、三级分销、视频电商直播、微信小程序等于一体，它可以承载大数据量且性能优良，还可以跨平台，界面美观功能丰富是电商建站首选源码。iWebShop开源商城系统 v5.14 更新日志：新增商品编辑页面规格图片上传优化商品详情页面规格图片与主图切

下载

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的顶部选项卡就出来了.

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

相关专题

js正则表达式

php中文网为大家提供各种js正则表达式语法大全以及各种js正则表达式使用的方法，还有更多js正则表达式的相关文章、相关下载、相关课程，供大家免费下载体验。

516

2023.06.20

js获取当前时间

JS全称JavaScript，是一种具有函数优先的轻量级，解释型或即时编译型的编程语言;它是一种属于网络的高级脚本语言，主要用于Web，常用来为网页添加各式各样的动态功能。js怎么获取当前时间呢？php中文网给大家带来了相关的教程以及文章，欢迎大家前来学习阅读。

287

2023.07.28

js 字符串转数组

js字符串转数组的方法：1、使用“split()”方法；2、使用“Array.from()”方法；3、使用for循环遍历；4、使用“Array.split()”方法。本专题为大家提供js字符串转数组的相关的文章、下载、课程内容，供大家免费下载体验。

361

2023.08.03

js是什么意思

JS是JavaScript的缩写，它是一种广泛应用于网页开发的脚本语言。JavaScript是一种解释性的、基于对象和事件驱动的编程语言，通常用于为网页增加交互性和动态性。它可以在网页上实现复杂的功能和效果，如表单验证、页面元素操作、动画效果、数据交互等。

5403

2023.08.17

js删除节点的方法

js删除节点的方法有：1、removeChild()方法，用于从父节点中移除指定的子节点，它需要两个参数，第一个参数是要删除的子节点，第二个参数是父节点；2、parentNode.removeChild()方法，可以直接通过父节点调用来删除子节点；3、remove()方法，可以直接删除节点，而无需指定父节点；4、innerHTML属性，用于删除节点的内容。

483

2023.09.01

js截取字符串的方法

js截取字符串的方法有substring()方法、substr()方法、slice()方法、split()方法和slice()方法。本专题为大家提供字符串相关的文章、下载、课程内容，供大家免费下载体验。

213

2023.09.04

Js中concat和push的区别

Js中concat和push的区别：1、concat用于将两个或多个数组合并成一个新数组，并返回这个新数组，而push用于向数组的末尾添加一个或多个元素，并返回修改后的数组的新长度；2、concat不会修改原始数组，是创建新的数组，而push会修改原数组，将新元素添加到原数组的末尾等等。本专题为大家提供concat和push相关的文章、下载、课程内容，供大家免费下载体验。

239

2023.09.14