夜光序言:
珍惜那些给你温暖和信任的眼神,那是天使在微笑~~
正文:
以道御术 / 以术识道
上次我们做了一个跳转详情页的
这里,有个问题,就是跳转到详情页并且请求对应的数据
而不是做很多个详情页,服务器不堪重负
<!--pages/news/news.wxml-->
<import src="news-template/news-template.wxml" />
<view class="news-container">
<swiper indicator-dots="{{indicatorDots}}" autoplay indicator-color="{{indicatorColor}}" circular="true">
<swiper-item>
<image src="../images/23.jpg" mode="widthFix"></image>
</swiper-item>
<swiper-item>
<image src="../images/4.jpg" mode="widthFix"></image>
</swiper-item>
<swiper-item>
<image src="../images/5.jpg" mode="widthFix"></image>
</swiper-item>
</swiper>
<block wx:for="{{userData}}" wx:for-item="item" wx:key="key">
<view bindtap="goNewsDetail" data-newsid="{{item.newsid}}">
<template is="newsTemplate" data="{{...item}}"></template>
</view>
</block>
</view>
// pages/news/news.js
var newsData = require("../data/newsdata.js")
Page({
/**
* 页面的初始数据
*/
data: {
indicatorDots:"true",
indicatorColor:"pink",
userData:[]
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
// console.log(newsData);
//这里要注意下
//this.setData可以让view重绘
this.setData({
userData: newsData.initData
})
},
//跳转到详情页
goNewsDetail:function(event){
// console.log("1111")
console.log(event);
var newsId = event.currentTarget.dataset.newsid;
wx.navigateTo({
url: 'news-detail/news-detail?newsid='+newsId,
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
var initData = [
{
"newsid":0,
"authorIcon": "../images/3.png",
"authorName":"GeniusTeam",
"authorTime": "2020/3/9",
"title":"三十年河东三十年河西,莫欺少年穷",
"articleImg": "../images/30.jpg",
"articleText":"传说在那世界开辟时,曾有一生灵诞生,号称祖龙,吞天灭地,乃是至高般的存在,祖龙最后身化万物,从此混沌世界中有了诸多生命出现。",
"articlelikeText":11
},
{
"newsid": 1,
"authorIcon": "../images/3.png",
"authorName": "GeniusTeam",
"authorTime": "2020/3/9",
"title": "三十年河东三十年河西,莫欺少年穷",
"articleImg": "../images/28.png",
"articleText": "传说在那世界开辟时,曾有一生灵诞生,号称祖龙,吞天灭地,乃是至高般的存在,祖龙最后身化万物,从此混沌世界中有了诸多生命出现。",
"articlelikeText": 11
}
]
module.exports = {
initData: initData
}
// pages/news/news-detail/news-detail.js
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
* 夜光:这个生命周期函数用的情况比较多
*/
onLoad: function (options) {
console.log(options.newsid)
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})