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


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 可以拖动的div实现代码 脚本之家修正版
Jun 26 Javascript
js利用与或运算符优先级实现if else条件判断表达式
Apr 15 Javascript
本地对象Array的原型扩展实现代码
Dec 04 Javascript
避免回车键导致的页面无意义刷新的解决方法
Apr 12 Javascript
一个简单的jquery的多选下拉框(自写)
May 05 Javascript
JS 实现列表与多选框选择附预览动画
Oct 29 Javascript
js 连续赋值的简单实现
Jun 13 Javascript
Angular表单验证实例详解
Oct 20 Javascript
vuejs+element-ui+laravel5.4上传文件的示例代码
Aug 12 Javascript
js链表操作(实例讲解)
Aug 29 Javascript
vue + typescript + video.js实现 流媒体播放 视频监控功能
Jul 07 Javascript
vue-quill-editor插入图片路径太长问题解决方法
Jan 08 Vue.js
小程序实现五星点评效果
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程序效率优化的一些策略小结
2010/07/17 PHP
php使用curl存储cookie的示例
2014/03/31 PHP
使用php方法curl抓取AJAX异步内容思路分析及代码分享
2014/08/25 PHP
php中文繁体和简体相互转换的方法
2015/03/21 PHP
Yii框架弹出窗口组件CJuiDialog用法分析
2017/01/07 PHP
php微信公众号开发之欢迎老朋友
2018/10/20 PHP
深入浅析安装PhpStorm并激活的步骤详解
2020/09/17 PHP
Locate a File Using a File Open Dialog Box
2007/06/18 Javascript
javascript KeyDown、KeyPress和KeyUp事件的区别与联系
2009/12/03 Javascript
javascript处理table表格的代码
2010/12/06 Javascript
基于JQuery实现CheckBox全选全不选
2011/06/27 Javascript
用js来定义浏览器中一个左右浮动元素相对于页面主体宽度的位置的函数
2012/01/21 Javascript
js函数参数设置默认值的一种变通实现方法
2014/05/26 Javascript
Bootstrap3使用typeahead插件实现自动补全功能
2016/07/07 Javascript
Javascript 获取鼠标当前的位置实现方法
2016/10/27 Javascript
JS实现json的序列化和反序列化功能示例
2017/06/13 Javascript
基于匀速运动的实例讲解(侧边栏,淡入淡出)
2017/10/17 Javascript
基于vue-ssr服务端渲染入门详解
2018/01/08 Javascript
angular 服务随记小结
2019/05/06 Javascript
解决vue单页面修改样式无法覆盖问题
2019/08/05 Javascript
原生javascript单例模式的应用实例分析
2020/02/23 Javascript
vue实现放大镜效果
2020/09/17 Javascript
[01:09]2014DOTA2国际邀请赛 TI4西雅图DOTA2 中国美女coser加油助威
2014/07/20 DOTA
[01:00]选手抵达华西村 整装待发备战2016国际邀请赛中国区预选赛
2016/06/25 DOTA
Python使用面向对象方式创建线程实现12306售票系统
2015/12/24 Python
Python内建数据结构详解
2016/02/03 Python
使用python判断你是青少年还是老年人
2018/11/29 Python
python 生成器需注意的小问题
2020/09/29 Python
Windows环境下Python3.6.8 importError: DLLload failed:找不到指定的模块
2020/11/01 Python
迪斯尼商品官方网站:ShopDisney
2016/08/01 全球购物
瑞典手机壳品牌:Richmond & Finch
2018/04/28 全球购物
欧缇丽加拿大官方网站:Caudalie加拿大
2019/07/18 全球购物
Sql面试题
2013/03/20 面试题
行政部工作岗位职责范本
2014/03/05 职场文书
大学生创业,为什么都会选择快餐饮?
2019/08/08 职场文书
教师实习自我鉴定总结
2019/08/20 职场文书