微信小程序之评分页面

首先给大家看看做好的效果图：

 

一、接下来我们说一下评分这个功能：

实际上就是一个简单的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       <