上传文件至 '新闻小程序/pages/home'
新增：导航栏，点击导航栏可以在不跳转页面的情况下刷新不同板块的新闻数据。
This commit is contained in:
parent
334a86157b
commit
74328ebb6d
|
|
@ -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,44 +25,17 @@ Page({
|
|||
.catch(res => {
|
||||
console.log('获取失败', res)
|
||||
})
|
||||
// 获取新闻列表数据
|
||||
this.getList()
|
||||
this.getList(0)
|
||||
},
|
||||
navSwitch(e) {
|
||||
let index = e.currentTarget.dataset.index
|
||||
this.setData({
|
||||
navState: index,
|
||||
})
|
||||
// 获取新闻列表数据
|
||||
getList(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',
|
||||
})
|
||||
}
|
||||
},
|
||||
// 获取新闻列表数据
|
||||
getList(page) {
|
||||
wx.showLoading({
|
||||
title: '加载中...',
|
||||
})
|
||||
let len = this.data.news_list.length
|
||||
console.log('当前list长度', len)
|
||||
wx.cloud.database().collection('neidi-news')
|
||||
wx.cloud.database().collection('nd-news')
|
||||
.skip(len)
|
||||
.get()
|
||||
.then(res => {
|
||||
|
|
@ -77,18 +50,136 @@ Page({
|
|||
}
|
||||
this.setData({
|
||||
news_list: this.data.news_list.concat(res.data),
|
||||
news_image: res.data.news_img,
|
||||
})
|
||||
})
|
||||
.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: []
|
||||
})
|
||||
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)
|
||||
},
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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;
|
||||
} */
|
||||
Loading…
Reference in New Issue