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


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 相关文章推荐
映彩衣的js随笔(js图片切换效果)
Jul 31 Javascript
Jquery中的CheckBox、RadioButton、DropDownList的取值赋值实现代码
Oct 12 Javascript
JQuery AJAX 中文乱码问题解决
Jun 05 Javascript
jquery+javascript编写国籍控件
Feb 12 Javascript
JavaScript实现添加及删除事件的方法小结
Aug 04 Javascript
javascript+HTML5的Canvas实现Lab单车动画效果
Aug 07 Javascript
瀑布流的实现方式(原生js+jquery+css3)
Jun 28 Javascript
AngularJS模仿Form表单提交的实现代码
Dec 08 Javascript
$.browser.msie 为空或不是对象问题的多种解决方法
Mar 19 Javascript
JS常见构造模式实例对比分析
Aug 27 Javascript
使用jquery Ajax实现上传附件功能
Oct 23 jQuery
JavaScript的变量声明与声明提前用法实例分析
Nov 26 Javascript
浅谈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
生成缩略图
2006/10/09 PHP
php数组合并与拆分实例分析
2015/06/12 PHP
CI框架(ajax分页,全选,反选,不选,批量删除)完整代码详解
2016/11/01 PHP
php实现对文件压缩简单的方法
2019/09/29 PHP
用JavaScript实现仿Windows关机效果
2007/03/10 Javascript
jquery获取table中的某行全部td的内容方法
2013/03/08 Javascript
jQuery DOM操作实例
2014/03/05 Javascript
深入理解JavaScript系列(22):S.O.L.I.D五大原则之依赖倒置原则DIP详解
2015/03/05 Javascript
JavaScript通过function定义对象并给对象添加toString()方法实例分析
2015/03/23 Javascript
超漂亮的jQuery图片轮播特效
2015/11/24 Javascript
jquery插件uploadify多图上传功能实现代码
2016/08/12 Javascript
原生JS实现匀速图片轮播动画
2016/10/18 Javascript
Bootstrap实现导航栏的2种方式
2016/11/28 Javascript
vue2滚动条加载更多数据实现代码
2017/01/10 Javascript
微信小程序 生命周期和页面的生命周期详细介绍
2017/01/19 Javascript
Avalonjs 实现简单购物车功能(实例代码)
2017/02/07 Javascript
微信小程序 五星评分的实现实例
2017/08/04 Javascript
AngularJS 应用模块化的使用
2018/04/04 Javascript
JS实现显示当前日期的实例代码
2018/07/03 Javascript
[01:15:16]DOTA2-DPC中国联赛 正赛 Elephant vs Aster BO3 第一场 1月26日
2021/03/11 DOTA
解决windows下Sublime Text 2 运行 PyQt 不显示的方法分享
2014/06/18 Python
在Python的列表中利用remove()方法删除元素的教程
2015/05/21 Python
Python利用Beautiful Soup模块创建对象详解
2017/03/27 Python
Python 类的特殊成员解析
2018/06/20 Python
pygame实现俄罗斯方块游戏
2018/06/26 Python
python自动发送测试报告邮件功能的实现
2019/01/22 Python
pytorch标签转onehot形式实例
2020/01/02 Python
浅谈多卡服务器下隐藏部分 GPU 和 TensorFlow 的显存使用设置
2020/06/30 Python
Python性能测试工具Locust安装及使用
2020/12/01 Python
Python用Jira库来操作Jira
2020/12/28 Python
美国现代家具和家居商店:Apt2B
2016/08/29 全球购物
军人违纪检讨书
2014/02/04 职场文书
工作保证书怎么写
2015/02/28 职场文书
小区保洁员岗位职责
2015/04/10 职场文书
病危通知单
2015/04/17 职场文书
微信小程序 WeUI扩展组件库的入门教程
2022/04/21 Javascript