首先給大家看看做好的效果圖：
一、接下來我們說一下評分這個功能：
實際上就是一個簡單的js，首先我們遍歷出小星星，此時默認給的五星好評，在給他們一個點擊事件，當點擊時，我們獲取到當前點擊的是第幾顆；代碼如下：
var index = e.currentTarget.dataset.index; // 獲取當前點擊的是第幾顆星星
接下來我們暫存星星的數組，獲取星星數組的長度，代碼如下：
var tempUserStars = this.data.userStars; // 暫存星星數組
var len = tempUserStars.length; // 獲取星星數組的長度
下面就是最核心的地方了，判斷顯示的紅心和分數：
1、循環星星數組的長度；
2、如果當前選中星星的index大於等於星星數組的長度，那么就是滿分，讓其星星數組的圖片為紅心，分數加1；
3、如果當前選中星星的index小於星星數組的長度，那么星星數組的圖片為空心，給其重新賦值就可以了；
二、接下來是標簽的功能：
每一個標簽都是一個lable，在lable里做一個三目運算就可以，首先給一個false，當點擊每一個lable時，讓其變為true，類名變為所設置的顏色就OK了。
三、下面我們說說上傳圖片的功能：
圖片上傳的功能與我們的input里的上傳功能相似，但是小程序給我們提供了一個便捷的方法------wx.chooseImage
給加號的圖片一個點擊事件，在事件里我們就可以用到這個方法了，那么它有哪些參數呢？小編給大家羅列出來：
count: 5 - pics.length, // 最多可以選擇的圖片張數，默認9
sizeType: ['original', 'compressed'], // original 原圖，compressed 壓縮圖，默認二者都有
sourceType: ['album', 'camera'], // album 從相冊選圖，camera 使用相機，默認二者都有
下面有一個成功的回調函數，成功后把成功的圖片定義一個變量放到data定義好的變量中，在this.setData中更新添加的圖片就可以了，代碼如下：
success: function (res) {
var imgsrc = res.tempFilePaths;
pics = pics.concat(imgsrc);
console.log(pics);
// console.log(imgsrc);
that.setData({
pics: pics,
// console.log(pics),
});
}
四、最后我們說說評論功能：
我們一般會限制評論文字的長度，首先我們獲取輸入框的內容，用parseInt獲取文字長度，如果內容長度超出我們設定的長度，直接return，在this.setData中更新只顯示的固定長度的文字，代碼如下：
inputs: function (e) {
// 獲取輸入框的內容
var value = e.detail.value;
// 獲取輸入框內容的長度
var len = parseInt(value.length);
//最多字數限制
if (len > this.data.max)
return;
// 當輸入框內容的長度大於最大長度限制（max)時，終止setData()的執行
this.setData({
currentWordNumber: len //當前字數
});
}
最后給大家把完整代碼寫出：
HTML：
1 <!--服務評價--> 2 <view class="service"> 3 <!--評分--> 4 <view class='score'> 5 <view class='left'> 6 評分 7 </view> 8 <view class='right'> 9 <view bindtap="starTap" data-index="{{index}}" class="star" wx:for="{{userStars}}" wx:key="index"> 10 <image src="{{item}}"></image> 11 </view> 12 <text class='rtxt'>{{wjxScore}}.0分</text> 13 </view> 14 </view> 15 <!--內容--> 16 <view class='content'> 17 <view class='left'> 18 內容 19 </view> 20 <view class='right'> 21 <text bindtap='label' class="{{attitude===true ? 'labelColor':''}}" data-index="{{attitude}}">小清新</text> 22 <text bindtap='label1' class="{{time===false? 'labelColor':''}}" data-index="{{time}}">文采好</text> 23 <text bindtap='label2' class="{{efficiency===false?'labelColor':''}}" data-index="{{efficiency}}">甜甜的</text> 24 <text bindtap='label3' class="{{environment===false?'labelColor':''}}" data-index="{{environment}}">值得收藏</text> 25 <text bindtap='label4' class="{{professional===false?'labelColor':''}}" data-index="{{professional}}">很文藝</text> 26 </view> 27 </view> 28 <!--圖片--> 29 <view class='picture'> 30 <view class='left'> 31 圖片 32 </view> 33 <view class='right'> 34 <view class="parcel" wx:for="{{pics}}" wx:key="{{index}}"> 35 <image src="{{pics[index]}}" class="According" data-index="{{index}}" mode="aspectFill" bindtap="previewImg"></image> 36 </view> 37 <image src='../img/add.png' class='add' bindtap='choose'></image> 38 </view> 39 </view> 40 </view> 41 <!--textarea--> 42 <view class="conts"> 43 <textarea class="areas" placeholder='更多評價請寫在這里（最多300字）' minlength="{{min}}" maxlength="{{max}}" bindinput="inputs"> 44 <!-- <text class="currentWordNumber">{{currentWordNumber|0}}/{{max}}</text> --> 45 </textarea> 46 </view> 47 <!--提交評價--> 48 <button class='btn' bindtap='handleBtn'>提交評價</button>
css：
1 page { 2 width: 100%; 3 height: 100%; 4 background: #f0f0f0; 5 } 6 .service { 7 width: 100%; 8 overflow: hidden; 9 box-sizing: border-box; 10 padding: 0 20rpx; 11 background: #fff; 12 } 13 .score { 14 width: 100%; 15 height: 100rpx; 16 border-bottom: 1px solid #ccc; 17 } 18 .star { 19 float: left; 20 width: 54rpx; 21 height: 100rpx; 22 text-align: center; 23 line-height: 100rpx; 24 } 25 .star image{ 26 width: 40rpx; 27 height: 40rpx; 28 margin-top: 30rpx; 29 } 30 .score .left { 31 width: 100rpx; 32 line-height: 100rpx; 33 font-size: 30rpx; 34 float: left; 35 } 36 .score .right { 37 width: 610rpx; 38 font-size: 30rpx; 39 float: left; 40 color: #888; 41 } 42 43 .score .right .rtxt { 44 display: inline-block; 45 height: 100rpx; 46 line-height: 100rpx; 47 margin-left: 15rpx; 48 color: #c00; 49 font-weight: bold; 50 } 51 .labelColor { 52 color: #c00; 53 border: 1px solid #c00 !important; 54 } 55 .content { 56 width: 100%; 57 overflow: hidden; 58 border-bottom:1px solid #ccc; 59 padding:0 0 26rpx 0; 60 box-sizing: border-box; 61 } 62 .content .left { 63 width: 100rpx; 64 font-size: 30rpx; 65 float: left; 66 padding-top: 20rpx; 67 } 68 .content .right { 69 width: 610rpx; 70 font-size: 24rpx; 71 float: left; 72 color: #888; 73 } 74 .content .right text { 75 font-size: 24rpx; 76 padding: 13rpx 24rpx; 77 float: left; 78 border: 1px solid #888; 79 border-radius: 10rpx; 80 margin-right: 34rpx; 81 margin-top: 20rpx; 82 } 83 .picture { 84 width: 100%; 85 overflow: hidden; 86 background: #fff; 87 border-bottom: 1px solid #ccc; 88 } 89 .picture .left { 90 width: 100rpx; 91 font-size: 30rpx; 92 float: left; 93 padding-top: 20rpx; 94 } 95 .picture .right { 96 width: 610rpx; 97 font-size: 24rpx; 98 float: left; 99 color: #888; 100 box-sizing: border-box; 101 padding-top:36rpx; 102 } 103 .picture .right .add { 104 width: 120rpx; 105 height: 120rpx; 106 margin-right: 10rpx; 107 } 108 .According{ 109 width:120rpx; 110 height:120rpx; 111 float:left; 112 margin-right:10rpx; 113 margin-bottom: 10rpx; 114 } 115 .parcel{ 116 width:120rpx; 117 height:120rpx; 118 float:left; 119 margin-right:10rpx; 120 margin-bottom: 10rpx; 121 position: relative; 122 } 123 .deleteimg{ 124 width:30rpx; 125 height:30rpx; 126 position: absolute; 127 right:0; 128 top:0; 129 z-index: 2; 130 } 131 .conts{ 132 width: 100%; 133 height: auto; 134 background: #fff; 135 } 136 textarea { 137 width: 687rpx; 138 } 139 .areas{ 140 height:315rpx; 141 font-size: 30rpx; 142 padding-top: 30rpx; 143 margin: 0 auto; 144 overflow: hidden; 145 position: relative; 146 } 147 .currentWordNumber{ 148 font-size: 28rpx; 149 position: absolute; 150 left: 0%; 151 bottom: 0rpx; 152 color: #c00; 153 } 154 .hint{ 155 font-size: 28rpx; 156 position: absolute; 157 top: 120rpx; 158 left: 30rpx; 159 color: #FF6600; 160 } 161 .btn { 162 width: 600rpx; 163 height: 80rpx; 164 line-height: 80rpx; 165 font-size: 30rpx; 166 color: #fff; 167 background: #c00; 168 position: fixed; 169 left:75rpx; 170 bottom: 37rpx; 171 } 172 button:after { 173 border: 0; 174 }
js：
1 const app = getApp(); 2 Page({ 3 data: { 4 staticImg: app.globalData.staticImg, 5 current: 0, 6 attitude: true, 7 time: true, 8 efficiency: true, 9 environment: true, 10 professional: true, 11 code:1, 12 code1:2, 13 userStars: [ 14 "../img/sx.png", 15 "../img/sx.png", 16 "../img/sx.png", 17 "../img/sx.png", 18 "../img/sx.png", 19 ], 20 wjxScore: 5, 21 // textarea 22 min: 5,//最少字數 23 max: 300, //最多字數 (根據自己需求改變) 24 pics: [], 25 }, 26 // 星星點擊事件 27 starTap: function (e) { 28 var that = this; 29 var index = e.currentTarget.dataset.index; // 獲取當前點擊的是第幾顆星星 30 var tempUserStars = this.data.userStars; // 暫存星星數組 31 var len = tempUserStars.length; // 獲取星星數組的長度 32 for (var i = 0; i < len; i++) { 33 if (i <= index) { // 小於等於index的是滿心 34 tempUserStars[i] = "../img/sx.png"; 35 that.setData({ 36 wjxScore: i + 1, 37 }) 38 } else { // 其他是空心 39 tempUserStars[i] = "../img/kx.png" 40 } 41 } 42 // 重新賦值就可以顯示了 43 that.setData({ 44 userStars: tempUserStars 45 }) 46 }, 47 // 標簽 48 label: function (e) { 49 console.log(e) 50 var that = this; 51 that.setData({ 52 attitude: !e.currentTarget.dataset.index 53 }) 54 }, 55 label1: function (e) { 56 console.log(e) 57 var that = this; 58 that.setData({ 59 time: !e.currentTarget.dataset.index 60 }) 61 }, 62 label2: function (e) { 63 console.log(e) 64 var that = this; 65 that.setData({ 66 efficiency: !e.currentTarget.dataset.index 67 }) 68 }, 69 label3: function (e) { 70 console.log(e) 71 var that = this; 72 that.setData({ 73 environment: !e.currentTarget.dataset.index 74 }) 75 }, 76 label4: function (e) { 77 console.log(e) 78 var that = this; 79 that.setData({ 80 professional: !e.currentTarget.dataset.index 81 }) 82 }, 83 // 留言 84 //字數限制 85 inputs: function (e) { 86 // 獲取輸入框的內容 87 var value = e.detail.value; 88 // 獲取輸入框內容的長度 89 var len = parseInt(value.length); 90 //最多字數限制 91 if (len > this.data.max) 92 return; 93 // 當輸入框內容的長度大於最大長度限制（max)時，終止setData()的執行 94 this.setData({ 95 currentWordNumber: len //當前字數 96 }); 97 }, 98 // 圖片 99 choose: function (e) {//這里是選取圖片的方法 100 var that = this; 101 var pics = that.data.pics; 102 wx.chooseImage({ 103 count: 5 - pics.length, // 最多可以選擇的圖片張數，默認9 104 sizeType: ['original', 'compressed'], // original 原圖，compressed 壓縮圖，默認二者都有 105 sourceType: ['album', 'camera'], // album 從相冊選圖，camera 使用相機，默認二者都有 106 success: function (res) { 107 var imgsrc = res.tempFilePaths; 108 pics = pics.concat(imgsrc); 109 console.log(pics); 110 // console.log(imgsrc); 111 that.setData({ 112 pics: pics, 113 // console.log(pics), 114 }); 115 }, 116 fail: function () { 117 // fail 118 }, 119 complete: function () { 120 // complete 121 } 122 }) 123 124 }, 125 uploadimg: function () {//這里觸發圖片上傳的方法 126 var pics = this.data.pics; 127 console.log(pics); 128 app.uploadimg({ 129 url: 'https://........',//這里是你圖片上傳的接口 130 path: pics//這里是選取的圖片的地址數組 131 }); 132 }, 133 onLoad: function (options) { 134 135 }, 136 // 刪除圖片 137 deleteImg: function (e) { 138 var pics = this.data.pics; 139 var index = e.currentTarget.dataset.index; 140 pics.splice(index, 1); 141 this.setData({ 142 pics: pics 143 }); 144 }, 145 // 預覽圖片 146 previewImg: function (e) { 147 //獲取當前圖片的下標 148 var index = e.currentTarget.dataset.index; 149 //所有圖片 150 var pics = this.data.pics; 151 wx.previewImage({ 152 //當前顯示圖片 153 current: pics[index], 154 //所有圖片 155 urls: pics 156 }) 157 }, 158 handleBtn(){ 159 wx:if(this.data.code==1){ 160 wx.showToast({ 161 title: '評價成功', 162 icon: 'succes', 163 duration: 1500, 164 mask: true, 165 success:function(){ 166 setTimeout(function(){ 167 wx.reLaunch({ 168 url: '../index/index' 169 }) 170 },1500) 171 } 172 }); 173 } else if (this.data.code1 == 2){ 174 console.log("111") 175 wx.showToast({ 176 title: '評價失敗', 177 image: '../img/fail.png', 178 duration: 1500, 179 mask: true 180 }) 181 } 182 } 183 })
這就是小編做的一個評論頁面，如果有什么瑕疵，請大家在評論給我指出，謝謝大家！！！！