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


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 相关文章推荐
MC Dialog js弹出层 完美兼容多浏览器(5.6更新)
May 06 Javascript
关于js内存泄露的一个好例子
Dec 09 Javascript
解决json日期格式问题的3种方法
Feb 02 Javascript
NODE.JS加密模块CRYPTO常用方法介绍
Jun 05 Javascript
jQuery简单实现title提示效果示例
Aug 01 Javascript
关于微信上网页图片点击全屏放大效果
Dec 19 Javascript
简单易懂的天气插件(代码分享)
Feb 04 Javascript
详解vue-cli构建项目反向代理配置
Sep 07 Javascript
axios进阶实践之利用最优雅的方式写ajax请求
Dec 20 Javascript
vue.js实现只弹一次弹框
Jan 29 Javascript
Element的el-tree控件后台数据结构的生成以及方法的抽取
Mar 05 Javascript
js用正则表达式筛选年月日的实例方法
Jan 04 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
如何对PHP程序中的常见漏洞进行攻击(上)
2006/10/09 PHP
将一维或多维的数组连接成一个字符串的php代码
2010/08/08 PHP
openflashchart 2.0 简单案例php版
2012/05/21 PHP
php对二维数组进行相关操作(排序、转换、去空白等)
2015/11/04 PHP
js模拟弹出效果代码修正版
2008/08/07 Javascript
JavaScript 高级篇之DOM文档,简单封装及调用、动态添加、删除样式(六)
2012/04/07 Javascript
js统计录入文本框中字符的个数并加以限制不超过多少
2014/05/23 Javascript
javascript使用window.open提示“已经计划系统关机”的原因
2014/08/15 Javascript
浅析javascript操作 cookie对象
2014/12/26 Javascript
用svg制作富有动态的tooltip
2015/07/17 Javascript
jquery-tips悬浮提示插件分享
2015/07/31 Javascript
浅谈Node.js 沙箱环境
2018/05/15 Javascript
vue前后分离调起微信支付
2019/07/29 Javascript
详解vue beforeRouteEnter 异步获取数据给实例问题
2019/08/09 Javascript
微信小程序制作扭蛋机代码实例
2019/09/24 Javascript
vue-router的钩子函数用法实例分析
2019/10/26 Javascript
详解vue页面首次加载缓慢原因及解决方案
2019/11/06 Javascript
jquery实现轮播图特效
2020/04/12 jQuery
基于elementUI竖向表格、和并列的案例
2020/10/26 Javascript
antd多选下拉框一行展示的实现方式
2020/10/31 Javascript
基于JavaScript实现轮播图效果
2021/01/02 Javascript
[02:31]2014DOTA2国际邀请赛2009专访:干爹表现出乎意料 看好DK杀回决赛
2014/07/20 DOTA
python实现Adapter模式实例代码
2018/02/09 Python
python中format()函数的简单使用教程
2018/03/14 Python
Python中extend和append的区别讲解
2019/01/24 Python
利用python如何在前程无忧高效投递简历
2019/05/07 Python
Python多线程threading模块用法实例分析
2019/05/22 Python
python3 批量获取对应端口服务的实例
2019/07/25 Python
对YOLOv3模型调用时候的python接口详解
2019/08/26 Python
使用phonegap进行本地存储的实现方法
2017/03/31 HTML / CSS
用JAVA实现一种排序,JAVA类实现序列化的方法(二种)
2014/04/23 面试题
临床医师专业个人自我评价范文
2013/11/07 职场文书
2014年乡镇工作总结
2014/11/21 职场文书
2014年乡镇民政工作总结
2014/12/02 职场文书
志愿者个人总结
2015/03/03 职场文书
保外就医申请书范文
2015/08/06 职场文书