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


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的日期选择控件
Oct 27 Javascript
JavaScript高级程序设计 错误处理与调试学习笔记
Sep 10 Javascript
javascript预加载图片、css、js的方法示例介绍
Oct 14 Javascript
jquery中子元素和后代元素的区别示例介绍
Apr 02 Javascript
javascript实现window.print()去除页眉页脚
Dec 30 Javascript
js Canvas实现的日历时钟案例分享
Dec 25 Javascript
详解Node.js串行化流程控制
May 04 Javascript
Canvas实现微信红包照片效果
Aug 21 Javascript
小程序实现层叠卡片滑动效果
Aug 26 Javascript
vue axios封装httpjs,接口公用配置拦截操作
Aug 11 Javascript
jquery简易手风琴插件的封装
Oct 13 jQuery
antd日期选择器禁止选择当天之前的时间操作
Oct 29 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
phpmyadmin的#1251问题
2006/11/25 PHP
php下将图片以二进制存入mysql数据库中并显示的实现代码
2010/05/27 PHP
PHP遍历某个目录下的所有文件和子文件夹的实现代码
2013/06/28 PHP
php模仿asp Application对象在线人数统计实现方法
2015/01/04 PHP
php遍历解析xml字符串的方法
2016/05/05 PHP
PHP读书笔记整理_结构语句详解
2016/07/01 PHP
JavaScript 函数调用规则
2009/09/14 Javascript
JavaScript中使用构造器创建对象无需new的情况说明
2012/03/01 Javascript
js遍历td tr等html元素
2012/12/13 Javascript
jQuery表格插件ParamQuery简单使用方法示例
2013/12/05 Javascript
JS控制图片翻转示例代码(兼容firefox,ie,chrome)
2013/12/19 Javascript
初步认识JavaScript函数库jQuery
2015/06/18 Javascript
基于javascript实现彩票随机数生成(升级版)
2020/04/17 Javascript
炫酷的js手风琴效果
2016/10/13 Javascript
文件上传的几个示例分享【推荐】
2016/12/16 Javascript
EasyUI的DataGrid每行数据添加操作按钮的实现代码
2017/08/22 Javascript
Vue项目分环境打包的实现步骤
2018/04/02 Javascript
JS中封装axios来管控api的2种方式
2019/09/11 Javascript
JS代码检查工具ESLint介绍与使用方法
2020/02/04 Javascript
Python获取当前时间的方法
2014/01/14 Python
Python输出PowerPoint(ppt)文件中全部文字信息的方法
2015/04/28 Python
python通过函数属性实现全局变量的方法
2015/05/16 Python
python 地图经纬度转换、纠偏的实例代码
2018/08/06 Python
python占位符输入方式实例
2019/05/27 Python
python实现简单聊天室功能 可以私聊
2019/07/12 Python
pip安装tensorflow的坑的解决
2020/04/19 Python
西班牙灯具网上商店:Lampara.es
2018/06/05 全球购物
香港交友网站:be2香港
2018/07/22 全球购物
致跳高运动员加油稿
2014/02/12 职场文书
材料工程专业毕业生求职信
2014/03/04 职场文书
公司接待方案
2014/03/08 职场文书
公司承诺书怎么写
2014/05/24 职场文书
村党支部公开承诺书
2014/05/29 职场文书
执行力心得体会范文
2016/01/11 职场文书
入党申请书怎么写?
2019/06/11 职场文书
Python自动化爬取天眼查数据的实现
2021/06/15 Python