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


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 相关文章推荐
javascript prototype原型操作笔记
Dec 07 Javascript
一个简单的jQuery计算器实现了连续计算功能
Jul 21 Javascript
javascript中Date对象的getDay方法使用指南
Dec 22 Javascript
JavaScript创建一个object对象并操作对象属性的用法
Mar 23 Javascript
JavaScript 模块的循环加载实现方法
Dec 13 Javascript
JavaScript字符串对象
Jan 14 Javascript
微信小程序实现点击图片旋转180度并且弹出下拉列表
Nov 27 Javascript
基于vue开发微信小程序mpvue-docs跳转页面功能
Apr 10 Javascript
BootstrapValidator实现表单验证功能
Nov 08 Javascript
element-ui tooltip修改背景颜色和箭头颜色的实现
Dec 16 Javascript
JavaScript实时更新当前的时间的示例代码
Jul 15 Javascript
JavaScript实现简单计时器
Jun 22 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对数组排序的简单实例
2013/12/25 PHP
盘点PHP和ASP.NET的10大对比!
2015/12/24 PHP
YiiFramework入门知识点总结(图文教程)
2015/12/28 PHP
PHP模板引擎Smarty内建函数foreach,foreachelse用法分析
2016/04/11 PHP
解决PHP程序运行时:Fatal error: Maximum execution time of 30 seconds exceeded in的错误提示
2016/11/25 PHP
ZendFramework2连接数据库操作实例
2017/04/18 PHP
PHP使用mysqli同时执行多条sql查询语句的实例
2019/03/22 PHP
PHP 计算两个时间段之间交集的天数示例
2019/10/24 PHP
基于jquery的页面划词搜索JS
2010/09/14 Javascript
js下判断 iframe 是否加载完成的完美方法
2010/10/26 Javascript
JavaScript通过字符串调用函数的实现方法
2015/03/18 Javascript
基于jquery实现鼠标左右拖动滑块滑动附源码下载
2015/12/23 Javascript
初识angular框架后的所思所想
2016/02/19 Javascript
基于cssSlidy.js插件实现响应式手机图片轮播效果
2016/08/30 Javascript
基于bootstrap-datetimepicker.js不支持IE8的快速解决方法
2016/11/07 Javascript
很棒的一组js图片轮播特效
2017/01/12 Javascript
JavaScript在form表单中使用button按钮实现submit提交方法
2017/01/23 Javascript
nodejs 搭建简易服务器的图文教程(推荐)
2017/07/18 NodeJs
[原创]js实现保存文本框内容为本地文件兼容IE,chrome,火狐浏览器
2018/02/14 Javascript
js判断复选框是否选中的方法示例【基于jQuery】
2019/10/10 jQuery
JS前端基于canvas给图片添加水印
2020/11/11 Javascript
Python发送Email方法实例
2014/08/21 Python
pyhton列表转换为数组的实例
2018/04/04 Python
python读取和保存图片5种方法对比
2018/09/12 Python
Python运维开发之psutil库的使用详解
2018/10/18 Python
Python拼接字符串的7种方式详解
2020/03/19 Python
解决Python数据可视化中文部分显示方块问题
2020/05/16 Python
Python加速程序运行的方法
2020/07/29 Python
实例讲解CSS3中的border-radius属性
2015/08/18 HTML / CSS
使用phonegap获取位置信息的实现方法
2017/03/31 HTML / CSS
L’AGENCE官网:加州女装品牌
2018/06/03 全球购物
编写一个类体现构造,公有,私有方法,静态,私有变量
2013/08/10 面试题
给排水工程师岗位职责
2013/11/21 职场文书
组织关系转移介绍信
2014/01/16 职场文书
市场营销专业大学生职业生涯规划文
2014/03/06 职场文书
采购求职信
2014/03/17 职场文书