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


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 相关文章推荐
从URL中提取参数与将对象转换为URL查询参数的实现代码
Jan 12 Javascript
js确定对象类型方法
Mar 30 Javascript
javascript 控制input只允许输入的各种指定内容
Jun 19 Javascript
微信企业号开发之微信考勤百度地图定位
Sep 11 Javascript
论JavaScript模块化编程
Mar 07 Javascript
Javascript表单特效之十大常用原理性样例代码大总结
Jul 12 Javascript
jQuery调用Webservice传递json数组的方法
Aug 06 Javascript
js 自带的sort() 方法全面了解
Aug 16 Javascript
Bootstrap一款超好用的前端框架
Sep 25 Javascript
Vue $mount实战之实现消息弹窗组件
Apr 22 Javascript
关于layui 下拉列表的change事件详解
Sep 20 Javascript
js实现移动端图片滑块验证功能
Sep 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
使用eAccelerator加密PHP程序
2008/10/03 PHP
php 字符串中的\n换行符无效、不能换行的解决方法
2014/04/02 PHP
CI配置多数据库访问的方法
2016/03/28 PHP
php微信公众号开发之现金红包
2018/04/16 PHP
优化网页之快速的呈现我们的网页
2007/06/29 Javascript
IE和Firefox之间在JavaScript语法上的差异
2016/04/22 Javascript
简单实现Vue的observer和watcher
2016/12/21 Javascript
微信小程序 自己制作小组件实例详解
2016/12/22 Javascript
微信小程序 在线支付功能的实现
2017/03/14 Javascript
Vue axios 中提交表单数据(含上传文件)
2017/07/06 Javascript
Vue Cli与BootStrap结合实现表格分页功能
2017/08/18 Javascript
javascript中join方法实例讲解
2019/02/21 Javascript
ES6中Symbol、Set和Map用法详解
2019/08/20 Javascript
详解Webpack4多页应用打包方案
2020/07/16 Javascript
[46:50]Liquid vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python break语句详解
2014/03/11 Python
Python迭代器与生成器基本用法分析
2018/07/26 Python
python开启debug模式的方法
2019/06/27 Python
Python中Unittest框架的具体使用
2019/08/27 Python
pytorch实现线性拟合方式
2020/01/15 Python
python中slice参数过长的处理方法及实例
2020/12/15 Python
matplotlib源码解析标题实现(窗口标题,标题,子图标题不同之间的差异)
2021/02/22 Python
基于Pytorch版yolov5的滑块验证码破解思路详解
2021/02/25 Python
美国知名男士服饰品牌:Brooks Brothers(布克兄弟)
2016/08/25 全球购物
一个C/C++编程面试题
2013/11/10 面试题
盛大二次面试题
2016/11/18 面试题
最新优秀教师个人先进事迹材料
2014/05/06 职场文书
大学生学雷锋活动总结
2014/06/26 职场文书
校园安全广播稿范文
2014/09/25 职场文书
我们的节日中秋节活动总结
2015/03/23 职场文书
2015年学校党建工作总结
2015/05/19 职场文书
运动会3000米加油稿
2015/07/21 职场文书
2016年猴年新春致辞
2015/08/01 职场文书
2015年行政管理人员工作总结
2015/10/15 职场文书
当你焦虑迷茫时,请读读这6句话
2019/07/24 职场文书
html+css实现滚动到元素位置显示加载动画效果
2021/08/02 HTML / CSS