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


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 相关文章推荐
jquery ajax提交表单数据的两种方式
Nov 24 Javascript
JS 实现Json查询的方法实例
Apr 12 Javascript
基于jQuery实现放大镜特效
Oct 19 Javascript
JS组件Bootstrap实现图片轮播效果
May 16 Javascript
深入理解jQuery之防止冒泡事件
May 24 Javascript
jQuery Ajax 加载数据时异步显示加载动画
Aug 01 Javascript
bootstrap table 数据表格行内修改的实现代码
Feb 13 Javascript
深究AngularJS——ng-checked(回写:带真实案例代码)
Jun 13 Javascript
three.js实现3D模型展示的示例代码
Dec 31 Javascript
jQuery中ajax获取数据赋值给页面的实例
Dec 31 jQuery
记录一次开发微信网页分享的步骤
May 07 Javascript
Electron实现应用打包、自动升级过程解析
Jul 07 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实现的简单mock json脚本分享
2015/02/10 PHP
ThinkPHP V2.2说明文档没有说明的那些事实例小结
2015/07/01 PHP
用 JavaScript 迁移目录
2006/12/18 Javascript
js中获取事件对象的方法小结
2011/03/13 Javascript
jquery easyui中treegrid用法的简单实例
2014/02/18 Javascript
javascript动态创建及删除元素的方法
2014/12/22 Javascript
JS动态修改iframe高度和宽度的方法
2015/04/01 Javascript
浅谈JavaScript for循环 闭包
2016/06/22 Javascript
原生js实现无缝轮播图效果
2017/01/11 Javascript
JavaScript原生节点操作小结
2017/01/17 Javascript
JSON与js对象序列化实例详解
2017/03/16 Javascript
JS封装的模仿qq右下角消息弹窗功能示例
2018/08/22 Javascript
ExtJs使用自定义插件动态保存表头配置(隐藏或显示)
2018/09/25 Javascript
跟老齐学Python之玩转字符串(3)
2014/09/14 Python
Windows系统下安装Python的SSH模块教程
2015/02/05 Python
python计算N天之后日期的方法
2015/03/31 Python
Python获取CPU、内存使用率以及网络使用状态代码
2018/02/08 Python
使用sklearn之LabelEncoder将Label标准化的方法
2018/07/11 Python
python定向爬虫校园论坛帖子信息
2018/07/23 Python
Python实现中值滤波去噪方式
2019/12/18 Python
Python如何使用27行代码绘制星星图
2020/07/20 Python
Python爬取数据并实现可视化代码解析
2020/08/12 Python
CSS3实现文本垂直排列的方法
2018/07/10 HTML / CSS
迪拜航空官方网站:flydubai
2017/04/20 全球购物
ALDO加拿大官网:加拿大女鞋品牌
2018/12/22 全球购物
男女钓鱼靴和甲板鞋:XTRATUF
2021/01/09 全球购物
机电一体化专业推荐信
2013/12/03 职场文书
会计系个人求职信范文分享
2013/12/20 职场文书
春节联欢晚会主持词
2014/03/24 职场文书
《飞向蓝天的恐龙》教学反思
2014/04/09 职场文书
好人好事演讲稿
2014/09/01 职场文书
学习焦裕禄同志为人民服务思想汇报
2014/09/10 职场文书
工程承包协议书
2014/10/20 职场文书
2015年企业团支部工作总结
2015/05/21 职场文书
HTML基础详解(下)
2021/10/16 HTML / CSS
带你了解Java中的ForkJoin
2022/04/28 Java/Android