> 위챗 애플릿 > 미니 프로그램 개발 > 미니 프로그램의 상단 탐색 모음에 대한 샘플 코드

미니 프로그램의 상단 탐색 모음에 대한 샘플 코드

巴扎黑
풀어 주다: 2017-09-12 10:56:29
원래의
2449명이 탐색했습니다.

微信小程序 开发之顶部导航栏

需求:顶部导航栏

wxml:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

<!--导航条-->

<view class="navbar">

 <text wx:for="pw_navbar" data-idx="pw_index" class="item pw_currentTab==index ? 'active' : ''" wx:key="unique" bindtap="navbarTap">pw_item</text>

</view>

  

<!--首页-->

<view hidden="pw_currentTab!==0">

 tab_01

</view>

  

<!--搜索-->

<view hidden="pw_currentTab!==1">

 tab_02

</view>

  

<!--我-->

<view hidden="pw_currentTab!==2">

 tab_03

</view>

로그인 후 복사

wxss:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

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:

1

2

3

4

5

6

7

8

9

10

11

12

var app = getApp()

Page({

 data: {

  navbar: ['首页', '搜索', '我'],

  currentTab: 0

 },

 navbarTap: function(e){

  this.setData({

   currentTab: e.currentTarget.dataset.idx

  })

 }

})

로그인 후 복사

위 내용은 미니 프로그램의 상단 탐색 모음에 대한 샘플 코드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿