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


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 相关文章推荐
最新优化收藏到网摘代码(digg,diigo)
Feb 07 Javascript
Zero Clipboard js+swf实现的复制功能使用方法
Mar 07 Javascript
js 刷新页面的代码小结 推荐
Apr 02 Javascript
js文件缓存之版本管理详解
Jul 05 Javascript
提取jquery的ready()方法单独使用示例
Mar 25 Javascript
jQuery超赞的评分插件(8款)
Aug 20 Javascript
jQuery自定义动画函数实例详解(附demo源码)
Dec 10 Javascript
jQuery Validate表单验证深入学习
Dec 18 Javascript
Mac下安装vue
Apr 11 Javascript
Mint-UI时间组件起始时间问题及时间插件使用
Aug 20 Javascript
基于javascript的无缝滚动动画1
Aug 07 Javascript
vue-cropper插件实现图片截取上传组件封装
May 27 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新手上路(七)
2006/10/09 PHP
基于PHP的简单采集数据入库程序【续篇】
2014/07/30 PHP
PHP生成指定范围内的N个不重复的随机数
2019/03/18 PHP
tp5(thinkPHP5框架)使用DB实现批量删除功能示例
2019/05/28 PHP
jQuery 行级解析读取XML文件(附源码)
2009/10/12 Javascript
JavaScript版DateAdd和DateDiff函数代码
2012/03/01 Javascript
javascript学习笔记(七) js函数介绍
2012/06/19 Javascript
js解析与序列化json数据(二)序列化探讨
2013/02/01 Javascript
js如何取消事件冒泡
2013/09/23 Javascript
手机端页面rem宽度自适应脚本
2015/05/20 Javascript
jquery使整个div区域可以点击的方法
2015/06/24 Javascript
Jsonp post 跨域方案
2015/07/06 Javascript
js图片翻书效果代码分享
2015/08/20 Javascript
酷! 不同风格页面布局幻灯片特效js实现
2021/02/19 Javascript
Javascript 实现放大镜效果实例详解
2016/12/03 Javascript
NodeJS创建最简单的HTTP服务器
2017/05/15 NodeJs
Babel 入门教程学习笔记
2018/06/13 Javascript
详解如何使用微信小程序云函数发送短信验证码
2019/03/13 Javascript
vue使用混入定义全局变量、函数、筛选器的实例代码
2019/07/29 Javascript
vue中在vuex的actions中请求数据实例
2019/11/08 Javascript
vue之组件内监控$store中定义变量的变化详解
2019/11/08 Javascript
微信小程序绘制半圆(弧形)进度条
2020/11/18 Javascript
python中安装Scrapy模块依赖包汇总
2017/07/02 Python
乐高积木玩具美国官网:LEGO Shop US
2016/09/16 全球购物
英国最大的电脑零售连锁店集团:PC World
2016/10/10 全球购物
千禧酒店及度假村官方网站:Millennium Hotels and Resorts
2019/05/10 全球购物
应届生人事助理求职信
2013/11/09 职场文书
创意活动策划书
2014/01/15 职场文书
法制宣传日活动总结
2014/04/29 职场文书
感恩母亲节演讲稿
2014/05/07 职场文书
节能减耗标语
2014/06/21 职场文书
班子四风对照检查材料思想汇报
2014/09/29 职场文书
领导走群众路线整改措施思想汇报
2014/10/12 职场文书
少年派的奇幻漂流观后感
2015/06/08 职场文书
趣味运动会赞词
2015/07/22 职场文书
vue+element ui实现锚点定位
2021/06/29 Vue.js