小程序实现五星点评效果


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 相关文章推荐
jquery 表单取值常用代码
Dec 22 Javascript
关于JavaScript的with 语句的使用方法
May 09 Javascript
JavaScript 实现类的多种方法实例
May 01 Javascript
JS获得URL超链接的参数值实例代码
Jun 21 Javascript
JavaScript中prototype为对象添加属性的误区介绍
Oct 15 Javascript
判断滚动条到底部的JS代码
Nov 04 Javascript
javascript eval(func())使用示例
Dec 05 Javascript
简单介绍jsonp 使用小结
Jan 27 Javascript
使用Script元素发送JSONP请求的方法
Jun 12 Javascript
JS如何判断json是否为空
Jul 06 Javascript
简单实现js上传文件功能
Aug 21 Javascript
vue左侧菜单,树形图递归实现代码
Aug 24 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
浅析memcache启动以及telnet命令详解
2013/06/28 PHP
CI使用Tank Auth转移数据库导致密码用户错误的解决办法
2014/06/12 PHP
Laravel中使用自己编写类库的3种方法
2015/02/10 PHP
php获得文件夹下所有文件的递归算法的简单实例
2016/11/01 PHP
PHP后期静态绑定实例浅析
2018/12/21 PHP
PhpStorm 如何优雅的调试Hyperf的方法步骤
2019/11/24 PHP
菜鸟学习JavaScript小实验之函数引用
2010/11/17 Javascript
js 判断脚本加载完毕的代码
2011/07/13 Javascript
JS字符串截取函数实例
2013/12/27 Javascript
创建、调用JavaScript对象的方法集锦
2014/12/24 Javascript
jQuery插件开发精品教程让你的jQuery提升一个台阶
2016/01/27 Javascript
前端微信支付js代码
2016/07/25 Javascript
浅谈JS函数定义方式的区别
2016/10/30 Javascript
xmlplus组件设计系列之文本框(TextBox)(3)
2017/05/03 Javascript
简单介绍react redux的中间件的使用
2018/04/06 Javascript
超出JavaScript安全整数限制的数字计算BigInt详解
2018/06/24 Javascript
微信小程序实现团购或秒杀批量倒计时
2020/11/01 Javascript
傻瓜式解读koa中间件处理模块koa-compose的使用
2018/10/30 Javascript
koa2使用ejs和nunjucks作为模板引擎的使用
2018/11/27 Javascript
nodejs npm错误Error:UNKNOWN:unknown error,mkdir 'D:\Develop\nodejs\node_global'at Error
2019/03/02 NodeJs
Vue使用.sync 实现父子组件的双向绑定数据问题
2019/04/04 Javascript
Vue实现点击当前行变色
2020/12/14 Vue.js
python分析apache访问日志脚本分享
2015/02/26 Python
使用Python从有道词典网页获取单词翻译
2016/07/03 Python
Python selenium实现微博自动登录的示例代码
2018/05/16 Python
使用python的pandas为你的股票绘制趋势图
2019/06/26 Python
django Model层常用验证器及自定义验证器详解
2020/07/15 Python
Mytheresa美国官网:德国知名的女性奢侈品电商
2017/05/27 全球购物
高中自我鉴定
2013/12/20 职场文书
会计顶岗实习心得
2014/01/25 职场文书
法院反腐倡廉心得体会
2014/09/09 职场文书
社会体育专业大学生职业生涯规划书
2014/09/17 职场文书
匿名检举信范文
2015/03/02 职场文书
尊师重教主题班会
2015/08/14 职场文书
css position fixed 左右双定位的实现代码
2021/04/29 HTML / CSS
Win10玩csgo闪退如何解决?Win10玩csgo闪退的解决方法
2022/07/23 数码科技