一共需要四个页面,我这里分别是,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
})
}
})
}
})
以上文章属于本人原创,转载请注明出处……