上传文件至 '新闻小程序/pages/home'

实现:点击新闻标题跳转新闻详情页
This commit is contained in:
link_1999 2022-04-04 21:44:28 +08:00
parent 812e12d916
commit d74240d2ec
4 changed files with 190 additions and 0 deletions

View File

@ -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 () {
}
})

View File

@ -0,0 +1,3 @@
{
"usingComponents": {}
}

View File

@ -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>

View File

@ -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;
}