微信小程序实现笑脸评分功能


Posted in Javascript onNovember 03, 2018

本文实例为大家分享了微信小程序实现笑脸评分的具体代码,供大家参考,具体内容如下

image方式实现的笑脸评分功能

微信小程序实现笑脸评分功能

由于我这里的图片使用的不是背景图,所以实现方法跟使用背景图的方式不同
你也可以使用wx:for来操作   由于微信小程序需要base64格式或者网图才能设置背景图  所以就没用背景图

首先这里放的是差中好评的三张图,首先进入页面进行评分时需要默认是好评  1.png表示的是未选中图片  2.png代表的是选中的图片   图片点击绑定了同一个函数

<view class='evaluation_top'>
<view class='ico' bindtap='change_color' data-id='1'>
<image class='ico_pace' src='../image/差评{{ico_index1}}.png' style='width:80rpx;height:80rpx; '></image>
差评
</view>
<view class='ico' bindtap='change_color' data-id='2'>
<image class='ico_pace' src='../image/中评{{ico_index2}}.png' style='width:80rpx;height:80rpx; '></image>
中评
</view>
<view class='ico' bindtap='change_color' data-id='3'>
<image class='ico_pace' src='../image/好评{{ico_index3}}.png' style='width:80rpx;height:80rpx; '></image>
好评
</view>
</view>

js:

Page({
/**
* 页面的初始数据  ico_index默认表示的是三张图片是否被选中的状态  face_type表示的是评分  差中好评分别对应分数为1,3,5 因为当前默认好评所以评分默认为5
*/
data: {
ico_index1:'1',
ico_index2: '1',
ico_index3: '2',
face_type: '5',
},

change_color:function(e){
var id = e.currentTarget.dataset.id;   //获取当前点击的是哪一个图片  通过wxml中data-id 来判断的
console.log(id);
if (id==1){             //如果此时点击的是第1张图片 第1张图片变成2.png, 则其他图片变成1.png ,且此时评分变为1  后面以此类推
this.setData({
ico_index1: '2',
ico_index2: '1',
ico_index3: '1',
face_type: '1'
})

}
if (id == 2) {
this.setData({
ico_index1: '1',
ico_index2: '2',
ico_index3: '1',
face_type:'3'
})


}
if (id == 3) {
this.setData({
ico_index1: '1',
ico_index2: '1',
ico_index3: '2',
face_type:'5'   //wxml中直接通过{{face_type}}模板语言来使用
})
}
},

})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用显卡加速,轻松把笔记本打造成取暖器的办法!
Apr 17 Javascript
javascript获取dom的下一个节点方法
Sep 05 Javascript
Javascript 赋值机制详解
Nov 23 Javascript
浅析AngularJS Filter用法
Dec 28 Javascript
详解JavaScript 中getElementsByName在IE中的注意事项
Feb 21 Javascript
JScript实现表格的简单操作
Aug 15 Javascript
js实现控制文件拖拽并获取拖拽内容功能
Feb 17 Javascript
详解从买域名到使用pm2部署node.js项目全过程
Mar 07 Javascript
Postman模拟发送带token的请求方法
Mar 31 Javascript
实现elementUI表单的全局验证的方法步骤
Apr 29 Javascript
Electron vue的使用教程图文详解
Jul 05 Javascript
JS原形与原型链深入详解
May 09 Javascript
小程序实现五星点评效果
Nov 03 #Javascript
微信小程序实现星星评价效果
Nov 02 #Javascript
使用Object.defineProperty如何巧妙找到修改某个变量的准确代码位置
Nov 02 #Javascript
微信小程序实现点赞、取消点赞功能
Nov 02 #Javascript
Vue利用History记录上一页面的数据方法实例
Nov 02 #Javascript
vue如何根据网站路由判断页面主题色详解
Nov 02 #Javascript
小程序实现列表点赞功能
Nov 02 #Javascript
You might like
PHP中常用的转义函数
2014/02/28 PHP
PHP动态规划解决0-1背包问题实例分析
2015/03/23 PHP
调试WordPress中定时任务的相关PHP脚本示例
2015/12/10 PHP
PHP将字符串首字母大小写转换的实例
2017/01/21 PHP
关于COOKIE个数与大小的问题
2011/01/17 Javascript
js 页面关闭前的出现提示的实现代码
2011/05/25 Javascript
JQuery 返回布尔值Is()条件判断方法代码
2012/05/14 Javascript
通过正则表达式实现表单验证是否为中文
2014/02/18 Javascript
js实现网页倒计时、网站已运行时间功能的代码3例
2014/04/14 Javascript
jQuery基础知识小结
2014/12/22 Javascript
js限制文本框的输入内容代码分享(3类)
2015/08/20 Javascript
JavaScript的代码编写格式规范指南
2015/12/07 Javascript
深入解析Javascript闭包的功能及实现方法
2016/07/10 Javascript
AngularJS 作用域详解及示例代码
2016/08/17 Javascript
微信小程序购物商城系统开发系列-工具篇的介绍
2016/11/21 Javascript
JavaScript构建自己的对象示例
2016/11/29 Javascript
python实现ftp客户端示例分享
2014/02/17 Python
python 多进程通信模块的简单实现
2014/02/20 Python
Python入门篇之字符串
2014/10/17 Python
用C++封装MySQL的API的教程
2015/05/06 Python
Python合并两个字典的常用方法与效率比较
2015/06/17 Python
Django框架的使用教程路由请求响应的方法
2018/07/03 Python
python之验证码生成(gvcode与captcha)
2019/01/02 Python
python 使用pandas计算累积求和的方法
2019/02/08 Python
python中的print()输出
2019/04/12 Python
对pytorch中的梯度更新方法详解
2019/08/20 Python
Python Django搭建网站流程图解
2020/06/13 Python
canvas绘制表情包的示例代码
2018/07/09 HTML / CSS
HTML5 通过Vedio标签实现视频循环播放的示例代码
2020/08/05 HTML / CSS
英国最大的美妆产品在线零售商之一:Beauty Bay
2017/09/29 全球购物
幼儿园托班开学寄语
2014/01/18 职场文书
刑事辩护授权委托书
2014/09/13 职场文书
2014年手术室工作总结
2014/11/26 职场文书
上市公司财务总监岗位职责
2015/04/03 职场文书
MySQL高级进阶sql语句总结大全
2022/03/16 MySQL
php解析非标准json、非规范json的方式实例
2022/05/10 PHP