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 + '¤tIndex=' + 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 @@ + + + + + {{item}} + + + + @@ -9,16 +18,8 @@ - - - 内地新闻 - 香港新闻 - 两岸新闻 - 国际新闻 - 军事新闻 - - + @@ -26,26 +27,23 @@ + + + - - - - - + + - + - {{item.news_title}} + {{item.news_title}} - {{item.news_author}} {{item.news_date}} - - \ 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