This article mainly introduces information about the instance code in the top navigation bar of Applet development. if you need it, refer to the following article to introduce the relevant information about the instance code in the top navigation bar of Applet development, for more information, see
Top navigation bar of Applet development
Requirement: top navigation bar
:
{Item }}
Tab_01
Tab_02
Tab_03
Wxss:
page{ display: flex; flex-direction: column; height: 100%; } .navbar{ flex: none; display: flex; background: #fff; } .navbar .item{ position: relative; flex: auto; text-align: center; line-height: 80rpx; } .navbar .item.active{ color: #FFCC00; } .navbar .item.active:after{ content: ""; display: block; position: absolute; bottom: 0; left: 0; right: 0; height: 4rpx; background: #FFCC00; }
Js:
Var app = getApp () Page ({data: {navbar: ['homepage', 'search', 'my'], currentTab: 0}, navbarTap: function (e) {this. setData ({currentTab: e. currentTarget. dataset. idx })}})
Run:
Thank you for reading this article. I hope it will help you. thank you for your support for this site!
The above is the details of the instance in the top navigation bar of Applet development. For more information, see other related articles in the first PHP community!