夜光帶你走進 微信小程序開發(二十二)擅長的領域

夜光序言:

 

珍惜那些給你溫暖和信任的眼神,那是天使在微笑~~

 

 

 

 
 
正文:
 
                                              以道御術 / 以術識道

上次我們做了一個跳轉詳情頁的

這裏,有個問題,就是跳轉到詳情頁並且請求對應的數據

而不是做很多個詳情頁,服務器不堪重負

 

 

<!--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 () {

  }
})

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章