微信小程序实现星级评分和展示


Posted in Javascript onJuly 05, 2018

本文实例为大家分享了微信小程序实现星级评分和展示的具体代码,供大家参考,具体内容如下

星级评分分成两种情况: 一:展示后台给的评分数据   二:用户点击第几颗星星就显示为几星评分;

微信小程序实现星级评分和展示

直接上代码

wxml部分

<view>
 <view>一:显示后台给的评分</view>
 <block wx:for="{{one_1}}" wx:key="item">
 <image src='../../image/star.png'></image>
 </block>
 <block wx:for="{{two_1}}" wx:key="item">
 <image src='../../image/starg.png'></image>
 </block>
</view>
<view>这里num给的是几分就显示几颗星星</view>
 
<view style='margin-top:60px;'>二:显示用户选择的评分</view>
<block wx:for="{{one_2}}" wx:key="index">
 <image catchtap='in_xin' id='{{index+1}}' data-in='star' src='../../image/star.png'></image>
</block>
<block wx:for="{{two_2}}" wx:key="index">
 <image catchtap='in_xin' id='{{index+1}}' data-in='starg' src='../../image/starg.png'></image>
</block>
<view>{{one_2}}星</view>

wxss部分

image{ 
 height: 60rpx; 
 width: 60rpx; 
 display: inline-block 
}

js部分

/**
 * 页面的初始数据
 * 满分为5星
 */
 data: {
 num: 4,//后端给的分数,显示的星星
 one_1: '',//点亮的星星数
 two_1: '',//没有点亮的星星数
 one_2: 0,//点亮的星星数
 two_2: 5//没有点亮的星星数
 },
 
 /**
 * 生命周期函数--监听页面加载
 */
 onLoad: function (options) {
 //情况一:展示后台给的评分 
 this.setData({
 one_1: this.data.num,
 two_1: 5 - this.data.num
 })
 },
 in_xin: function (e) {
 var in_xin = e.currentTarget.dataset.in;
 console.log(e.currentTarget.dataset.in);
 console.log(e.currentTarget); 
 var one_2;
 if (in_xin == 'star') {
 one_2 = Number(e.currentTarget.id)
 } else {
 one_2 = Number(e.currentTarget.id) + this.data.one_2
 }
 this.setData({
 one_2: one_2,
 two_2: 5 - one_2
 })
 },

starg是灰色的星星,star是点亮的星星。if判断那里:如果点击的是点亮的星星的话,点亮星星的个数就是点的这个ID。如果点的是灰色星星的话,点亮星星的个数就是点的这个ID加上已点的个数。而ID就是星星的个数。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript For Beginners(转载)
Jan 05 Javascript
ImageZoom 图片放大镜效果(多功能扩展篇)
Apr 14 Javascript
用jquery与css打造个性化的单选框和复选框
Oct 20 Javascript
Javascript 类型转换方法
Oct 24 Javascript
利用CSS、JavaScript及Ajax实现高效的图片预加载
Oct 16 Javascript
javascript创建数组之联合数组的使用方法示例
Dec 26 Javascript
javascript数据结构与算法之检索算法
Apr 04 Javascript
AngularJS ng-controller 指令简单实例
Aug 01 Javascript
Vue2 配置 Axios api 接口调用文件的方法
Nov 13 Javascript
在Vue组件中使用 TypeScript的方法
Feb 28 Javascript
在Vue中创建可重用的 Transition的方法
Jun 02 Javascript
JavaScript数组类型Array相关的属性与方法详解
Sep 08 Javascript
vue-router history模式下的微信分享小结
Jul 05 #Javascript
微信小程序实现运动步数排行功能(可删除)
Jul 05 #Javascript
微信小程序之批量上传并压缩图片的实例代码
Jul 05 #Javascript
JavaScript控制浏览器全屏显示简单示例
Jul 05 #Javascript
基于jQuery使用Ajax动态执行模糊查询功能
Jul 05 #jQuery
JavaScript递归函数解“汉诺塔”算法代码解析
Jul 05 #Javascript
微信小程序开发之改变data中数组或对象的某一属性值
Jul 05 #Javascript
You might like
深入php处理整数函数的详解
2013/06/09 PHP
PHP header()函数常用方法总结
2014/04/11 PHP
基于PHP微信红包的算法探讨
2016/07/21 PHP
Code:loadScript( )加载js的功能函数
2007/02/02 Javascript
javascript 表单规则集合对象
2009/07/21 Javascript
20个非常棒的Jquery实用工具 国外文章
2010/01/01 Javascript
分享十五个最佳jQuery 幻灯插件和教程
2010/03/27 Javascript
js控制web打印(局部打印)方法整理
2013/05/29 Javascript
Js操作树节点自动折叠展开的几种方法
2014/05/05 Javascript
基于nodejs+express(4.x+)实现文件上传功能
2015/11/23 NodeJs
JS使用eval()动态创建变量的方法
2016/06/03 Javascript
JS实现数字格式千分位相互转换方法
2016/08/01 Javascript
JS+HTML5实现的前端购物车功能插件实例【附demo源码下载】
2016/10/17 Javascript
JS Input里添加小图标的两种方法
2017/11/11 Javascript
浏览器调试动态js脚本的方法(图解)
2018/01/19 Javascript
vue项目中实现图片预览的公用组件功能
2018/10/26 Javascript
快速了解Node中的Stream流是什么
2019/02/13 Javascript
微信小程序如何再次获取用户授权的方法
2019/05/10 Javascript
JavaScript判断浏览器运行环境的详细方法
2019/06/30 Javascript
图解JS原型和原型链实现原理
2020/09/15 Javascript
[02:51]2014DOTA2 TI小组赛总结中国军团全部进军钥匙球馆
2014/07/15 DOTA
[01:03]DOTA2新的征程 你的脚印值得踏上
2014/08/13 DOTA
举例讲解Python设计模式编程的代理模式与抽象工厂模式
2016/01/16 Python
Python找出list中最常出现元素的方法
2016/06/14 Python
python 列表,数组和矩阵sum的用法及区别介绍
2018/06/28 Python
简单了解python PEP的一些知识
2019/07/13 Python
Python对接六大主流数据库(只需三步)
2019/07/31 Python
详解Python中字符串前“b”,“r”,“u”,“f”的作用
2019/12/18 Python
澳大利亚领先的内衣店:Bendon Lingerie澳大利亚
2020/05/15 全球购物
毕业生幼师求职自荐信
2013/10/01 职场文书
优秀大学生职业生涯规划书
2014/02/27 职场文书
求职个人评价范文
2014/04/09 职场文书
2015年个人工作总结报告
2015/04/25 职场文书
小学生教师节广播稿
2015/08/19 职场文书
《群青的幻想曲》京力秋树角色PV公开
2022/04/08 日漫
JS前端使用canvas实现物体的点选示例
2022/08/05 Javascript