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


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 相关文章推荐
javascript 有趣而诡异的数组
Apr 06 Javascript
JavaScript字符串对象replace方法实例(用于字符串替换或正则替换)
Oct 16 Javascript
jQuery中:text选择器用法实例
Jan 03 Javascript
JS实现图片产生波纹一样flash效果的方法
Feb 27 Javascript
再谈javascript常见错误及解决方法
Sep 16 Javascript
浅谈jquery上下滑动的注意事项
Oct 13 Javascript
Javascript 实现简单计算器实例代码
Oct 23 Javascript
利用vue-router实现二级菜单内容转换
Nov 30 Javascript
jQuery密码强度验证控件使用详解
Jan 05 Javascript
Node.js使用supervisor进行开发中调试的方法
Mar 26 Javascript
详解elementui之el-image-viewer(图片查看器)
Aug 30 Javascript
React学习之受控组件与数据共享实例分析
Jan 06 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
Thinkphp中import的几个用法详细介绍
2014/07/02 PHP
javascript写的一个链表实现代码
2009/10/25 Javascript
js本身的局限性 别让javascript做太多事
2010/03/23 Javascript
jQuery.query.js 取参数的两点问题分析
2012/08/06 Javascript
JS动态修改图片的URL(src)的方法
2015/04/01 Javascript
jQuery中extend()和fn.extend()方法详解
2015/06/03 Javascript
javascript的几种继承方法介绍
2016/03/22 Javascript
js两种拼接字符串的简单方法(必看)
2016/09/02 Javascript
JS 调用微信扫一扫功能
2016/12/22 Javascript
jQuery插件FusionCharts实现的2D饼状图效果【附demo源码下载】
2017/03/03 Javascript
Vue0.1的过滤代码如何添加到Vue2.0直接使用
2017/08/23 Javascript
Vue下滚动到页面底部无限加载数据的示例代码
2018/04/22 Javascript
2种在vue项目中使用百度地图的简单方法
2018/09/28 Javascript
vue实现div拖拽互换位置
2020/07/29 Javascript
简单的React SSR服务器渲染实现
2018/12/11 Javascript
Bootstrap 时间日历插件bootstrap-datetimepicker配置与应用小结
2019/05/28 Javascript
微信小程序基于Taro的分享图片功能实践详解
2019/07/12 Javascript
js实现上传按钮并显示缩略图小轮子
2020/05/04 Javascript
js实现点击按钮随机生成背景颜色
2020/09/05 Javascript
如何编写一个 Webpack Loader的实现
2020/10/18 Javascript
解决ant Design Search无法输入内容的问题
2020/10/29 Javascript
解决vant中 tab栏遇到的坑 van-tabs
2020/11/04 Javascript
python自动登录12306并自动点击验证码完成登录的实现源代码
2018/04/25 Python
python对离散变量的one-hot编码方法
2018/07/11 Python
使用pip发布Python程序的方法步骤
2018/10/11 Python
如何利用Boost.Python实现Python C/C++混合编程详解
2018/11/08 Python
Python如何筛选序列中的元素的方法实现
2019/07/15 Python
python3中eval函数用法使用简介
2019/08/02 Python
django使用xadmin的全局配置详解
2019/11/15 Python
Python实现CAN报文转换工具教程
2020/05/05 Python
详解python中GPU版本的opencv常用方法介绍
2020/07/24 Python
新闻系毕业生推荐信
2013/11/16 职场文书
党的群众路线教育实践活动宣传方案
2014/02/23 职场文书
客服专员岗位职责
2014/02/28 职场文书
组织鉴定材料
2014/06/02 职场文书
分居协议书范本(律师见证版)
2014/11/26 职场文书