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


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 相关文章推荐
取得传值的函数
Oct 27 Javascript
Javascript 解疑
Nov 11 Javascript
jQuery学习7 操作JavaScript对象和集合的函数
Feb 07 Javascript
jquery在Chrome下获取图片的长宽问题解决
Mar 20 Javascript
checkbox设置复选框的只读效果不让用户勾选
Aug 12 Javascript
jQuery浏览器CSS3特写兼容实例
Jan 19 Javascript
javascript实现图像循环明暗变化的方法
Feb 25 Javascript
javascript实现验证IP地址等相关信息代码
May 10 Javascript
vue使用stompjs实现mqtt消息推送通知
Jun 22 Javascript
微信小程序-getUserInfo回调的实例详解
Oct 27 Javascript
浅谈vue引用静态资源需要注意的事项
Sep 28 Javascript
JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等属性学习笔记
Jul 15 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
兼容firefox,chrome的网页灰度效果
2011/08/08 PHP
php curl 伪造IP来源的实例代码
2012/11/01 PHP
php验证手机号码(支持归属地查询及编码为UTF8)
2013/02/01 PHP
PHPMailer邮件发送的实现代码
2013/05/04 PHP
PHP实现把文本中的URL转换为链接的auolink()函数分享
2014/07/29 PHP
javascript 动态参数判空操作
2008/12/22 Javascript
javascript 随机展示头像实现代码
2011/12/06 Javascript
jQuery根据纬度经度查看地图处理程序
2013/05/08 Javascript
js禁止回车提交表单的示例代码
2013/12/23 Javascript
jQuery.prop() 使用详解
2015/07/19 Javascript
javascript常用函数(1)
2015/11/04 Javascript
JS正则匹配URL网址的方法(可匹配www,http开头的一切网址)
2017/01/06 Javascript
搭建vue开发环境
2018/07/19 Javascript
使用JavaScript保存文本文件到本地的两种方法
2019/01/22 Javascript
详解如何在Vue项目中导出Excel
2019/04/19 Javascript
js Array.slice的8种不同用法示例
2019/07/10 Javascript
ES6之Proxy的get方法详解
2019/10/11 Javascript
[03:10]超级美酒第四天 fy拉比克秀 大合集
2018/06/05 DOTA
python中文乱码的解决方法
2013/11/04 Python
使用Python读写及压缩和解压缩文件的示例
2016/07/08 Python
python中使用xlrd读excel使用xlwt写excel的实例代码
2018/01/31 Python
Python实现带下标索引的遍历操作示例
2019/05/30 Python
Python队列RabbitMQ 使用方法实例记录
2019/08/05 Python
python获取指定日期范围内的每一天,每个月,每季度的方法
2019/08/08 Python
redis数据库及与python交互用法简单示例
2019/11/01 Python
Python面向对象魔法方法和单例模块代码实例
2020/03/25 Python
台湾SHOPRO购物行家:亚洲首创影视.3C.家电.优质购物平台
2018/05/07 全球购物
大学自我鉴定范文
2013/12/26 职场文书
关于旷工的检讨书
2014/02/02 职场文书
黄继光的英雄事迹材料
2014/02/13 职场文书
股东合作协议书
2014/04/14 职场文书
大学应届毕业生求职信
2014/05/24 职场文书
反对四风问题自我剖析材料
2014/09/29 职场文书
2014七年级班主任工作总结
2014/12/05 职场文书
小平小道观后感
2015/06/09 职场文书
Win11 KB5015814遇安装失败 影响开始菜单性能解决方法
2022/07/15 数码科技