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


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 相关文章推荐
利用CSS、JavaScript及Ajax实现高效的图片预加载
Oct 16 Javascript
javascript根据像素点取位置示例
Jan 27 Javascript
详解js闭包
Sep 02 Javascript
jQuery 复合选择器应用的几个例子
Sep 11 Javascript
TinyMCE提交AjaxForm获取不到数据的解决方法
Mar 05 Javascript
JavaScript实现将xml转换成html table表格的方法
Apr 17 Javascript
BootStrap实现响应式布局导航栏折叠隐藏效果(在小屏幕、手机屏幕浏览时自动折叠隐藏)
Nov 30 Javascript
jQuery实现的鼠标响应缓冲动画效果示例
Feb 13 jQuery
vue返回上一页面时回到原先滚动的位置的方法
Dec 20 Javascript
node.js制作一个简单的登录拦截器
Feb 10 Javascript
详解使用mocha对webpack打包的项目进行&quot;冒烟测试&quot;的大致流程
Apr 27 Javascript
vue 解决IOS10低版本白屏的问题
Nov 17 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类相关知识点实例总结
2016/09/28 PHP
php常用字符函数实例小结
2016/12/29 PHP
Laravel使用Queue队列的技巧汇总
2019/09/02 PHP
有关javascript的性能优化 (repaint和reflow)
2013/04/12 Javascript
jquery插件开发注意事项小结
2013/06/04 Javascript
js实现弹窗插件功能实例代码分享
2013/12/12 Javascript
微信小程序 定义全局数据、函数复用、模版等详细介绍
2016/10/27 Javascript
Windows系统下安装Node.js的步骤图文详解
2016/11/15 Javascript
用v-html解决Vue.js渲染中html标签不被解析的问题
2016/12/14 Javascript
Vue组件通信实践记录(推荐)
2017/08/15 Javascript
JavaScript获取用户所在城市及地理位置
2018/04/21 Javascript
基于vue-router 多级路由redirect 重定向的问题
2018/09/03 Javascript
js+cavans实现图片滑块验证
2020/09/29 Javascript
解决ant design vue 表格a-table二次封装,slots渲染的问题
2020/10/28 Javascript
[36:09]Secret vs VG 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.24
2019/09/10 DOTA
python获取糗百图片代码实例
2013/12/18 Python
Python2.x和3.x下maketrans与translate函数使用上的不同
2015/04/13 Python
Python中你应该知道的一些内置函数
2017/03/31 Python
Python实现简单网页图片抓取完整代码实例
2017/12/15 Python
Python实现的求解最大公约数算法示例
2018/05/03 Python
使用anaconda的pip安装第三方python包的操作步骤
2018/06/11 Python
详解Python 多线程 Timer定时器/延迟执行、Event事件
2019/06/27 Python
Python中openpyxl实现vlookup函数的实例
2020/10/28 Python
HTML5 拖放功能实现代码
2016/07/14 HTML / CSS
JD Sports瑞典:英国领先的运动时尚商店
2018/01/28 全球购物
CHARLES & KEITH澳大利亚官网:新加坡时尚品牌
2019/01/22 全球购物
2019史上最全Database工程师题库
2015/12/06 面试题
实习生自我鉴定
2013/12/12 职场文书
出纳担保书范文
2014/04/02 职场文书
2014医学院领导干部四风对照检查材料思想汇报
2014/09/16 职场文书
上课玩手机的检讨书
2014/10/01 职场文书
道歉的话怎么说
2015/05/12 职场文书
公司费用报销管理制度
2015/08/04 职场文书
升学宴祝酒词
2015/08/11 职场文书
防震减灾主题班会
2015/08/14 职场文书
JavaScript的function函数详细介绍
2021/11/20 Javascript