小程序实现五星点评效果


Posted in Javascript onNovember 03, 2018

本文实例为大家分享了小程序实现五星点评效果展示的具体代码,供大家参考,具体内容如下

先看一下效果图:

小程序实现五星点评效果

如上图所示,这里我们要添加三个五星点评。

我们这里之讲解一下,“描述相符”的点评

WXML代码

<!--星星评价-->
  <view class="comment1-description" style="display:flex;flex-direction:row;">
  <view class="comment1-description1">描述相符</view>
  <view class="star-pos" style="display:flex;flex-direction:row;">
    <view class="stars {{flag0>=1? 'on': ''}}" bindtap="changeColor1"></view>
    <view class="stars {{flag0>=2? 'on': ''}}" bindtap="changeColor2"></view>
    <view class="stars {{flag0>=3? 'on': ''}}" bindtap="changeColor3"></view>
    <view class="stars {{flag0>=4? 'on': ''}}" bindtap="changeColor4"></view>
    <view class="stars {{flag0>=5? 'on': ''}}" bindtap="changeColor5"></view>
</view>
</view>

JS代码

Page({
 data:{
   flag:0
 },
 changeColor1:function(){
    var that = this;
    that.setData( {
      flag: 1
    });
 },
 changeColor2:function(){
    var that = this;
    that.setData( {
      flag:2
    });
  },
 changeColor3:function(){
    var that = this;
    that.setData( {
      flag: 3
    });
  },
 changeColor4:function(){
    var that = this;
    that.setData( {
      flag:4
    });
  },
 changeColor5:function(){
    var that = this;
    that.setData( {
      flag: 5
    });
  },

WCSS代码

/*星星的样式*/
.stars{
  background-image: url("http://m.dev.vd.cn/static/xcx/v1/goo/star(灰)@1.5x.png");
  width: 43rpx;
  height: 43rpx;
  background-size: 43rpx 43rpx;
  margin-left: 40rpx;
}
.on{
  background-image: url("http://m.dev.vd.cn/static/xcx/v1/goo/star@1.5x.png");
  width: 43rpx;
  height: 43rpx;
  background-size: 43rpx 43rpx;
  /*margin-left: 10px;*/
}

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

Javascript 相关文章推荐
让iframe自适应高度(支持XHTML,支持FF)
Jul 24 Javascript
JavaScript的Cookies
Jan 16 Javascript
javascript 表单验证常见正则
Sep 28 Javascript
基于jquery的修改当前TAB显示标题的代码
Dec 11 Javascript
JS的replace方法介绍
Oct 20 Javascript
JavaScript动态操作表格实例(添加,删除行,列及单元格)
Nov 25 Javascript
window.open打开页面居中显示的示例代码
Dec 27 Javascript
jquery下div 的resize事件示例代码
Mar 09 Javascript
推荐8款jQuery轻量级树形Tree插件
Nov 12 Javascript
JS实现消息来时让网页标题闪动效果的方法
Apr 20 Javascript
原生js实现选项卡功能
Mar 08 Javascript
Angularjs 手写日历的实现代码(不用插件)
Oct 18 Javascript
微信小程序实现星星评价效果
Nov 02 #Javascript
使用Object.defineProperty如何巧妙找到修改某个变量的准确代码位置
Nov 02 #Javascript
微信小程序实现点赞、取消点赞功能
Nov 02 #Javascript
Vue利用History记录上一页面的数据方法实例
Nov 02 #Javascript
vue如何根据网站路由判断页面主题色详解
Nov 02 #Javascript
小程序实现列表点赞功能
Nov 02 #Javascript
Vue中的vue-resource示例详解
Nov 02 #Javascript
You might like
Extended CHM PHP 语法手册之 DIY
2006/10/09 PHP
php下intval()和(int)转换使用与区别
2008/07/18 PHP
php文件打包 下载之使用PHP自带的ZipArchive压缩文件并下载打包好的文件
2012/06/13 PHP
PHP中source #N问题的解决方法
2014/01/27 PHP
PHP生成自定义长度随机字符串的函数分享
2014/05/04 PHP
两千行代码的PHP学习笔记汇总
2014/10/05 PHP
ThinkPHP静态缓存简单配置和使用方法详解
2016/03/23 PHP
PHP检测一个数组有没有定义的方法步骤
2019/07/20 PHP
浅谈laravel中的关联查询with的问题
2019/10/10 PHP
javascript js cookie的存储,获取和删除
2007/12/29 Javascript
jQuery 渐变下拉菜单
2009/12/15 Javascript
Javascript 面向对象 继承
2010/05/13 Javascript
javascript,jquery闭包概念分析
2010/06/19 Javascript
jquery配合css简单实现返回顶部效果
2013/09/30 Javascript
js 触发select onchange事件代码
2014/03/20 Javascript
js使用递归解析xml
2014/12/12 Javascript
详解AngularJS验证、过滤器、指令
2017/01/04 Javascript
VueJs 搭建Axios接口请求工具
2017/11/20 Javascript
js 实现复选框只能选择一项的示例代码
2018/01/23 Javascript
JS实现图片转换成base64的各种应用场景实例分析
2018/06/22 Javascript
js+audio实现音乐播放器
2020/09/13 Javascript
JavaScript实现移动端拖动元素
2020/11/24 Javascript
[02:24]DOTA2痛苦女王 英雄基础教程
2013/11/26 DOTA
Python3实现从文件中读取指定行的方法
2015/05/22 Python
Python实现的最近最少使用算法
2015/07/10 Python
Python程序退出方式小结
2017/12/09 Python
Python subprocess模块功能与常见用法实例详解
2018/06/28 Python
python pygame实现球球大作战
2019/11/25 Python
Python3如何判断三角形的类型
2020/04/12 Python
Python venv虚拟环境配置过程解析
2020/07/08 Python
Python pymsql模块的使用
2020/09/07 Python
利用纯CSS3实现动态的自行车特效源码
2017/01/20 HTML / CSS
2014年圣诞节倒计时网页的制作过程
2014/12/05 HTML / CSS
群众路线教育实践活动对照检查材料
2014/09/22 职场文书
护士年终考核评语
2014/12/31 职场文书
黄埔军校观后感
2015/06/10 职场文书