微信小程序之评分页面
2024-06-01 05:19:02
首先给大家看看做好的效果图：
一、接下来我们说一下评分这个功能：
实际上就是一个简单的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 })
这就是小编做的一个评论页面，如果有什么瑕疵，请大家在评论给我指出，谢谢大家！！！！
转载于:https://www.cnblogs.com/kanglinen/p/10916944.html
微信小程序之评分页面相关推荐
- 【微信小程序】各种页面特效链接！
微信小程序:各种页面特效链接! 1.文字跑马灯效果: http://www.wxapp-union.com/portal.php?mod=view&aid=1038 2.触摸水波涟漪效果: h ...
- 微信小程序动态评分展示/五角星展示/半颗星展示/自定义长度展示
一.前言 项目中遇到的评分相关的需求其实还挺多.之前也写过网页中关于评分功能实现的文档.这次,是基于微信小程序开发而提炼出一个简单方便使用的方法,网页开发中同样可用.这次使用的还是字体,主要是字体这个 ...
- 微信小程序点击页面tab栏切换
微信小程序点击页面tab栏切换 wxml <view class="container"><view class="swiper-tab"&g ...
- 微信小程序开发教程第七章：微信小程序编辑名片页面开发
前面我们更新了六篇的微信小程序开发教程,现在更新第七章:微信小程序编辑名片页面开发,(第一二章:微信小程序开发教程,第三四章:微信小程序项目结构以及配置&微信小程序首页面开发,第五章:微信小程 ...
- Java Web项目，Android和微信小程序的初始页面配置
Java Web项目 我们在Eclipse里开了Java Web项目之后,Run As Tomcat或者Apache服务器,本地运行,如果直接用http://localhost:8080访问项目,会发 ...
- 手机按三角返回页面上一页_小猿圈微信小程序跳转页面都有哪些？
随着科技的进步互联网的发展,微信小程序逐渐成为了很多推广渠道的入口,但是因为很多做前端的小伙伴们不知道怎么去实现跳转页面,弄得不知所措,今天小猿圈前端讲师就给你讲解几种微信小程序跳转页面方法. 微信小 ...
- 微信小程序跳转页面问题
微信小程序跳转页面的方式: 1.跳转至tabBar页面,并关闭其他所有非 tabBar页面 wx.switchTab({ url: '路径' //url同app.json中配置的tabBar路径 }) ...
- 微信小程序获取当前页面url
微信小程序获取当前页面url 微信小程序获取当前页面的URL地址
- 微信小程序个人中心页面开发
目录 微信小程序创建项目配置底部导航栏 微信小程序滚动播放内容 微信小程序功能中心模块开发 微信小程序个人中心页面开发 微信小程序获取电话号码 微信小程序显示列表数据 微信小程序显示分页列表 微信小程 ...
最新文章
- Onekey Ghost找不到硬盘分区怎么办
- 中文转unicode，中文转bytes，unicode转bytes java实现
- 自定义 URL Scheme 完全指南
- Dynatrace成功扩展kubernetes全栈可观察性
- 配置Tomcat的server.xml以适应web-content文件系统的位置改变
- 第三方服务-极光推送
- 最好用图像处理库CxImage入门
- linux格式化分区error,linux格式化磁盘出错
- 简述软件测试自动化的作用,什么是自动化测试？了解一下~
- 过渡属性: transition
- Win10更新导致VMware Workstation Pro无法运行(解决+关闭Win10自动更新)
- 什么学习软件需要身份证验证_什么是两层身份验证，为什么我需要它？
- ubuntu 8.10安装配置经验(转载)
- 计算机的音标英语怎么说,电脑的英文怎么读标准发音
- 梦之旅游戏攻略html5,《梦之旅1：梦境》攻略
- java什么是classpath_Java 基础 - CLASSPATH 到底是什么
- 零极点是怎么产生的对环路的影响
- 徐家福对计算机科学发展的影响或作用,徐家福先生的两句话
- 世界十大著名海盗：有一个是中国美女
- 收银系统的硬件有哪些？