夜光序言:
珍惜那些給你溫暖和信任的眼神,那是天使在微笑~~
正文:
以道御術 / 以術識道
上次我們做了一個跳轉詳情頁的
這裏,有個問題,就是跳轉到詳情頁並且請求對應的數據
而不是做很多個詳情頁,服務器不堪重負
<!--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 () {
}
})