-
移动开发
站-
热门城市 全国站>
-
其他省市
-
-
400-636-0069
白羽
2018-06-26
来源 ：网络
阅读 1624
评论 0
摘要：本文将带你了解微信小程序开发之可滑动的底部导航栏实例，希望本文对大家学微信有所帮助。
底部3-5个选项的底部导航栏，目前在移动端上是主流布局之一
因此腾讯官方特地做了，可以通过设置，就可以做出了一个底部的导航栏
但是通过设置的这个底部的导航栏，功能上比较固定，它必须要设置与它对应的一个页面，而且并不能滑动。
在业务上，有时候会比较限制，并不能完全满足所需。
又例如早前有人拿着UI稿问我，这种广告轮播图的样式，在小程序能不能实现呢？
我当时没有想了下，还不是很确定，因为小程序的轮播图的那几个小点点实在比较普通，样式单一。
因此自定义就有这个必要性
下面介绍这个仿android fragment可滑动的底部导航栏如何实现
wxml：
[html] view plain copy print?
1. <swiper current="{{currentTab}}" class="swiper-box" duration="300" style="height:{{winHeight - 51}}px" bindchange="bindChange">
2.
3. <!-- frag01 -->
4. <swiper-item>
5. <scroll-view class="hot-box" scroll-y="true" upper-threshold="50" lower-threshold="100" bindscrolltolower="scrolltolower">
6.
7. <!-- 列表 -->
8. <view class="themes-list">
9. <view class="themes-list-box" wx:for="{{datalists}}">
10. <view class="themes-list-main">
11. <view class="themes-list-name">{{item}}</view>
12. </view>
13. </view>
14. </view>
15. </scroll-view>
16. </swiper-item>
17.
18. <!-- grag02 -->
19. <swiper-item>
20. <scroll-view class="hot-box" scroll-y="true" upper-threshold="50" lower-threshold="100" bindscrolltolower="scrolltolower">
21.
22. <!-- 列表 -->
23. <view class="themes-list">
24. <view class="themes-list-box" wx:for="{{reslists}}">
25. <view class="themes-list-main">
26. <view class="themes-list-name">{{item}}</view>
27. </view>
28. </view>
29. </view>
30. </scroll-view>
31. </swiper-item>
32.
33. <!-- grag03 -->
34. <swiper-item>
35. <scroll-view class="hot-box" scroll-y="true" upper-threshold="50" lower-threshold="100" bindscrolltolower="scrolltolower">
36.
37. <!-- 列表 -->
38. <view class="themes-list">
39. <view class="themes-list-box" wx:for="{{datalists}}">
40. <view class="themes-list-main">
41. <view class="themes-list-name">{{item}}</view>
42. </view>
43. </view>
44. </view>
45. </scroll-view>
46. </swiper-item>
47.
48. <!-- grag02 -->
49. <swiper-item>
50. <scroll-view class="hot-box" scroll-y="true" upper-threshold="50" lower-threshold="100" bindscrolltolower="scrolltolower">
51.
52. <!-- 列表 -->
53. <view class="themes-list">
54. <view class="themes-list-box" wx:for="{{reslists}}">
55. <view class="themes-list-main">
56. <view class="themes-list-name">{{item}}</view>
57. </view>
58. </view>
59. </view>
60. </scroll-view>
61. </swiper-item>
62. </swiper>
63.
64. <!--tab_top-->
65. <view class="swiper-tab">
66. <view class="swiper-tab-list {{currentTab==0 ? 'active' : ''}}" data-current="0" bindtap="swichNav">
67. <view class="swiper-tab-img"><image class="img" src="{{currentTab==0 ? iconlists[0].focus: iconlists[0].normal}}"></image></view>
68. <view>frag01</view>
69. </view>
70. <view class="swiper-tab-list {{currentTab==1 ? 'active' : ''}}" data-current="1" bindtap="swichNav">
71. <view class="swiper-tab-img"><image class="img" src="{{currentTab==1 ? iconlists[1].focus: iconlists[1].normal}}"></image></view>
72. <view>frag02</view>
73. </view>
74. <view class="swiper-tab-list {{currentTab==2 ? 'active' : ''}}" data-current="2" bindtap="swichNav">
75. <view class="swiper-tab-img"><image class="img" src="{{currentTab==2 ? iconlists[2].focus: iconlists[2].normal}}"></image></view>
76. <view>frag03</view>
77. </view>
78. <view class="swiper-tab-list {{currentTab==3 ? 'active' : ''}}" data-current="3" bindtap="swichNav">
79. <view class="swiper-tab-img"><image class="img" src="{{currentTab==3 ? iconlists[3].focus: iconlists[3].normal}}"></image></view>
80. <view>frag04</view>
81. </view>
82. </view>
wxss：
[css] view plain copy print?
1. /*swiper*/
2. .swiper-box {
3. display: block;
4. height: 100%;
5. width: 100%;
6. overflow: hidden;
7. }
8. .hot-box {
9. display: block;
10. height: 100%;
11. font-family: Helvetica;
12. }
13. /* list */
14. .themes-list {
15. background: #fff;
16. display: block;
17. margin-bottom: 20px;
18. }
19. .themes-list-box {
20. display: block;
21. position: relative;
22. padding: 16px 20px;
23. border-bottom: 1px solid #f2f2f2;
24. }
25. .themes-list-main {
26. margin-left: 1px;
27. }
28. .themes-list-name {
29. font-size: 14px;
30. color: #444;
31. height: 20px;
32. line-height: 20px;
33. overflow: hidden;
34. }
35. /*tab*/
36. .swiper-tab {
37. height: 50px;
38. background: #fff;
39. display: flex;
40. position: relative;
41. z-index: 2;
42. flex-direction: row;
43. justify-content: center;
44. align-items: center;
45. border-top: 1px solid #ccc;
46. }
47. .swiper-tab-list {
48. margin: 0 20px;
49. padding: 0 4px;
50. font-size: 28rpx;
51. font-family: Helvetica;
52. }
53. .active {
54. /*border-bottom: 1px solid #FFCC00;*/
55. color: #FFCC00;
56. }
57. .swiper-tab-img {
58. text-align: center;
59. }
60. .img {
61. width:23px;
62. height: 23px;
63. }
js：
[javascript] view plain copy print?
1. Page( {
2. data: {
3. winWidth: 0,
4. winHeight: 0,
5. currentTab: 0,
6. datalists : [
7. "习近平主持中央财经领导小组第十五次会议",
8. "李克强打叉的“万里审批图”成历史",
9. "新疆自治区举行反恐维稳誓师大会",
10. "朝鲜代表团抵达马来西亚处理金正男遇害案",
11. "宝马车祸案肇事者二次精神鉴定:案发为精神病状态",
12. "朝鲜代表团抵达马来西亚处理金正男遇害案",
13. "宝马车祸案肇事者二次精神鉴定:案发为精神病状态",
14. "朝鲜代表团抵达马来西亚处理金正男遇害案",
15. "宝马车祸案肇事者二次精神鉴定:案发为精神病状态",
16. "朝鲜代表团抵达马来西亚处理金正男遇害案",
17. "宝马车祸案肇事者二次精神鉴定:案发为精神病状态",
18. "砸锅卖铁！索尼是在走向毁灭 还是在奔向新生？"
19. ],
20. reslists:["hello","thank you for your read","if u feel good","can u give me good？"],
21. iconlists:[
22. {normal:"../../images/wp.png",focus:"../../images/wpselect.png"},
23. {normal:"../../images/ss.png",focus:"../../images/ssselect.png"},
24. {normal:"../../images/hc.png",focus:"../../images/hcselect.png"},
25. {normal:"../../images/my.png",focus:"../../images/myselect.png"},
26. ]
27. },
28. onLoad: function( options ) {
29. var that = this;
30. //获取系统信息
31. wx.getSystemInfo( {
32. success: function( res ) {
33. that.setData( {
34. winWidth: res.windowWidth,
35. winHeight: res.windowHeight
36. });
37. }
38. });
39. },
40. /**
41. * 滑动切换tab
42. */
43. bindChange: function( e ) {
44. var that = this;
45. that.setData( { currentTab: e.detail.current });
46. },
47. /**
48. * 点击切换tab
49. */
50. swichNav: function( e ) {
51. console.log(e)
52. var that = this;
53. if( this.data.currentTab === e.currentTarget.dataset.current ) {
54. //点击的是同一个，则不操作
55. return false;
56. } else {
57. that.setData( {
58. currentTab: e.currentTarget.dataset.current
59. })
60. }
61.
62. }
63. })
本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标移动开发之微信频道！
喜欢 | 0
不喜欢 | 0
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了，明天再试试吧！
我们会在第一时间安排职业规划师联系您！
您也可以联系我们的职业规划师咨询：
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com，All Rights Reserved.
沪公网安备 31011502005948号
索取资料
答疑解惑
技术交流
职业测评
面试技巧
高薪秘笈
