• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

mpvue框架使用小程序swiper和scroll-view制作tabbar

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

一开始写感觉很难,后来发现绑定currentTab这个值,并调用clickTab(),changeTab()方法,实时更新它,

也就不难了。

 1 <template>
 2     <div class="contain">
 3         <scroll-view scroll-x class="top">
 4             <div class="tabbar" :class="{'tabbar-bottom':currentTab==index}" v-for="(item,index) in tabBar" :key="index" @click="clickTab(index)">
 5                 {{item.title}}
 6             </div>
 7         </scroll-view>
 8         <swiper :current="currentTab" @change="changeTab">
 9             <swiper-item>
10               <div>
11                   111
12               </div>
13             </swiper-item>
14             <swiper-item>
15                 <div>
16                     222
17                 </div>
18             </swiper-item>
19             <swiper-item>
20                 <div>
21                     333
22                 </div>
23             </swiper-item>
24         </swiper>
25     </div>
26 </template>
27 
28 <script>
29 export default {
30     data() {
31         return {
32             tabBar: [
33                 { "title": "本周最热" },
34                 { "title": "好评排行" },
35                 { "title": "借阅排行" }
36             ],
37             currentTab: 0,
38         }
39     },
40     methods: {
41         clickTab(e) {
42             this.currentTab = e;
43         },
44         changeTab(e) {
45             this.currentTab = e.mp.detail.current;
46         }
47     }
48 }
49 </script>
50 
51 <style>
52 .top {
53   width: 100%;
54   text-align: center;
55   line-height: 42px;
56   white-space: nowrap;
57   position: relative;
58   background: #fff;
59 }
60 .tabbar {
61   width: 120px;
62   font-size: 18px;
63   height: 42px;
64   display: inline-block;
65   color: #000;
66 }
67 
68 .tabbar-bottom {
69   color: #2196f3;
70   border-bottom: 2px solid #2196f3;
71 }
72 </style>

效果如图:

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap