微信小程序 五星评分(包括半颗星评分)实例代码


Posted in Javascript onDecember 14, 2016

微信小程序 五星评分

一位同学说要写五星评分.要有半颗星的评分.

于是我做了个玩具.有空了做模块化,这代码看不下去了.

微信小程序 五星评分(包括半颗星评分)实例代码

代码:

1.index.wxml

<!--index.wxml-->

<block wx:for="{{stars}}">

 <image class="star-image" style="left: {{item*150}}rpx" src="{{key > item ?(key-item == 0.5?halfSrc:selectedSrc) : normalSrc}}">

  <view class="item" style="left:0rpx" data-key="{{item+0.5}}" bindtap="selectLeft"></view>

  <view class="item" style="left:75rpx" data-key="{{item+1}}" bindtap="selectRight"></view>

 </image>

</block>

2.index.wxss

.star-image {

 position: absolute;

 top: 50rpx;

 width: 150rpx;

 height: 150rpx;

 src: "../../images/normal.png";

}



.item {

 position: absolute;

 top: 50rpx;

 width: 75rpx;

 height: 150rpx;

}

3.index.js

//index.js

//CSDN微信小程序开发专栏:http://blog.csdn.net/column/details/13721.html

//获取应用实例

var app = getApp()

Page({

 data: {

  stars: [0, 1, 2, 3, 4],

  normalSrc: '../../images/normal.png',

  selectedSrc: '../../images/selected.png',

  halfSrc: '../../images/half.png',

  key: 0,//评分

 },

 onLoad: function () {

 },

 //点击右边,半颗星

 selectLeft: function (e) {

  var key = e.currentTarget.dataset.key

  if (this.data.key == 0.5 && e.currentTarget.dataset.key == 0.5) {

   //只有一颗星的时候,再次点击,变为0颗

   key = 0;

  }

  console.log("得" + key + "分")

  this.setData({

   key: key

  })



 },

 //点击左边,整颗星

 selectRight: function (e) {

  var key = e.currentTarget.dataset.key

  console.log("得" + key + "分")

  this.setData({

   key: key

  })

 }

})

代码下载

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
简单的无缝滚动程序-仅几行代码
May 08 Javascript
javaScript 数值型和字符串型之间的转换
Jul 25 Javascript
json 实例详细说明教程
Oct 31 Javascript
基于JQuery的列表拖动排序实现代码
Oct 01 Javascript
jquery实现图片左右切换的方法
May 07 Javascript
JavaScript中的anchor()方法使用详解
Jun 08 Javascript
javascript实现简单的页面右下角提示信息框
Jul 31 Javascript
JS Array创建及concat()split()slice()的使用方法
Jun 03 Javascript
Angular限制input框输入金额(是小数的话只保留两位小数点)
Jul 13 Javascript
在小程序Canvas中使用measureText的方法示例
Oct 19 Javascript
vue iview的菜单组件Mune 点击不高亮的解决方案
Nov 01 Javascript
vue使用vue-quill-editor富文本编辑器且将图片上传到服务器的功能
Jan 13 Vue.js
浅谈Javascript中的Label语句
Dec 14 #Javascript
详解jQuery中基本的动画方法
Dec 14 #Javascript
浅析上传头像示例及其注意事项
Dec 14 #Javascript
实现点击下箭头变上箭头来回切换的两种方法【推荐】
Dec 14 #Javascript
jQuery 常见小例汇总
Dec 14 #Javascript
javascript基本数据类型及类型检测常用方法小结
Dec 14 #Javascript
用v-html解决Vue.js渲染中html标签不被解析的问题
Dec 14 #Javascript
You might like
php 取得瑞年与平年的天数的代码
2009/08/10 PHP
PHP中的float类型使用说明
2010/07/27 PHP
图片上传即时显示缩略图的js代码
2009/05/27 Javascript
Extjs 几个方法的讨论
2010/01/28 Javascript
利用JS重写Cognos右键菜单的实现代码
2010/04/11 Javascript
JQUERY实现左侧TIPS滑进滑出效果示例
2013/06/27 Javascript
js的touch事件的实际引用
2014/10/13 Javascript
JavaScript 学习笔记之语句
2015/01/14 Javascript
无需 Flash 使用 jQuery 复制文字到剪贴板
2016/04/26 Javascript
jQuery实现iframe父窗体和子窗体的相互调用
2016/06/17 Javascript
jQuery简单注册和禁用全局事件的方法
2016/07/25 Javascript
jQuery层级选择器_动力节点节点Java学院整理
2017/07/04 jQuery
vue-router 权限控制的示例代码
2017/09/21 Javascript
Vue.js 中取得后台原生HTML字符串 原样显示问题的解决方法
2018/06/10 Javascript
vue根据值给予不同class的实例
2018/09/29 Javascript
vue-cli 目录结构详细讲解总结
2019/01/15 Javascript
vue keep-alive的简单总结
2021/01/25 Vue.js
[47:43]Alliance vs KG 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
简述Python中的进程、线程、协程
2016/03/18 Python
Python的re模块正则表达式操作
2016/05/25 Python
Linux上安装Python的PIL和Pillow库处理图片的实例教程
2016/06/23 Python
PyTorch线性回归和逻辑回归实战示例
2018/05/22 Python
Python PyAutoGUI模块控制鼠标和键盘实现自动化任务详解
2018/09/04 Python
python3 读取Excel表格中的数据
2018/10/16 Python
python格式化输出保留2位小数的实现方法
2019/07/02 Python
使用Python制作表情包实现换脸功能
2019/07/19 Python
python实现文件批量编码转换及注意事项
2019/10/14 Python
python使用openCV遍历文件夹里所有视频文件并保存成图片
2020/01/14 Python
瑞士最大的图书贸易公司:Orell Füssli
2019/12/28 全球购物
工程售后服务承诺书
2014/05/21 职场文书
学校安全生产月活动总结
2014/07/05 职场文书
幸福来敲门观后感
2015/06/04 职场文书
500字作文之难忘的同学
2019/12/20 职场文书
python操作xlsx格式文件并读取
2021/06/02 Python
Java循环队列与非循环队列的区别总结
2021/06/22 Java/Android
MySQL into_Mysql中replace与replace into用法案例详解
2021/09/14 MySQL