From d74240d2ecad238042881b106ba3fcb19e7f4df0 Mon Sep 17 00:00:00 2001
From: link_1999 <1402246900@qq.com>
Date: Mon, 4 Apr 2022 21:44:28 +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   | 111 ++++++++++++++++++++++++++++++++
 新闻小程序/pages/home/home.json |   3 +
 新闻小程序/pages/home/home.wxml |  28 ++++++++
 新闻小程序/pages/home/home.wxss |  48 ++++++++++++++
 4 files changed, 190 insertions(+)
 create mode 100644 新闻小程序/pages/home/home.js
 create mode 100644 新闻小程序/pages/home/home.json
 create mode 100644 新闻小程序/pages/home/home.wxml
 create mode 100644 新闻小程序/pages/home/home.wxss

diff --git a/新闻小程序/pages/home/home.js b/新闻小程序/pages/home/home.js
new file mode 100644
index 0000000..d3cb6dc
--- /dev/null
+++ b/新闻小程序/pages/home/home.js
@@ -0,0 +1,111 @@
+// pages/home/home.js
+Page({
+  data: {
+    //存放轮播图数据的列表
+    lunboList: [],
+    msgList: [
+      { title: "上海今日全市进行抗原检测 明日全市进行核酸检测" },
+      { title: "苏州发现奥密克戎新变异株 与全球已知毒株均不同源" },
+      { title: "美工作组抵华 参与东航事故调查" },
+    ],
+    list: [],
+  },
+  onLoad: function (options) {
+    // 获取轮播图数据
+    wx.cloud.database().collection('homepage').get()
+    .then(res => {
+      // console.log('轮播图数据：', res)
+      this.setData({
+        lunboList: res.data
+      })
+    })
+    .catch(res => {
+      console.log('获取失败', res)
+    })
+    // 获取新闻列表数据
+    this.getList()
+  },
+  // 点击事件-去往详情页
+  gotoDetail(event) {
+    // console.log('用户点击的新闻id：', event.currentTarget.dataset.id)
+    wx.navigateTo({
+      url: '/pages/news-detail/news-detail?id=' + event.currentTarget.dataset.id,
+    })
+  },
+  // 获取新闻列表数据
+  getList(page) {
+    wx.showLoading({
+      title: '加载中...',
+    })
+    let len = this.data.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({
+        list: this.data.list.concat(res.data)
+      })
+    })
+    .catch(res => {
+      console.log('请求失败', res)
+    })
+  },
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+    this.getList()
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function () {
+
+  }
+})
\ No newline at end of file
diff --git a/新闻小程序/pages/home/home.json b/新闻小程序/pages/home/home.json
new file mode 100644
index 0000000..8835af0
--- /dev/null
+++ b/新闻小程序/pages/home/home.json
@@ -0,0 +1,3 @@
+{
+  "usingComponents": {}
+}
\ No newline at end of file
diff --git a/新闻小程序/pages/home/home.wxml b/新闻小程序/pages/home/home.wxml
new file mode 100644
index 0000000..5aca49e
--- /dev/null
+++ b/新闻小程序/pages/home/home.wxml
@@ -0,0 +1,28 @@
+<!-- 轮播公告 -->
+<view class="swiper-view">
+  <swiper class="swiper_container" vertical="true" autoplay="true" circular="true" interval="5000">
+    <block wx:for="{{msgList}}" wx:key="index">
+      <swiper-item>
+        <view class="swiper-title">{{item.title}}</view>
+      </swiper-item>
+    </block>
+  </swiper>
+</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">
+      <image src="{{item.lunbotu_img}}"></image>
+    </swiper-item>
+  </swiper>
+</view>
+<!-- 新闻列表 -->
+<block>
+  <view wx:for="{{list}}" class="newsItem" bindtap="gotoDetail" data-id="{{item._id}}" wx:key="index">
+    <view wx:if="{{news_image}}" data-id="{{item._id}}">
+      <image src="{{news_image}}"></image>
+    </view>
+    <view class="news_title">{{item.news_title}}</view>
+    <view class="news_date">{{item.news_date}}----------{{item.news_author}}</view>
+  </view>
+</block>
\ No newline at end of file
diff --git a/新闻小程序/pages/home/home.wxss b/新闻小程序/pages/home/home.wxss
new file mode 100644
index 0000000..29205da
--- /dev/null
+++ b/新闻小程序/pages/home/home.wxss
@@ -0,0 +1,48 @@
+/* 轮播图 */
+swiper {
+  height: 300rpx;
+}
+swiper image {
+  width: 100%;
+  height: 100%;
+}
+/* 轮播公告 */
+.swiper-view{
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  /* border-radius: 30rpx; */
+  background: #2b4b6b
+}
+.swiper_container {
+  height: 50rpx;
+  width: 100%;
+}
+.swiper-title {
+  height: 50rpx;
+  width: 100%;
+  font-size: 26rpx;
+  white-space: nowrap;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  color: white
+}
+/* 新闻列表 */
+.newsItem {
+  border: 1px solid black;
+  margin: 20rpx;
+  height: 150rpx;
+  background-color: white;
+}
+.news_title {
+  font-size: larger;
+}
+.news_date {
+  font-size: small;
+  color: grey;
+}
+
+