首先给大家看看做好的效果图:
一、接下来我们说一下评分这个功能:
实际上就是一个简单的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 <