微信小程序之评分页面
首先给大家看看做好的效果图：
一、接下来我们说一下评分这个功能：
实际上就是一个简单的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 })
这就是小编做的一个评论页面，如果有什么瑕疵，请大家在评论给我指出，谢谢大家！！！！
