From 74328ebb6dad74895c164fea27627b7fa98b05ab Mon Sep 17 00:00:00 2001
From: link_1999 <1402246900@qq.com>
Date: Fri, 8 Apr 2022 22:25:26 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=8A=E4=BC=A0=E6=96=87=E4=BB=B6=E8=87=B3?=
 =?UTF-8?q?=20'=E6=96=B0=E9=97=BB=E5=B0=8F=E7=A8=8B=E5=BA=8F/pages/home'?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

新增：导航栏，点击导航栏可以在不跳转页面的情况下刷新不同板块的新闻数据。
---
 新闻小程序/pages/home/home.js   | 209 +++++++++++++++++++++++---------
 新闻小程序/pages/home/home.wxml |  36 +++---
 新闻小程序/pages/home/home.wxss |  90 ++++++++------
 3 files changed, 217 insertions(+), 118 deletions(-)

diff --git a/新闻小程序/pages/home/home.js b/新闻小程序/pages/home/home.js
index bde3ed3..230514d 100644
--- a/新闻小程序/pages/home/home.js
+++ b/新闻小程序/pages/home/home.js
@@ -1,8 +1,6 @@
-// pages/home/home.js
-let newsType = 'neidi-news'
+let currentIndex = 0;
 Page({
   data: {
-    navState: 0,//导航状态
     //存放轮播图数据的列表
     lunboList: [],
     msgList: [
@@ -11,7 +9,9 @@ Page({
       { title: "美工作组抵华 参与东航事故调查" },
       { title: "上海昨日新增本土确诊425例、无症状8581例" },
     ],
+    topMenuList: ["内地新闻", "香港新闻", "两岸新闻", "国际新闻", "军事新闻"],
     news_list: [],
+    selectIndex: 0,
   },
   onLoad: function (options) {
     // 获取轮播图数据
@@ -25,73 +25,164 @@ Page({
     .catch(res => {
       console.log('获取失败', res)
     })
-    // 获取新闻列表数据
-    this.getList()
-  },
-  navSwitch(e) {
-    let index = e.currentTarget.dataset.index
-    this.setData({
-      navState: index,
-    })
-    if (index == 0) {
-      wx.navigateTo({
-        url: '/pages/home/home',
-      })
-    }else if (index == 1) {
-      wx.navigateTo({
-        url: '/pages/xg/xg',
-      })
-    }else if (index == 2) {
-      wx.navigateTo({
-        url: '/pages/tw/tw',
-      })
-    }else if (index == 3) {
-      wx.navigateTo({
-        url: '/pages/gj/gj',
-      })
-    }else if (index == 4) {
-      wx.navigateTo({
-        url: '/pages/junshi/junshi',
-      })
-    }
+    this.getList(0)
   },
   // 获取新闻列表数据
-  getList(page) {
-    wx.showLoading({
-      title: '加载中...',
-    })
-    let len = this.data.news_list.length
-    console.log('当前list长度', len)
-    wx.cloud.database().collection('neidi-news')
-    .skip(len)
-    .get()
-    .then(res => {
-      wx.hideLoading()
-      console.log('新闻列表请求成功：', res)
-      let datalist = res.data
-      if (datalist.length <= 0) {
-        wx.showToast({
-          title: '数据全部加载完毕',
-          icon: 'none'
-        })
-      }
-      this.setData({
-        news_list: this.data.news_list.concat(res.data),
-        news_image: res.data.news_img,
+  getList(index) {
+    if (index == 0) {
+      wx.showLoading({
+        title: '加载中...',
       })
+      let len = this.data.news_list.length
+      console.log('当前list长度', len)
+      wx.cloud.database().collection('nd-news')
+        .skip(len)
+        .get()
+        .then(res => {
+          wx.hideLoading()
+          console.log('新闻列表请求成功：', res)
+          let datalist = res.data
+          if (datalist.length <= 0) {
+            wx.showToast({
+              title: '数据全部加载完毕',
+              icon: 'none'
+            })
+          }
+          this.setData({
+            news_list: this.data.news_list.concat(res.data),
+          })
+        })
+        .catch(res => {
+          console.log('新闻列表请求失败', res)
+        })
+    } else if (index == 1) {
+      wx.showLoading({
+        title: '加载中...',
+      })
+      let len = this.data.news_list.length
+      console.log('当前list长度', len)
+      wx.cloud.database().collection('xg-news')
+        .skip(len)
+        .get()
+        .then(res => {
+          wx.hideLoading()
+          console.log('新闻列表请求成功：', res)
+          let datalist = res.data
+          if (datalist.length <= 0) {
+            wx.showToast({
+              title: '数据全部加载完毕',
+              icon: 'none'
+            })
+          }
+          this.setData({
+            news_list: this.data.news_list.concat(res.data),
+          })
+        })
+        .catch(res => {
+          console.log('新闻列表请求失败', res)
+        })
+    } else if (index == 2) {
+      wx.showLoading({
+        title: '加载中...',
+      })
+      let len = this.data.news_list.length
+      console.log('当前list长度', len)
+      wx.cloud.database().collection('tw-news')
+        .skip(len)
+        .get()
+        .then(res => {
+          wx.hideLoading()
+          console.log('新闻列表请求成功：', res)
+          let datalist = res.data
+          if (datalist.length <= 0) {
+            wx.showToast({
+              title: '数据全部加载完毕',
+              icon: 'none'
+            })
+          }
+          this.setData({
+            news_list: this.data.news_list.concat(res.data),
+          })
+        })
+        .catch(res => {
+          console.log('新闻列表请求失败', res)
+        })
+    } else if (index == 3) {
+      wx.showLoading({
+        title: '加载中...',
+      })
+      let len = this.data.news_list.length
+      console.log('当前list长度', len)
+      wx.cloud.database().collection('gj-news')
+        .skip(len)
+        .get()
+        .then(res => {
+          wx.hideLoading()
+          console.log('新闻列表请求成功：', res)
+          let datalist = res.data
+          if (datalist.length <= 0) {
+            wx.showToast({
+              title: '数据全部加载完毕',
+              icon: 'none'
+            })
+          }
+          this.setData({
+            news_list: this.data.news_list.concat(res.data),
+          })
+        })
+        .catch(res => {
+          console.log('新闻列表请求失败', res)
+        })
+    } else if (index == 4) {
+      wx.showLoading({
+        title: '加载中...',
+      })
+      let len = this.data.news_list.length
+      console.log('当前list长度', len)
+      wx.cloud.database().collection('junshi-news')
+        .skip(len)
+        .get()
+        .then(res => {
+          wx.hideLoading()
+          console.log('新闻列表请求成功：', res)
+          let datalist = res.data
+          if (datalist.length <= 0) {
+            wx.showToast({
+              title: '数据全部加载完毕',
+              icon: 'none'
+            })
+          }
+          this.setData({
+            news_list: this.data.news_list.concat(res.data),
+          })
+        })
+        .catch(res => {
+          console.log('新闻列表请求失败', res)
+        })
+    }
+  },
+  handleItemTap(e) {
+    // 1获取被点击的标题身上的索引
+    // 2给data中的currentIndex赋值就可以了
+    // 3根据不同的索引来渲染右侧的商品内容
+    this.setData({
+      news_list: []
     })
-    .catch(res => {
-      console.log('新闻列表请求失败', res)
+    const {index} = e.currentTarget.dataset;
+    this.getList(index)
+    currentIndex = index
+    this.setData({
+      selectIndex: index
     })
   },
   // 点击事件-去往详情页
   gotoDetail(event) {
     // console.log('用户点击的新闻id：', event.currentTarget.dataset.id)
     wx.navigateTo({
-      url: '/pages/news-detail/news-detail?id=' + event.currentTarget.dataset.id + '&newsType=' + newsType,
+      url: '/pages/news-detail/news-detail?id=' + event.currentTarget.dataset.id + '&currentIndex=' + currentIndex,
     })
   },
-  
+
   /**
    * 生命周期函数--监听页面初次渲染完成
    */
@@ -131,7 +222,7 @@ Page({
    * 页面上拉触底事件的处理函数
    */
   onReachBottom: function () {
-    this.getList()
+    this.getList(currentIndex)
   },
 
   /**
diff --git a/新闻小程序/pages/home/home.wxml b/新闻小程序/pages/home/home.wxml
index db231b2..4ce6041 100644
--- a/新闻小程序/pages/home/home.wxml
+++ b/新闻小程序/pages/home/home.wxml
@@ -1,3 +1,12 @@
+<!-- 顶部导航栏 -->
+<view class="cates">
+  <view class="cates_container">
+    <scroll-view class="top_menu" scroll-x="true">
+      <view class="top_menu_item {{index===selectIndex?'active':''}}" wx:for="{{topMenuList}}" wx:key="*this" bindtap="handleItemTap" data-index="{{index}}">{{item}}</view>
+    </scroll-view>
+  </view>
+</view>
+
 <!-- 轮播公告 -->
 <view class="swiper-view">
   <swiper class="swiper_container" vertical="true" autoplay="true" circular="true" interval="3000">
@@ -9,16 +18,8 @@
   </swiper>
 </view>
 
-<!-- 新闻板块导航栏 -->
-<scroll-view  class="types" scroll-x="true">
-  <view class="type-item" bindtap="navSwitch" data-index="0"><view class="{{navState==0 ? 'item_sel_style' : ''}}">内地新闻</view></view>
-  <view class="type-item" bindtap="navSwitch" data-index="1"><view class="{{navState==1 ? 'item_sel_style' : ''}}">香港新闻</view></view>
-  <view class="type-item" bindtap="navSwitch" data-index="2"><view class="{{navState==2 ? 'item_sel_style' : ''}}">两岸新闻</view></view>
-  <view class="type-item" bindtap="navSwitch" data-index="3"><view class="{{navState==3 ? 'item_sel_style' : ''}}">国际新闻</view></view>
-  <view class="type-item" bindtap="navSwitch" data-index="4"><view class="{{navState==4 ? 'item_sel_style' : ''}}">军事新闻</view></view>
-</scroll-view>
 
-<!-- 顶部轮播图 -->
+<!-- 轮播图 -->
 <view class="lunbotuBlock">
   <swiper indicator-dots indicator-color="gray" indicator-active-color="white" circular autoplay interval="5000">
     <swiper-item wx:for="{{lunboList}}" wx:key="id" class="lunbotuItem">
@@ -26,26 +27,23 @@
     </swiper-item>
   </swiper>
 </view>
+
+
+
 <!-- 新闻列表 -->
-<view class="news-list">
-
-  <!-- 每篇新闻框 -->
-  <view class="newsItem" wx:for="{{news_list}}" wx:key="_id">
-
+<view class="news_list">
+  <view wx:for="{{news_list}}" wx:key="_id">
     <!-- 标题框（图片和文字） -->
     <view class="pic-words">
-      <view wx:if="{{item.news_img}}">
+      <view wx:if="{{item.news_img != 'None'}}">
         <image class="news_image" src="{{item.news_img}}"></image>
       </view>
-      <view class="news_title .title-words" bindtap="gotoDetail" data-id="{{item._id}}">{{item.news_title}}</view>
+      <view class="news_title title-words" bindtap="gotoDetail" data-id="{{item._id}}">{{item.news_title}}</view>
     </view>
-
     <!-- 发布单位与发布时间 -->
     <view class="publish">
       <view class="publisher">{{item.news_author}}</view>
       <view class="create-time">{{item.news_date}}</view>
     </view>
-
   </view>
-
 </view>
\ No newline at end of file
diff --git a/新闻小程序/pages/home/home.wxss b/新闻小程序/pages/home/home.wxss
index cbddf91..fd5853c 100644
--- a/新闻小程序/pages/home/home.wxss
+++ b/新闻小程序/pages/home/home.wxss
@@ -1,4 +1,29 @@
-/* 轮播图 */
+/* 顶部导航栏样式 */
+.top_menu {
+  width: 100%;
+  height: 34px;
+  white-space: nowrap;
+  border-bottom: 1px solid;
+  border-bottom-color: black;
+  background-color: snow;
+}
+
+.top_menu_item {
+  font-size: 18px;
+  width: rpx;
+  display: inline-block;
+  margin: 10rpx 20rpx;
+}
+
+/* 导航栏被选中后的样式 */
+.active {
+  color: #2b4b6b;
+  border-bottom: 10rpx solid currentColor;
+}
+
+
+
+/* 轮播图样式 */
 swiper {
   height: 300rpx;
 }
@@ -6,8 +31,9 @@ swiper image {
   width: 100%;
   height: 100%;
 }
-/* 轮播公告 */
-.swiper-view{
+
+/* 轮播公告样式 */
+.swiper-view {
   display: flex;
   flex-direction: row;
   justify-content: center;
@@ -15,10 +41,12 @@ swiper image {
   /* border-radius: 30rpx; */
   background: #2b4b6b
 }
+
 .swiper_container {
   height: 50rpx;
   width: 100%;
 }
+
 .swiper-title {
   height: 50rpx;
   width: 100%;
@@ -30,45 +58,31 @@ swiper image {
   align-items: center;
   color: white
 }
-/* 新闻板块导航栏 */
-.types {
-  width: 100%;
-  height: 34px;
-  white-space: nowrap;
-  border-bottom: 1px solid;
-  border-bottom-color: black;
-  background-color: snow;
-}
-.type-item {
-  font-size: 18px;
-  width: rpx;
-  display: inline-block;
-  margin: 10rpx 20rpx;
-}
-.item_sel_style {
-  background-color: #2b4b6b;
-  color: snow;
-}
 
 
-/* 新闻列表 */
-.news-list {
-  background-color: rgba(128, 128, 128, 0.137);
+/* 新闻列表样式 */
+.news_list {
+  padding: 10rpx 30rpx 30rpx 30rpx;
 }
-.newsItem {
-  padding: 30rpx 30rpx 30rpx 30rpx;
+/* 标题图文框 */
+.pic-words {
+  display: flex;
+  flex-direction: row;
+  margin-top: 30rpx;
 }
-  /* 新闻图片 */
+/* 新闻图片 */
 .news_image {
   width: 250rpx;
   height: 175rpx;
 }
-  /* 新闻标题 */
+
+/* 新闻标题 */
 .news_title {
   font-size: 20px;
   margin-left: 15rpx;
 }
-  /* 发布单位 */
+
+/* 发布单位 */
 .publish {
   display: flex;
   flex-direction: row;
@@ -78,18 +92,14 @@ swiper image {
   border-bottom: 1px solid;
   border-bottom-color: rgb(163, 147, 147);
 }
-  /* 发布时间 */
+
+/* 发布时间 */
 .create-time {
   margin-left: 30rpx;
   margin-bottom: 20rpx;
 }
-  /* 标题图文框 */
-.pic-words {
-  display: flex;
-  flex-direction: row;
-}
-  /* 标题 */
-.title-words {
-  width: 500rpx;
-}
 
+/* 标题 */
+/* .title-words {
+  width: 500rpx;
+} */
\ No newline at end of file