小程序实现五星点评效果


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 相关文章推荐
Zero Clipboard js+swf实现的复制功能使用方法
Mar 07 Javascript
jquerymobile checkbox及时刷新才能获取其准确值
Apr 14 Javascript
javascript获取元素CSS样式代码示例
Nov 28 Javascript
JavaScript闭包实例讲解
Apr 22 Javascript
使用jQuery实现input数值增量和减量的方法
Jan 24 Javascript
JavaScript实现俄罗斯方块游戏过程分析及源码分享
Mar 23 Javascript
自定义刻度jQuery进度条及插件
Sep 02 Javascript
如何利用JS通过身份证号获取当事人的生日、年龄、性别
Jan 22 Javascript
微信小程序实现文字跑马灯
May 26 Javascript
vue 自动化路由实现代码
Sep 03 Javascript
js实现随机抽奖
Mar 19 Javascript
探索node之事件循环的实现
Oct 30 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运行出现Call to undefined function curl_init()的解决方法
2010/11/02 PHP
Php header()函数语法及使用代码
2013/11/04 PHP
PHP序列化/对象注入漏洞分析
2016/04/18 PHP
php中mkdir()函数的权限问题分析
2016/09/24 PHP
实现JavaScript中继承的三种方式
2009/10/16 Javascript
Jquery Ajax学习实例4 向WebService发出请求,返回实体对象的异步调用
2010/03/16 Javascript
javascript中类的定义及其方式(《javascript高级程序设计》学习笔记)
2011/07/04 Javascript
固定背景实现的背景滚动特效示例分享
2013/05/19 Javascript
A标签触发onclick事件而不跳转的多种解决方法
2013/06/27 Javascript
鼠标选择动态改变网页背景颜色的JS代码
2013/12/10 Javascript
jquery实现标签支持图文排列带上下箭头按钮的选项卡
2015/03/14 Javascript
JS实现的RGB网页颜色在线取色器完整实例
2016/12/21 Javascript
基于JS实现移动端向左滑动出现删除按钮功能
2017/02/22 Javascript
微信小程序 页面跳转如何实现传值
2017/04/05 Javascript
JS使用canvas中的measureText方法测量字体宽度示例
2019/02/02 Javascript
深入理解基于vue-cli的webpack打包优化实践及探索
2019/10/14 Javascript
微信小程序如何加载数据库真实数据的实现
2020/03/04 Javascript
Python插件virtualenv搭建虚拟环境
2017/11/20 Python
对python list 遍历删除的正确方法详解
2018/06/29 Python
python实现多人聊天室
2020/03/31 Python
浅谈Python接口对json串的处理方法
2018/12/19 Python
django 中的聚合函数,分组函数,F 查询,Q查询
2019/07/25 Python
Python高级property属性用法实例分析
2019/11/19 Python
Python调用接口合并Excel表代码实例
2020/03/31 Python
前端canvas动画如何转成mp4视频的方法
2019/06/17 HTML / CSS
调用HTML5的Canvas API绘制图形的快速入门指南
2016/06/17 HTML / CSS
Supersmart英国:欧洲市场首批食品补充剂供应商之一
2018/05/05 全球购物
SQL Server数据库笔试题和答案
2016/02/04 面试题
班组长岗位职责范本
2014/01/05 职场文书
公益广告宣传方案
2014/02/28 职场文书
建筑工程质量通病防治方案
2014/06/08 职场文书
关于安全的标语
2014/06/10 职场文书
社团个人总结范文
2015/03/05 职场文书
担保书怎么写 ?
2019/04/22 职场文书
使用 Docker Compose 构建复杂的多容器App
2022/04/30 Servers
Java Redisson多策略注解限流
2022/09/23 Java/Android