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


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 相关文章推荐
jquery 设置元素相对于另一个元素的top值(实例代码)
Nov 06 Javascript
jQuery如何获取同一个类标签的所有值(默认无法获取)
Sep 25 Javascript
基于Jquery插件实现跨域异步上传文件功能
Apr 26 Javascript
BootStrap Table 分页后重新搜索问题的解决办法
Aug 08 Javascript
聊一聊jQuery插件uploadify使用方法
Aug 24 Javascript
javascript 内置对象及常见API详细介绍
Nov 01 Javascript
js仿淘宝评价评分功能
Feb 28 Javascript
JavaScript事件委托原理与用法实例分析
Jun 07 Javascript
JavaScript实用代码小技巧
Aug 23 Javascript
解决Vue使用swiper动态加载数据,动态轮播数据显示白屏的问题
Sep 27 Javascript
微信小程序实现签到功能
Oct 31 Javascript
详解小程序云开发数据库
May 20 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
CI框架安全类Security.php源码分析
2014/11/04 PHP
php函数与传递参数实例分析
2014/11/15 PHP
php设置静态内容缓存时间的方法
2014/12/01 PHP
php生成短域名函数
2015/03/23 PHP
使用纯php代码实现页面伪静态的方法
2015/07/25 PHP
php $_SESSION会员登录实例分享
2021/01/19 PHP
php mysqli查询语句返回值类型实例分析
2016/06/29 PHP
详解PHP原生DOM对象操作XML的方法
2016/10/17 PHP
一个可以显示阴历的JS代码
2007/03/05 Javascript
分享一个用Mootools写的鼠标滑过进度条改变进度值的实现代码
2011/12/12 Javascript
js查错流程归纳
2012/05/04 Javascript
javascript 在firebug调试时用console.log的方法
2012/05/10 Javascript
jquery进行数组遍历如何跳出当前的each循环
2014/06/05 Javascript
JQuery表单验证插件EasyValidator用法分析
2014/11/15 Javascript
jQuery中[attribute*=value]选择器用法实例
2014/12/31 Javascript
JS实现仿新浪黄色经典滑动门效果代码
2015/09/27 Javascript
JavaScript数据推送Comet技术详解
2016/04/07 Javascript
Node.js利用Net模块实现多人命令行聊天室的方法
2016/12/23 Javascript
angularjs指令之绑定策略(@、=、&amp;)
2017/04/13 Javascript
jQuery实现的事件绑定功能基本示例
2017/10/11 jQuery
vue2单元测试环境搭建
2018/05/24 Javascript
layui实现下拉复选功能的例子(包括数据的回显与上传)
2019/09/24 Javascript
12 种使用Vue 的最佳做法
2020/03/30 Javascript
JavaScript ECMA-262-3 深入解析(一):执行上下文实例分析
2020/04/25 Javascript
JavaScript数组排序功能简单实现
2020/05/14 Javascript
Pandas之排序函数sort_values()的实现
2019/07/09 Python
Python Process多进程实现过程
2019/10/22 Python
浅析python,PyCharm,Anaconda三者之间的关系
2019/11/27 Python
nohup的用法
2012/11/26 面试题
银行毕业实习自我鉴定
2013/09/19 职场文书
自荐书封面下载
2013/11/29 职场文书
《雨霖铃》听课反思
2014/02/13 职场文书
优秀党员获奖感言
2014/02/18 职场文书
施工协议书范本
2014/04/22 职场文书
培训班开班主持词
2015/07/02 职场文书
nginx网站服务如何配置防盗链(推荐)
2021/03/31 Servers