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

2018-11-03 45 面壁思过程

本文实例为大家分享了微信小程序实现笑脸评分的具体代码,供大家参考,具体内容如下

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代码
Mar 05 45
javascript实现存储hmtl字符串示例
Apr 25 43
jquery实现动态操作select选中
Feb 11 43
D3.js实现简洁实用的动态仪表盘的示例
Apr 04 35
详解JS转换数值函数Number()、parseInt()、parseFloat()
Aug 24 51
详解KOA2如何手写中间件(装饰器模式)
Oct 11 49
ES6 Promise对象的应用实例分析
Jun 27 50
手机访问当前页面