夜光带你走进 微信小程序开发(二十二)擅长的领域

夜光序言:

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

 

 

 

 
 
正文:
 
                                              以道御术 / 以术识道

上次我们做了一个跳转详情页的

这里,有个问题,就是跳转到详情页并且请求对应的数据

而不是做很多个详情页,服务器不堪重负

扫描二维码关注公众号,回复: 10786247 查看本文章

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

  }
})

发布了1529 篇原创文章 · 获赞 305 · 访问量 18万+

猜你喜欢

转载自blog.csdn.net/weixin_41987706/article/details/104772443
今日推荐