（六）⼩程序：制作新闻详情页
制作新闻详情页
  　1.实现：点击新闻实现跳转⾄详情页⾯
      （1）news.wxml中利⽤bindtag实现跳转⾄执⾏函数
        代码解析：1、因为template标签上不能添加跳转，所以采取view标签⽅式
            　2、传递的newsid  为⾃定义属性（利⽤data-声明），⽤来传递点击的新闻id      　（2）news.js中利⽤函数detailsHandler实现跳转⾄详情页⾯
        代码解析：1、利⽤event.wsid  获取传⼊的id值              2、将id值作为url的⼀部分，搜寻具体的页⾯信息
  　2.实现：制作详情页⾯(wxml+css)
        （1）news-details.wxml
        （2）news-details.wxss
<block wx:for ="{{ news }}" wx:for-index ="idx" wx:for-item ="item" wx:key ="{{ idx }}">  <view bindtap ="detailsHandler" data-newsid ="{{ item.id }}">
<template is ="newsTemplate" data ="{{ ...item }}"></template >
</view ></
block >
View Code
detailsHandler(event){
var  currentId = event.wsid;
wx.navigateTo({
url: './news-details/news-details?id='+currentId,
})
}
View Code
<!--pages/news/news-details/news-details.wxml-->
<view class ="news-detail-container">
<image class ="head-img" src ="../{{ currentNews.image }}"></image >
<view class ="author-time">
<image class ="author-avatar" src ="../{{currentNews.icon}}"></image >    <text class ="author-name">{{ currentNews.author }}</text >
<text class ="const-text">发表于</text >
<text class ="time">{{ currentNews.time }}</text >
</view >
<text class ="title">{{ currentNews.title }}</text >
<view class ="tool">
<view class ="circle-img">
<image src ="../../../image/sch.png" ></image >
<image src ="../../../image/sc.png" ></image >
<image class ="share-img" src ="../../../image/fx.png"></image >
</view >
<view class ="horizon"></view >
<text class ="detail">{{ currentNews.desc }}</text >
</view ></view
>
View Code
/* pages/news/news-details/news-details.wxss */
.news-detail-container {
display : flex ;
flex-direction : column ;
}
.head-img {
}
.author-time{
flex-direction: row;
margin-left: 30rpx;
margin-top: 20rpx;
}
.author-avatar{
height: 64rpx;
width: 64rpx;
border-radius: 50%;
vertical-align: middle;
}
.author-name{
font-size: 30rpx;
font-weight: 700;
margin-left: 20rpx;
vertical-align: middle;
color:#666;
}
.const-text{
font-size: 24rpx;
color:#999;
margin-left: 20rpx;
}
.
time{
font-size: 24rpx;
margin-left: 30rpx;
vertical-align: middle;
color: #999;
}
.title{
margin-left: 40rpx;
font-size: 36rpx;
font-weight: 700;
margin-top: 30rpx;
letter-spacing: 2px;
color: #4b556c;
}
.tool{
margin-top: 20rpx;
}
.circle-img{
float: right;
margin-right: 40rpx;
vertical-align: middle;
}
.
circle-img image{
width: 50rpx;
height: 50rpx;
}
.share-img{
margin-left: 30rpx;
}
.horizon{
width: 660rpx;
height: 1px;
background-color: #e5e5e5;  vertical-align: middle;
position: relative;
3.实现：js ⽂件中数据接收，达到动态页⾯效果        news-details.js免费小程序制作
          代码解析：1、⾸先导⼊数据⾄data变量(  require)
              　2、其次声明currentNews对象
              　3、最后在onLoad中实现对象赋值
  　4.呈现出来的效果图：
margin : 0 auto ;
z-index : -99;
}
.detail {
color :#666;
margin-top : 20rpx ;
margin-right : 30rpx ;
margin-left : 30rpx ;
line-height : 44rpx ;
letter-spacing : 2px ;
font-size : 24rpx ;
}
.playermusic {
width : 60rpx ;
height : 60rpx ;
vertical-align : middle ;
margin-left : 40rpx ;
}
View Code
// pages/news/news-details/news-details.js
var  data = require("../../../data/data.js");
Page({
/**
* 页⾯的初始数据
*/
data: {
currentNews:{}
},
/**
* ⽣命周期函数--监听页⾯加载
*/
onLoad: function  (options) {
this .setData({
currentNews:data[options.id]
});
},
})
View Code
本节实现了页⾯动态跳转⾄新闻详情页⾯，下⼀节实现收藏功能~

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。