微信小程序,通过获取新闻id进行页面传值详解必看

一共需要四个页面,我这里分别是,home.wxml,home.js,detail.wxml,detail.js这四个页面

通过点击home.wxml页面里的某条新闻进入detail.wxml页面查看详情……

home.wxml页面代码:
(说明:通过绑定catchtap="toDetail"方法,进行js页面新闻详情的跳转,我的后台数据的新闻Id是:article_id,这里的data-homeid=’{{item.article_id}}'是相当于把后面{{item.article_id}}赋值给了homeid)

<view class="content" wx:for="{{home}}" wx:key="key" catchtap="toDetail" data-homeid='{{item.article_id}}'>
    <!-- <navigator url="/pages/detail/detail"> -->
     <view class="left">
        <image src="http://www.wuye.com{{item.thumb_img}}"></image>
      </view>
     <view class="right">
       <text class="title">{{item.title}}</text>
       <text class="content2">{{item.content}}</text>
      </view>
    <!-- </navigator> -->
  </view>

home.js页面代码:

// pages/home/home.js
// http://www.xxx.com/admin/article
var app = getApp()
Page({

   //跳转到详情
   toDetail: function(e){
    // console.log(e)
    let homeId = e.currentTarget.dataset.homeid
    wx.navigateTo({
      url: '../detail/detail?homeId='+homeId,
    })
  },


  /**
   * 页面的初始数据
   * 
   * 生命周期函数--监听页面加载
   */
   // 后台接口数据渲染到页面js部分
  data: {
    home:[]
  },
  onl oad:function(options){
    var that = this
    wx.request({
      url: 'http://www.xxx.com/front/art',
      method:"GET",
      success(res){
        console.log(res)
        that.setData({
          home:res.data.data
        })
      }
    })
  }
})

detail.wxml页面代码:

<!--pages/detaile/detaile.wxml-->
<view class="detaile" wx:for="{{detail}}" wx:key="key">
  <!--添加判断条件-->
  <view wx:if="{{homeId==item.article_id}}">
    <view class="title">
      {{item.title}}
    </view>
    <view class="other">
      <view class="author">
        作者:<span>{{item.author}}</span>
      </view>
      <view class="time">
        发布时间:<span>{{item.pubdate}}</span>
      </view>
    </view>
    <view class="content">{{item.content}}</view>
  </view>
</view>

detail.js页面代码:

// pages/detaile/detaile.js
// http://www.xxx.com/admin/article
var app = getApp()
// var time = require('../../aaa.js')



Page({

  /**
   * 页面的初始数据
   * 
   * 生命周期函数--监听页面加载
   */
  data: {
    detail:[],
  },
  onl oad:function(options){
    // 接收新闻Id的页面js部分
    this.setData({
      homeId:options.homeId
    })
    // 数据渲染到页面js部分
    var that = this
    wx.request({
      url: 'http://www.xxx.com/front/art',
      method:"GET",
      success(res){
        // console.log(res)
        that.setData({
          detail:res.data.data
        })
      }
    })
  }
})

以上文章属于本人原创,转载请注明出处……

上一篇:python爬虫案例


下一篇:java第六章作业