android 微信tab切换,微信小程序之Tab切换

实现思路

翻看小程序的文档可以发现，微信为我们提供了一个swiper组件，通过该组件可以实现view的滑动切换，它的功能与android中的ViewPager是类似的。因此实现Tab切换现在只需要实现头部的Tabbar即可，对于该功能我们可以采用多个横向排列的view组件构成一个Tabbar，每个view组件作为一个Tab项，然后再将其点击事件与swiper进行关联即可实现Tab的点击和滑动切换功能。而对于Tabbar的当前Tab项下面的指示器我们可以采用border-bottom样式实现，也可以单独使用一个view组件作为指示器，我这里采用的是第二种方式实现指示器。

代码

实现代码如下：

页面布局代码

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

{{item.name}}

热门视频

比赛集锦

你懂专栏

天下足球

布局样式代码

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

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

view , page {

padding: 0px;

margin: 0px;

}

.page {

height: 100%;

}

.navbar {

display: flex;

position: absolute;

z-index: 500;

top: 0;

width: 100%;

}

.navbar__item {

position: relative;

display: block;

flex: 1;

padding: 10rpx 0;

text-align: center;

font-size: 0;

height: 48rpx;

line-height: 48rpx;

}

.navbar__item_on {

color: #16B13A;

}

.navbar__slider {

position: absolute;

display: block;

content: " ";

left: 0;

bottom: 0;

height: 3px;

background-color: #16B13A;

transition: transform .3s;

}

.navbar__title{

display: inline-block;

font-size: 15px;

max-width: 8em;

text-align: center;

}

swiper {

height: 100%;

}

swiper-item{

width: 100%;

padding-top: 20rpx;

text-align: center;

}

js代码

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

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

var tabs = [

{

name: "热门视频"

},

{

name: "比赛集锦"

},

{

name: "你懂专栏"

},

{

name: "天下足球"

}

];

Page({

/**

* 页面的初始数据

*/

data: {

tabs: tabs,     //展示的数据

slideOffset: 0,//指示器每次移动的距离

activeIndex: 0,//当前展示的Tab项索引

sliderWidth: 96,//指示器的宽度,计算得到

contentHeight: 0//页面除去头部Tabbar后，内容区的总高度，计算得到

},

/**

* 生命周期函数--监听页面加载

*/

onLoad: function (options) {

var that = this;

wx.getSystemInfo({

success: function (res) {

that.setData({

//计算相关宽度

sliderWidth: res.windowWidth / that.data.tabs.length,

sliderOffset: res.windowWidth / that.data.tabs.length * that.data.activeIndex,

contentHeight: res.windowHeight - res.windowWidth / 750 * 68//计算内容区高度，rpx -> px计算

});

}

});

},

bindChange: function (e) {

var current = e.detail.current;

this.setData({

activeIndex: current,

sliderOffset: this.data.sliderWidth * current

});

console.log("bindChange:" + current);

},

navTabClick: function (e) {

this.setData({

sliderOffset: e.currentTarget.offsetLeft,

activeIndex: e.currentTarget.id

});

console.log("navTabClick:" + e.currentTarget.id);

}

})

总结

上面的布局代码和js代码其实写起来都不难，关键在于css样式的编写，对于不熟悉CSS的人来说调样式太痛苦了。这个效果也是我调了好半天，参考了好多代码之后写出来的，真o(╯□╰)o，看来想写好小程序还得好好学学CSS样式。

标签： 微信小程序

顶一下

(0)

0%

踩一下

(0)

0%