WeChat applet development to implement tab page switching-Mini Program Development-php.cn

Home

WeChat Applet

Mini Program Development

WeChat applet development to implement tab page switching

Jun 23, 2018 pm 03:42 PM

WeChat applet

This article mainly introduces the tab (TabBar at the top of the window) page switching in WeChat applet development. It has certain reference value. You can learn more if you need it.

Tabs are being developed in WeChat applet. Tabs in Android generally use fragments, but when it came to the applet, I was instantly confused.

Finally made it. Share it and have a look.

Look at the effect first:

Then add the code:

1.index.wxml

&lt;!--index.wxml--&gt; 
&lt;view class=&quot;swiper-tab&quot;&gt; 
  &lt;view class=&quot;swiper-tab-list {{currentTab==0 ? &#39;on&#39; : &#39;&#39;}}&quot; data-current=&quot;0&quot; bindtap=&quot;swichNav&quot;&gt;哈哈&lt;/view&gt; 
  &lt;view class=&quot;swiper-tab-list {{currentTab==1 ? &#39;on&#39; : &#39;&#39;}}&quot; data-current=&quot;1&quot; bindtap=&quot;swichNav&quot;&gt;呵呵&lt;/view&gt; 
  &lt;view class=&quot;swiper-tab-list {{currentTab==2 ? &#39;on&#39; : &#39;&#39;}}&quot; data-current=&quot;2&quot; bindtap=&quot;swichNav&quot;&gt;嘿嘿&lt;/view&gt; 
&lt;/view&gt; 
 
&lt;swiper current=&quot;{{currentTab}}&quot; class=&quot;swiper-box&quot; duration=&quot;300&quot; style=&quot;height:{{winHeight - 31}}px&quot; bindchange=&quot;bindChange&quot;&gt; 
  &lt;!-- 我是哈哈 --&gt; 
  &lt;swiper-item&gt; 
   &lt;view&gt;我是哈哈&lt;/view&gt; 
  &lt;/swiper-item&gt; 
  &lt;!-- 我是呵呵 --&gt; 
  &lt;swiper-item&gt; 
   &lt;view&gt;我是呵呵&lt;/view&gt; 
  &lt;/swiper-item&gt; 
  &lt;!-- 我是嘿嘿 --&gt; 
  &lt;swiper-item&gt; 
   &lt;view&gt;我是嘿嘿&lt;/view&gt; 
  &lt;/swiper-item&gt; 
&lt;/swiper&gt;

Copy after login

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; 
}

Copy after login

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 
   }) 
  } 
 } 
})

Copy after login

Such a top tab similar to a viewpage appears.

The above is the entire content of this article. I hope it will be helpful to everyone's learning. For more related content, please pay attention to PHP Chinese website!

Related recommendations:

Implementation of page jump value transfer in WeChat mini program

WeChat mini program How to use textarea

#WeChat applet Implementation of monitoring gesture sliding to switch pages

The above is the detailed content of WeChat applet development to implement tab page switching. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn