1

commpents/tabs/index.js

@@ -0,0 +1,27 @@
+// commpents/tabs/index.js
+Component({
+    /**
+     * 组件的属性列表
+     */
+    properties: {
+        tabs: { type: Object }
+    },
+
+    /**
+     * 组件的初始数据
+     */
+    data: {
+
+    },
+
+    /**
+     * 组件的方法列表
+     */
+    methods: {
+        tabsChange(e) {
+            const that = this;
+            const { item } = e.currentTarget.dataset;
+            that.triggerEvent('tabsChange', item)
+        }
+    }
+})

commpents/tabs/index.json

@@ -0,0 +1,4 @@
+{
+    "component": true,
+    "usingComponents": {}
+}

commpents/tabs/index.less

@@ -0,0 +1,21 @@
+.main {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+    width: 100vw;
+    background-color: var(--f1Color);
+
+    .list {
+        text-align: center;
+
+        .list_1 {
+            padding: 3vw 0;
+            font-size: var(--font16Size);
+
+        }
+    }
+
+    .active {
+        border-bottom: 2px solid var(--blackColor);
+    }
+}

commpents/tabs/index.wxml

@@ -0,0 +1,5 @@
+<view class="main">
+    <view class="list {{tabs.active==item.active?'active':''}}" wx:for="{{tabs.menu}}" wx:key="item" wx:for-item="item" wx:for-index="index" bindtap="tabsChange" data-item="{{item}}">
+        <view class="list_1">{{item.title}}</view>
+    </view>
+</view>

commpents/tabs/index.wxss

@@ -0,0 +1,17 @@
+.main {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  width: 100vw;
+  background-color: var(--f1Color);
+}
+.main .list {
+  text-align: center;
+}
+.main .list .list_1 {
+  padding: 3vw 0;
+  font-size: var(--font16Size);
+}
+.main .active {
+  border-bottom: 2px solid var(--blackColor);
+}

pages/school/info.js

@@ -9,9 +9,8 @@ Page({
         tabs: {
             active: '0',
             menu: [
-                { title: '账号管理1', active: '0' },
-                { title: '信息管理2', active: '1' },
-                { title: '哈哈管理3', active: '2' },
+                { title: '羽校信息', active: '0' },
+                { title: '师资信息', active: '1' },
             ]
         }
     },
@@ -22,8 +21,8 @@ Page({
     // 选项卡选择
     tabsChange: function (e) {
         const that = this;
-        const { item } = e.currentTarget.dataset;
-        that.setData({ 'tabs.active': item.active })
+        let data = e.detail;
+        that.setData({ 'tabs.active': data.active })
     },
 
 

pages/school/info.json

@@ -1,6 +1,7 @@
 {
     "component": true,
     "usingComponents": {
-        "mobile-main": "/commpents/mobile-frame/index"
+        "mobile-main": "/commpents/mobile-frame/index",
+        "s-tab": "/commpents/tabs/index"
     }
 }

pages/school/info.less

@@ -2,26 +2,17 @@
     background-color: var(--mainColor);
 
     .one {
-        background-color: #ff0000;
-        display: flex;
-        flex-direction: row;
-        justify-content: space-around;
         width: 100vw;
-
-        .list {
-            width: 20vw;
-            text-align: center;
-            border-bottom: 1px solid #00ffff;
-
-            .list_1 {
-                padding: 3vw 0;
-                font-size: 16px;
-
-            }
-        }
+        margin: 0 0 2vw 0;
     }
 
     .two {
+        position: relative;
+        flex-grow: 1;
         background-color: #0000ff;
+
+        .a {}
+
+        .b {}
     }
 }

pages/school/info.wxml

@@ -1,14 +1,11 @@
 <mobile-main frameStyle="{{frameStyle}}" bind:back="back">
     <view slot="info" class="container main">
         <view class="one">
-                <view class="list" wx:for="{{tabs.menu}}" wx:key="item" wx:for-item="item" wx:for-index="index" bindtap="tabsChange" data-item="{{item}}">
-                    <view class="list_1"><text>{{item.title}}</text></view>
-                </view>
+            <s-tab tabs="{{tabs}}" bind:tabsChange="tabsChange"></s-tab>
         </view>
         <view class="two">
-            <view wx:if="{{tabs.active=='0'}}">第一</view>
-            <view wx:elif="{{tabs.active=='1'}}">第二</view>
-            <view wx:elif="{{tabs.active=='2'}}">第三</view>
+            <view wx:if="{{tabs.active=='0'}}" class="a">{{form.name}}</view>
+            <view wx:elif="{{tabs.active=='1'}}" class="b">第二</view>
         </view>
     </view>
 </mobile-main>

pages/school/info.wxss

@@ -2,21 +2,11 @@
   background-color: var(--mainColor);
 }
 .main .one {
-  background-color: #ff0000;
-  display: flex;
-  flex-direction: row;
-  justify-content: space-around;
   width: 100vw;
-}
-.main .one .list {
-  width: 20vw;
-  text-align: center;
-  border-bottom: 1px solid #00ffff;
-}
-.main .one .list .list_1 {
-  padding: 3vw 0;
-  font-size: 16px;
+  margin: 0 0 2vw 0;
 }
 .main .two {
+  position: relative;
+  flex-grow: 1;
   background-color: #0000ff;
 }