小程序实现五星点评效果


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 相关文章推荐
javascript 极速 隐藏/显示万行表格列只需 60毫秒
Mar 28 Javascript
jQuery在html有效在jsp无效的原因及解决方法
Aug 02 Javascript
JQuery下拉框应用示例介绍
Apr 23 Javascript
jQuery中的read和JavaScript中的onload函数的区别
Aug 27 Javascript
再探JavaScript作用域
Sep 24 Javascript
浅谈JSON中stringify 函数、toJosn函数和parse函数
Jan 26 Javascript
JS实现简单的键盘打字的效果
Apr 24 Javascript
Angular之指令Directive用法详解
Mar 01 Javascript
jQuery为某个div加入行样式
Jun 09 jQuery
微信小程序 数据绑定及运算的简单实例
Sep 20 Javascript
在vue中获取微信支付code及code被占用问题的解决方法
Apr 16 Javascript
微信小程序scroll-view锚点链接滚动跳转功能
Dec 12 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
php 常用类整理
2009/12/23 PHP
PHP中几个常用的魔术常量
2012/02/23 PHP
XAMPP安装与使用方法详细解析
2013/11/27 PHP
php中time()与$_SERVER[REQUEST_TIME]用法区别
2014/11/19 PHP
php判断数组中是否存在指定键(key)的方法
2015/03/17 PHP
Symfony2创建页面实例详解
2016/03/18 PHP
php输出控制函数和输出函数生成静态页面
2019/06/27 PHP
laravel5.1框架model类查询的实现方法
2019/10/08 PHP
JavaScript 函数式编程的原理
2009/10/16 Javascript
firefox下jquery iframe刷新页面提示会导致重复之前动作
2012/12/17 Javascript
jQuery选择器中含有空格的使用示例及注意事项
2013/08/25 Javascript
jQuery Validate初步体验(二)
2015/12/12 Javascript
Vue.js在使用中的一些注意知识点
2017/04/29 Javascript
JS滚动到指定位置导航栏固定顶部
2017/07/03 Javascript
从零开始最小实现react服务器渲染详解
2018/01/26 Javascript
JavaScript引用类型RegExp基本用法详解
2018/08/09 Javascript
d3绘制基本的柱形图的实现代码
2018/12/12 Javascript
js JSON.stringify()基础详解
2019/06/19 Javascript
CountUp.js实现数字滚动增值效果
2019/10/17 Javascript
如何在JavaScript中创建具有多个空格的字符串?
2020/02/23 Javascript
利用Python读取文件的四种不同方法比对
2017/05/18 Python
Python入门之后再看点什么好?
2018/03/05 Python
Python对多属性的重复数据去重实例
2018/04/18 Python
python 画三维图像 曲面图和散点图的示例
2018/12/29 Python
用Python抢火车票的简单小程序实现解析
2019/08/14 Python
Python中and和or如何使用
2020/05/28 Python
Python自动化办公Excel模块openpyxl原理及用法解析
2020/11/05 Python
pycharm配置安装autopep8自动规范代码的实现
2021/03/02 Python
英国最受信任的在线眼镜商之一:Fashion Eyewear
2019/10/31 全球购物
美国知名的隐形眼镜电商:Contacts America
2019/11/19 全球购物
美国一家著名的手表在线折扣网站:Discount Watch Store
2020/02/24 全球购物
小学家长评语大全
2014/04/16 职场文书
捐书活动总结
2014/05/04 职场文书
小学生节约用水倡议书
2014/05/15 职场文书
企业2014年度工作总结
2014/12/10 职场文书
《卖火柴的小女孩》教学反思
2016/02/19 职场文书