cxw-010203

components/indexCom/dataChild/index.js

@@ -0,0 +1,8 @@
+Component({
+    data: {
+
+    },
+    methods: {
+        
+    }
+})

components/indexCom/dataChild/index.json

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

components/indexCom/dataChild/index.wxml

@@ -0,0 +1,3 @@
+<view>
+    2222
+</view>

pages/index/index.js

@@ -4,142 +4,48 @@ const app = getApp()
 
 Page({
   data: {
-    active:0,
-    arr:[
-      {
-        title:'点餐',
-        // path:'/shop/goods'
-      },
-      {
-        title:'评价',
-        // path:'/shop/ratings'
-      },
-      {
-        title:'商家信息',
-        // path:'/shop/info'
-      },
-    ],
-    tabbar: {},
-    condition: ['二十四小时', '最近七天', '最近三十天', '自定义'],
-    toplist: [{
-        url: '',
-        title: '入库数据总量',
-        num: '1'
-      }, {
-        url: '',
-        title: '微博数据',
-        num: '2'
-      }, {
-        url: '',
-        title: '其他数据',
-        num: '0'
-      },
-      {
-        url: '',
-        title: '短视频数据',
-        num: '0'
-      },
-      {
-        url: '',
-        title: '微信数据',
-        num: '0'
+    active: 0,
+    navData: [{
+        text: '数据',
+        component: 'data-child'
       },
       {
-        url: '',
-        title: 'APP数据',
-        num: '0'
+        text: '事件',
+        component: 'data-child'
       },
       {
-        url: '',
-        title: '论坛数据',
-        num: '0'
+        text: '传播媒体',
+        component: 'data-child'
       },
       {
-        url: '',
-        title: '新闻数据',
-        num: '0'
-      },
-    ],
-    navData:[
-      {
-          text: '数据',
-          path:'/pages/insight'
-
-      },
-      {
-          text: '事件',
-          path:'/pages/insight'
+        text: '传播声量',
+        component: 'data-child'
       },
       {
-          text: '传播媒体'
+        text: '晴雨表',
+        component: 'data-child'
       },
       {
-          text: '传播声量'
+        text: '尾盘洞察',
+        component: 'data-child'
       },
       {
-          text: '晴雨表'
+        text: '热议图谱',
+        component: 'data-child'
       },
       {
-          text: '尾盘洞察'
+        text: '用户画像',
+        component: 'data-child'
       },
       {
-          text: '热议图谱'
+        text: '热销排行',
+        component: 'data-child'
       },
-      {
-          text: '用户画像'
-      },
-      {
-          text: '热销排行'
-      },
-  ],
-  currentTab: 0,
-  navScrollLeft: 0
-   
+    ],
   },
-  switchNav(event){
-    // 获取当前tab 的id
-    var cur = event.currentTarget.dataset.current; 
-    //每个tab选项宽度占1/5
-    var singleNavWidth = this.data.windowWidth / 5;
 
-    //tab选项居中                            
-    this.setData({
-        navScrollLeft: (cur - 2) * singleNavWidth
-    })   
-    // 判断id是否和点击的tab id 一致   
-    if (this.data.currentTab == cur) {
-        return false;
-    } else {
-        this.setData({
-            currentTab: cur
-        })
-    }
-},
-switchTab(event){
-    var cur = event.detail.current;
-    var singleNavWidth = this.data.windowWidth / 5;
-    this.setData({
-        currentTab: cur,
-        navScrollLeft: (cur - 2) * singleNavWidth
-    });
-},
-watch:{
-  active(newVal){
-    switch (newVal) {
-      case 0: 
-        // this.$router.push('/shop/goods')
-        break;
-      case 1: 
-        // this.$router.push('/shop/ratings')
-        break;
-      case 2:
-        // this.$router.push('/shop/info')
-        break;
-    }
-  }
-},
   onShow() {
-   this.getTabBar().init();
+    this.getTabBar().init();
   },
   onLoad: function (options) {
 

pages/index/index.json

@@ -1,4 +1,5 @@
 {
   "usingComponents": {
+      "data-child": "../../components/indexCom/dataChild/index"
   }
 }

pages/index/index.wxml

@@ -1,53 +1,10 @@
 <!--index.wxml-->
 <view class="container">
-  <van-tabs active="{{ active }}">
-  <van-tab title="标签 1">内容 1</van-tab>
-  <van-tab title="标签 2">内容 2</van-tab>
-  <van-tab title="标签 3">内容 3</van-tab>
-  <van-tab title="标签 4">内容 4</van-tab>
-  <van-tab title="标签 5">内容 5</van-tab>
-  <van-tab title="标签 6">内容 6</van-tab>
-</van-tabs>
-<view class="nav">
-  <!-- <van-tabs v-model:active="active" swipeable>
-    <van-tab v-for="(item,index) in arr" :title="item.title" :to="item.path">
-      <router-view></router-view>
+  <van-tabs class="menu-tabs" active="{{ active }}">
+    <van-tab wx:for="{{navData}}" title="{{item.text}}">
+      <data-child wx:if="{{item.component === 'data-child'}}"></data-child>
+      
     </van-tab>
-  </van-tabs> -->
-
-
-</view>
-  
-
-  <scroll-view scroll-x="true" class="nav" scroll-left="{{navScrollLeft}}" scroll-with-animation="{{true}}">
-    <block wx:for="{{navData}}" wx:for-index="idx" wx:for-item="navItem" wx:key="idx" :to="item.path">
-      <!-- 判断是否选中，选中设置样式
-      switchNav -->
-      <view class="nav-item {{currentTab == idx ?'active':''}}" data-current="{{idx}}" bindtap="switchNav">
-        {{navItem.text}}</view>
-    </block>
-  </scroll-view>
-  <scroll-view class="scrollList" scroll-x="true" enable-flex="true">
-    <text wx:for="{{condition}}" class="{{index === 0 ? 'actived' : ''}}" wx:key="index">{{item}}</text>
-  </scroll-view>
-  <!-- 页面内容
-  switchTab -->
-  <swiper class="tab-box" current="{{currentTab}}" duration="300" bindchange="switchTab">
-    <swiper-item wx:for="{{[0,1,2,3,4,5,6]}}" wx:for-item="tabItem" wx:for-index="idx" wx:key="idx" class="tab-content">
-      {{tabItem}}
-    </swiper-item>
-  </swiper>
-  <!-- <view class="mat">
-    <view class="mat_card" wx:for="{{toplist}}" wx:key="index" data-id="{{item.id}}" data-name="{{item.name}}" data-url="/pages/material/subpage/newest/newest" bindtap="to">
-      <view class="mat_top">
-        <image class="mat_image" src="/pages/images/ic_zhuanfa@3x.png"></image>
-        <view>
-          <van-icon name="arrow" />
-        </view>
-      </view>
-      <view class="mat_title">{{item.title}}</view>
-      <view class="mat_num">{{item.num}}</view>
-    </view>
-  </view> -->
+  </van-tabs>
   <tabbar />
 </view>

pages/index/index.wxss

@@ -5,14 +5,17 @@
   
 }
 .menu-tabs .van-tab{
-  color: #A0A0A0; /* 字体颜色 */
+  color: #98CDFF; /* 字体颜色 */
   background-color: #006BFF;/* 标签背景颜色 */
  }
 
  .menu-tabs .van-tab--active{
   color: #FFFFFF; /* 字体颜色 */
+  font-size: 17px;
+ }
+ .menu-tabs .van-tabs__line {
+  background: transparent;
  }
-
 
 .nav {
   /* 设置tab-nav宽高度 */