主要函数
```
/**
* 获取电影详情
*/
getdetail: function(movieid) {
wx.showLoading({
title: '加载中',
}) var _this = this;
var movieId = movieid
var url = 'http://test.36519.com/api/index/detail.html?moiveid=' + movieid;
console.log(url);
App._get(url, {},
function(result) {
//console.log(result);
_this.setData({
detail: result.data,
});
});
wx.hideLoading();
console.log(_this.data);
},
```
在comment.js中把id提交到相应的接口获取电影详情
2.comment.js文件
```
// pages/comment/comment.js
var App = getApp();
Page({
/**
* 页面的初始数据
*/
data: {
detail: [],
},
/**
* 获取电影详情
*/
getdetail: function(movieid) {
wx.showLoading({
title: '加载中',
}) var _this = this;
var movieId = movieid
var url = 'http://test.36519.com/api/index/detail.html?moiveid=' + movieid;
console.log(url);
App._get(url, {},
function(result) {
//console.log(result);
_this.setData({
detail: result.data,
});
});
wx.hideLoading();
console.log(_this.data);
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
//console.log(options);
this.getdetail(options.movieid);
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function() {
}
})
```
3.comment.wxml文件
```
{{detail.name}}
{{detail.leader}}
{{detail.score}}分
kkkkk
导演：xxxx
{{detail.content}}
```
4.comment.wxss文件
```
/* pages/comment/comment.wxss */
.detail - container {
height: 400rpx;
filter: blur(40rpx);
opacity: 0.4;
}
.detail - mask {
position: absolute;
width: 100 % ;
height: 400rpx;
background - color: #333;
top: 0;
left: 0;
z - index: -1;
}
.detail - img {
width: 280rpx;
height: 90 % ;
margin - right: 24rpx;
}
.detail - info {
display: flex;
position: absolute;
top: 0;
left: 0;
width: 100 % ;
height: 400rpx;
padding: 20rpx;
}
.detail {
flex - grow: 1;
line - height: 60rpx;
}
.detail view {
color: #fff;
font - size: 24rpx;
}
.detail.detail - nm {
font - size: 40rpx;
font - weight: 700;
}
.detail.sc {
color: #fc0;
font - size: 36rpx;
font - weight: 700;
}
.desc {
padding: 20rpx;
color: #555;
font - size: 24rpx;
}
.comment - container {
padding: 0 20rpx;
}
.comment {
padding: 10rpx;
}
.comment - content {
border: 1px solid#ccc;
width: 100 % ;
box - sizing: border - box;
font - size: 32rpx;
border - radius: 8rpx;
padding: 20rpx;
}
.comment - image image {
width: 200rpx;
height: 200rpx;
margin: 10rpx;
}
.comment - img {
width: 200rpx;
height: 200rpx;
margin: 20rpx 20rpx 0 0;
}
```
5.效果
