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


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 相关文章推荐
左侧是表头的JS表格控件(自写,网上没有的)
Jun 04 Javascript
javascript教程:关于if简写语句优化的方法
May 17 Javascript
jQuery实现倒计时按钮功能代码分享
Sep 03 Javascript
JavaScript对Cookie进行读写操作实例
Jul 25 Javascript
jQuery基本选择器(实例及表单域value的获取方法)
May 20 Javascript
AngularJS入门教程之数据绑定原理详解
Nov 02 Javascript
JavaScript字符串对象(string)基本用法示例
Jan 18 Javascript
js断点调试心得分享(必看篇)
Dec 08 Javascript
小程序实现选择题选择效果
Nov 04 Javascript
基于mpvue搭建微信小程序项目框架的教程详解
Apr 10 Javascript
使用Webpack提升Vue.js应用程序的4种方法(翻译)
Oct 09 Javascript
小程序点餐界面添加购物车左右摆动动画
Sep 23 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/10/29 PHP
推荐25款php中非常有用的类库
2014/09/29 PHP
php版微信支付api.mch.weixin.qq.com域名解析慢原因与解决方法
2016/10/12 PHP
Thinkphp结合ajaxFileUpload实现异步图片传输示例
2017/03/13 PHP
JavaScript高级程序设计 阅读笔记(十八) js跨平台的事件
2012/08/14 Javascript
解析ScrollPic在ie8下只滚动一遍,然后变为空白 ie6,ie7,chrome,firefox正常
2013/06/26 Javascript
解决jquery1.9不支持browser对象的问题
2013/11/13 Javascript
JavaScript中的undefined学习总结
2013/11/30 Javascript
基于JavaScript如何制作遮罩层对话框
2016/01/26 Javascript
浅谈JavaScript函数的四种存在形态
2016/06/08 Javascript
微信小程序 数据访问实例详解
2016/10/08 Javascript
JavaScript将base64图片转换成formData并通过AJAX提交的实现方法
2016/10/24 Javascript
详解使用React进行组件库开发
2018/02/06 Javascript
vue移动端UI框架实现QQ侧边菜单组件
2018/03/09 Javascript
vue中组件的过渡动画及实现代码
2018/11/21 Javascript
使用FormData实现上传多个文件
2018/12/04 Javascript
在Lighttpd服务器中运行Django应用的方法
2015/07/22 Python
python爬虫实战之最简单的网页爬虫教程
2017/08/13 Python
Python不同目录间进行模块调用的实现方法
2019/01/29 Python
python实现AES加密解密
2019/03/28 Python
python远程邮件控制电脑升级版
2019/05/23 Python
利用pyecharts实现地图可视化的例子
2019/08/12 Python
Windows10下 python3.7 安装 facenet的教程
2019/09/10 Python
使用CSS3的font-face字体嵌入样式的方法讲解
2016/05/13 HTML / CSS
Snapfish英国:在线照片打印和个性化照片礼品
2017/01/13 全球购物
俄罗斯披萨、寿司和面食送货到家服务:2 Берега
2019/12/15 全球购物
单位未婚证明范本
2014/01/18 职场文书
迎新晚会邀请函
2014/02/01 职场文书
歌唱比赛主持词
2014/03/18 职场文书
2014年保卫科工作总结
2014/12/05 职场文书
党员评议自我评价
2015/03/03 职场文书
2015年司法局工作总结
2015/05/22 职场文书
追讨欠款律师函
2015/06/24 职场文书
导游词之四川武侯祠
2019/10/21 职场文书
创业计划书之暑假培训班
2019/11/09 职场文书
python实现A*寻路算法
2021/06/13 Python