Implementation code in the top navigation bar of the applet, And the applet navigation bar
Implementation of the top navigation bar in the Applet
Instance code:
<View class = "swiper-tab"> <view class = "swiper-tab-list {currentTab = 0? 'On ': ''}" data-current = "0" bindtap = "swichNav"> 11 </view> <view class = "swiper-tab-list {currentTab = 1? 'On ': ''}" data-current = "1" bindtap = "swichNav"> 22 </view> <view class = "swiper-tab-list {currentTab = 2? 'On ': ''}" data-current = "2" bindtap = "swichNav"> 33 </view> <view class = "swiper-tab-list {currentTab = 3? 'On ': ''}" data-current = "3" bindtap = "swichNav"> 44 </view> <view class = "swiper-tab-list {currentTab = 4? 'On ': ''}" data-current = "4" bindtap = "swichNav"> 55 </view> <swiper current = "{currentTab}" class = "swiper-box" duration = "300" style = "height: {winHeight-31} px "bindchange =" bindChange "> <! -- I am Haha --> <swiper-item> <view> I am Haha </view> </swiper-item> <! -- I am Haha --> <swiper-item> <view> I am Haha </view> </swiper-item> <! -- I am --> <swiper-item> <view> I am </view> </swiper-item> <view> I am </ view> </swiper-item> <view> I am </view> </swiper-item> </swiper>
.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: 20%; 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; }
Var app = getApp () Page ({data: {/*** Page configuration */winWidth: 0, winHeight: 0, // tab switch currentTab: 0,}, onLoad: function () {var that = this;/*** obtain system information */wx. getSystemInfo ({success: function (res) {that. setData ({winWidth: res. required wwidth, winHeight: res. windowHeight}) ;}}) ;},/*** slide switch tab */bindChange: function (e) {var that = this; that. setData ({currentTab: e. detail. current });}, /*** Click tab to switch */swichNav: function (e) {var that = this; if (this. data. currentTab = e.tar get. dataset. current) {return false;} else {that. setData ({currentTab: e.tar get. dataset. current}) }},/*** click to share */onqueue appmessage: function () {return {title: 'force mini-Project', path: '/page/user? Id = 123 '}}})
Thank you for reading this article. I hope it will help you. Thank you for your support for this site!