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


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 使用手册(四)
Sep 23 Javascript
不同编码的页面表单数据乱码问题解决方法
Feb 15 Javascript
JavaScript实现鼠标滑过处生成气泡的方法
May 16 Javascript
js实现3D图片逐张轮播幻灯片特效代码分享
Sep 09 Javascript
jQuery拖动布局其结果保存到数据库
Oct 09 Javascript
jQuery实现简单滚动动画效果
Apr 07 Javascript
原生JavaScript来实现对dom元素class的操作方法(推荐)
Aug 16 Javascript
js匿名函数使用&amp;传参(实例)
Sep 08 Javascript
浅谈vue中慎用style的scoped属性
Nov 28 Javascript
React路由管理之React Router总结
May 10 Javascript
一步一步实现Vue的响应式(对象观测)
Sep 02 Javascript
javascript 代码是如何被压缩的示例代码
May 06 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的宝库目录--PEAR
2006/10/09 PHP
php多个字符串替换成同一个的解决方法
2013/06/18 PHP
使用PHP实现下载CSS文件中的图片
2015/12/06 PHP
PhpStorm2020.1 安装 debug - Postman 调用的详细教程
2020/08/17 PHP
WordPress伪静态规则设置代码实例
2020/12/10 PHP
利用ASP发送和接收XML数据的处理方法与代码
2007/11/13 Javascript
JS获取浏览器版本及名称实现函数
2013/04/02 Javascript
JS简单限制textarea内输入字符数量的方法
2015/10/14 Javascript
JQuery导航菜单选择特效
2016/04/11 Javascript
原生js实现弹出层效果
2017/01/20 Javascript
NodeJS基础API搭建服务器详细过程记录
2017/04/01 NodeJs
基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果
2018/01/09 Javascript
Webpack 之 babel-loader文件预处理器详解
2018/03/23 Javascript
浅析Vue.js 中的条件渲染指令
2018/11/19 Javascript
微信小程序实现聊天室
2020/08/21 Javascript
ant design vue 表格table 默认勾选几项的操作
2020/10/31 Javascript
Python利用pyHook实现监听用户鼠标与键盘事件
2014/08/21 Python
跟老齐学Python之坑爹的字符编码
2014/09/28 Python
简单谈谈Python中的闭包
2016/11/30 Python
pandas使用get_dummies进行one-hot编码的方法
2018/07/10 Python
Python判断以什么结尾以什么开头的实例
2018/10/27 Python
python 利用文件锁单例执行脚本的方法
2019/02/19 Python
python-itchat 统计微信群、好友数量,及原始消息数据的实例
2019/02/21 Python
Django 使用easy_thumbnails压缩上传的图片方法
2019/07/26 Python
用pytorch的nn.Module构造简单全链接层实例
2020/01/14 Python
Django Serializer HiddenField隐藏字段实例
2020/03/31 Python
英国知名的护肤彩妆与时尚配饰大型综合零售电商:Unineed
2016/11/21 全球购物
严选全球尖货,立足香港:Bonpont宝盆
2018/07/24 全球购物
索尼巴西商店:Sony巴西
2019/06/21 全球购物
文言文形式的学生求职信
2013/12/03 职场文书
自我评价怎么写好呢?
2013/12/05 职场文书
奥巴马演讲稿
2014/01/08 职场文书
面试必备的求职信
2014/05/25 职场文书
2015小学语文教师个人工作总结
2015/05/20 职场文书
2015年宣传思想工作总结
2015/05/22 职场文书
python+opencv实现视频抽帧示例代码
2021/06/11 Python