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

一开始写感觉很难，后来发现绑定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>

效果如图：

 

转载于:https://www.cnblogs.com/wilsunson/p/9437200.html