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


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 用原型继承来实现对象系统
Mar 22 Javascript
JavaScript下通过的XMLHttpRequest发送请求的代码
Jun 28 Javascript
Node.js生成HttpStatusCode辅助类发布到npm
Apr 09 Javascript
js控制淡入淡出示例代码
Nov 12 Javascript
js将字符串转成正则表达式的实现方法
Nov 13 Javascript
jquery实现点击页面计算点击次数
Jan 23 Javascript
Javascript中使用parseInt函数需要注意的问题
Apr 02 Javascript
JavaScript中的cacheStorage使用详解
Jul 29 Javascript
JS中常用的正则表达式
Sep 29 Javascript
在Vue中获取组件声明时的name属性方法
Sep 12 Javascript
js实现类似iphone的网页滑屏解锁功能示例【附源码下载】
Jun 10 Javascript
解决vue v-for src 图片路径问题 404
Nov 12 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/05/10 PHP
php初始化对象和析构函数的简单实例
2014/03/11 PHP
php压缩和解压缩字符串的方法
2015/03/14 PHP
在Mac OS的PHP环境下安装配置MemCache的全过程解析
2016/02/15 PHP
laravel5.5安装jwt-auth 生成token令牌的示例
2019/10/24 PHP
JavaScript中变量提升 Hoisting
2012/07/03 Javascript
js星星评分效果
2014/07/24 Javascript
jQuery实现tag便签去重效果的方法
2015/01/20 Javascript
在Javascript中处理字符串之big()方法的使用
2015/06/08 Javascript
教你如何终止JQUERY的$.AJAX请求
2016/02/23 Javascript
jQuery原理系列-css选择器的简单实现
2016/06/07 Javascript
JS遍历数组和对象的区别及递归遍历对象、数组、属性的方法详解
2016/06/14 Javascript
jquery hover 不停闪动问题的解决方法(亦为stop()的使用)
2017/02/10 Javascript
JS实现浏览器打印、打印预览示例
2017/02/28 Javascript
vue基于Element构建自定义树的示例代码
2017/09/19 Javascript
JavaScript求一组数的最小公倍数和最大公约数常用算法详解【面向对象,回归迭代和循环】
2018/05/07 Javascript
JS实现图片切换效果
2018/11/17 Javascript
在移动端使用vue-router和keep-alive的方法示例
2018/12/02 Javascript
no-vnc和node.js实现web远程桌面的完整步骤
2019/08/11 Javascript
python+django加载静态网页模板解析
2017/12/12 Python
python基于ID3思想的决策树
2018/01/03 Python
Django分页查询并返回jsons数据(中文乱码解决方法)
2018/08/02 Python
Linux下Pycharm、Anaconda环境配置及使用踩坑
2018/12/19 Python
pandas 选取行和列数据的方法详解
2019/08/08 Python
详解Python3迁移接口变化采坑记
2019/10/11 Python
Python命令行click参数用法解析
2019/12/19 Python
python可视化text()函数使用详解
2020/02/11 Python
python实现的分层随机抽样案例
2020/02/25 Python
关于Python字符串显示u...的解决方式
2020/03/06 Python
劳资人员岗位职责
2013/12/19 职场文书
集体婚礼证婚词
2014/01/13 职场文书
列车长先进事迹材料
2014/01/25 职场文书
2015新年寄语(一句话)
2014/12/08 职场文书
高校自主招生自荐信2015
2015/03/04 职场文书
2015年社会治安综合治理工作总结
2015/04/10 职场文书
酒店厨房管理制度
2015/08/06 职场文书