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


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 相关文章推荐
Gird组件 Part-3:范例RSSFeed Viewer
Mar 10 Javascript
jQuery获得内容和属性方法及示例
Dec 02 Javascript
jQuery在ul中显示某个li索引号的方法
Mar 17 Javascript
JavaScript中计算网页中某个元素的位置
Jun 10 Javascript
readonly和disabled属性的区别
Jul 26 Javascript
Vue.js实现简单动态数据处理
Feb 13 Javascript
javascript流程控制语句集合
Sep 18 Javascript
js断点调试心得分享(必看篇)
Dec 08 Javascript
vue自定义底部导航栏Tabbar的实现代码
Sep 03 Javascript
Angular2使用SVG自定义图表(条形图、折线图)组件示例
May 10 Javascript
JS变量提升原理与用法实例浅析
May 22 Javascript
详解Vue之事件处理
Jul 10 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
Ajax PHP分页演示
2007/01/02 PHP
php获取本周星期一具体日期的方法
2015/04/20 PHP
PHP通过反射动态加载第三方类和获得类源码的实例
2015/11/27 PHP
CI框架封装的常用图像处理方法(缩略图,水印,旋转,上传等)
2016/11/22 PHP
TNC vs BOOM BO3 第一场2.13
2021/03/10 DOTA
jQuery实现可拖动的浮动层完整代码
2013/05/27 Javascript
如何使用Javascript正则表达式来格式化XML内容
2013/07/04 Javascript
JS常见问题整理(持续更新)
2013/08/06 Javascript
JS 获取浏览器和屏幕宽高等信息代码
2014/03/31 Javascript
jquery 中的each()跳出循环的语句
2014/05/23 Javascript
javascript框架设计读书笔记之字符串的扩展和修复
2014/12/02 Javascript
自己动手写的jquery分页控件(非常简单实用)
2015/10/28 Javascript
基于jQuery实现响应式圆形图片轮播特效
2015/11/25 Javascript
jQuery EasyUI 获取tabs的实例解析
2016/12/06 Javascript
Ajax跨域实现代码(后台jsp)
2017/01/21 Javascript
ES6新特性之函数的扩展实例详解
2017/04/01 Javascript
jQuery EasyUI之验证框validatebox实例详解
2017/04/10 jQuery
vue基于Vue2.0和高德地图的地图组件实例
2017/04/28 Javascript
完美实现js拖拽效果 return false用法详解
2017/07/28 Javascript
原生javascript运动函数的封装示例【匀速、抛物线、多属性的运动等】
2020/02/23 Javascript
Vue过滤器,生命周期函数和vue-resource简单介绍
2021/01/12 Vue.js
[35:43]2018DOTA2亚洲邀请赛 4.1 小组赛B组 paiN vs Effect
2018/04/03 DOTA
[59:48]DOTA2-DPC中国联赛 正赛 VG vs Magma BO3 第一场 1月26日
2021/03/11 DOTA
详解使用python的logging模块在stdout输出的两种方法
2017/05/17 Python
Python lxml解析HTML并用xpath获取元素的方法
2019/01/02 Python
Python 进程之间共享数据(全局变量)的方法
2019/07/16 Python
NumPy中的维度Axis详解
2019/11/26 Python
解决Django部署设置Debug=False时xadmin后台管理系统样式丢失
2020/04/07 Python
python实现爱奇艺登陆密码RSA加密的方法示例详解
2020/05/27 Python
使用keras实现孪生网络中的权值共享教程
2020/06/11 Python
Pytorch1.5.1版本安装的方法步骤
2020/12/31 Python
法国一家芭蕾舞鞋公司:Repetto
2018/11/12 全球购物
什么是GWT的Module
2013/01/20 面试题
保险公司开门红口号
2014/06/21 职场文书
利用Nginx代理如何解决前端跨域问题详析
2021/04/02 Servers
Springboot-cli 开发脚手架,权限认证,附demo演示
2022/04/28 Java/Android