1.初始images数组
2.将上传图片的路径拼接给images数组
```
uploadImg: function(event) {
var _this = this;
//1.选择图片
wx.chooseImage({
count: 9,
//选择图片个数
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success(res) {
// tempFilePath可以作为img标签的src属性显示图片
const tempFilePaths = res.tempFilePaths;
//console.log(tempFilePaths);
_this.setData({
images: _this.data.images.concat(tempFilePaths)
});
//console.log(_this.data);
}
})
},
```
在comment.html页面加入代码
```
<image class = "comment-img"src = "{{item}}"wx: for = "{{images}}"wx: key = "{{index}}" > </image>
```
效果：
comment.js源码
```
// pages/comment/comment.js
var App = getApp();
Page({
/**
* 页面的初始数据
*/
data: {
content: '',
// 评价的内容
score: 5,
// 评价的分数
images: [],
// 上传的图片
detail: [],
},
submit: function() {
console.log(this.data.content);
console.log(this.data.score);
},
onContentChange: function(event) {
this.setData({
content: event.detail
});
},
onScoreChange: function(event) {
this.setData({
score: event.detail
});
},
uploadImg: function(event) {
var _this = this;
//1.选择图片
wx.chooseImage({
count: 9,
//选择图片个数
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success(res) {
// tempFilePath可以作为img标签的src属性显示图片
const tempFilePaths = res.tempFilePaths;
//console.log(tempFilePaths);
_this.setData({
images: _this.data.images.concat(tempFilePaths)
});
//console.log(_this.data);
}
})
},
/**
* 获取电影详情
*/
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() {
}
})
```
comment.wxml源码
```
< !--pages / comment / comment.wxml--><view class = '' > <view class = 'detail-container'style = 'background: url({{detail.image}}) no-repeat top/cover' > </view>
<view class='detail-mask'></view > <view class = 'detail-info' > <image src = "{{detail.image}}"class = 'detail-img' > </image>
<view class='detail'>
<view class='detail-nm'>{{detail.name}}</view > <view > {
{
detail.leader
}
} < /view>
<view class='detail.sc'>{{detail.score}}分</view > <view > kkkkk < /view>
<view>导演：xxxx</view > </view>
</view > <view class = 'desc' > {
{
detail.content
}
} < /view>
<!-- 评价 -->
<view class="comment-container">
<van-field value="{{ content }}" placeholder="写一些评价吧" bind:change="onContentChange" / > <text > \r\n < /text>
<van-rate value="{{ score }}" bind:change="onScoreChange" / > <text > \r\n < /text>
<van-button type="warning" bindtap="uploadImg">上传图片</van - button > <text > \r\n < /text>
<view>
<image class="comment-img" src="{{item}}" wx:for="{{images}}" wx:key="{{index}}"></image > </view>
<text>\r\n</text > <van - button size = "large"type = "danger"bindtap = "submit" > 提交评价 < /van-button>
</view > <!--评价end--></view>
```
