From 93ece12e288a494251ec31dccdaff15ad66a0577 Mon Sep 17 00:00:00 2001
From: liuyongli <1598631486@qq.com>
Date: Wed, 29 Jun 2022 08:51:08 +0800
Subject: [PATCH] no message

---
 pages/index/index.js   | 56 +++++++++++++++++++++++-----------
 pages/index/index.wxml | 26 +++++++++++-----
 pages/index/index.wxss | 68 ++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 125 insertions(+), 25 deletions(-)

diff --git a/pages/index/index.js b/pages/index/index.js
index 9939dd5..7307918 100644
--- a/pages/index/index.js
+++ b/pages/index/index.js
@@ -45,39 +45,59 @@ Page({
         num: '0'
       },
     ],
-    tabList: [
+    navData:[
       {
-        text: '精选推荐',
-        key: 0,
+          text: '数据'
       },
       {
-        text: '夏日防晒',
-        key: 1,
+          text: '事件'
       },
       {
-        text: '二胎大作战',
-        key: 2,
+          text: '传播媒体'
       },
       {
-        text: '人气榜',
-        key: 3,
+          text: '传播声量'
       },
       {
-        text: '好评榜',
-        key: 4,
+          text: '晴雨表'
       },
       {
-        text: 'RTX 30',
-        key: 5,
+          text: '租晴雨表房子'
       },
-      {
-        text: '手机也疯狂',
-        key: 6,
-      },
-    ],
+  ],
+  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
+    });
+},
   onShow() {
    this.getTabBar().init();
   },
diff --git a/pages/index/index.wxml b/pages/index/index.wxml
index e4d5757..e94955e 100644
--- a/pages/index/index.wxml
+++ b/pages/index/index.wxml
@@ -1,13 +1,25 @@
 <!--index.wxml-->
-<view>
-<view  wx:for="{{tabList}}"
-		  wx:for-index="index"
-		  wx:key="index"
-		  label="{{item.text}}"
-		  value="{{item.key}}"></view>
+<view class="container">
+  <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">
+            <!-- 判断是否选中，选中设置样式 -->
+            <!-- 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>
+  <!-- 页面内容 -->
+    <!-- duration="300"：滑动动画时长 -->
+    <!-- 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="top">
     <view wx:for="{{toplist}}" wx:key="url" class="top_box">
       <!-- <view class="box_image">
@@ -21,4 +33,4 @@
     </view>
   </view>
   <tabbar />
-</view>
+</view>
\ No newline at end of file
diff --git a/pages/index/index.wxss b/pages/index/index.wxss
index 181a1d6..e38b7cc 100644
--- a/pages/index/index.wxss
+++ b/pages/index/index.wxss
@@ -70,3 +70,71 @@ background: #F0F5FF;
   font-weight: 900;
   font-size: 28rpx;
 }
+
+
+
+
+/**index.wxss**/
+page {
+  width: 100%;
+  height: 100%;
+}
+
+.container {
+  width: 100%;
+  height: 100%;
+}
+
+.nav {
+  /* 设置tab-nav宽高度 */
+  height: 80rpx;
+  width: 100%;
+
+  /* 假如您需要并排放置两个带边框的框，
+  可通过将 box-sizing 设置为 "border-box"。 */
+  box-sizing: border-box;
+
+  overflow: hidden;
+
+  /* 居中 */
+  line-height: 80rpx;
+
+  background:
+    #f7f7f7;
+
+  font-size: 16px;
+
+  /* 规定段落中的文本不进行换行： */
+  white-space: nowrap;
+
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 99;
+}
+
+.nav-item {
+  width: 20%;
+  display: inline-block;
+  text-align: center;
+}
+
+.nav-item.active {
+  color:
+    green;
+}
+
+.tab-box {
+  background:
+    rgb(31, 201, 96);
+    /* 这里设置成nav的高度 */
+  padding-top: 80rpx;
+  height: 100%;
+  box-sizing: border-box;
+}
+
+.tab-content {
+  /* 裁剪 div 元素中内容的左/右边缘 - 如果溢出元素的内容区域的话： */
+  overflow-y: scroll;
+}
+