小程序实现五星点评效果


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 相关文章推荐
准确获得页面、窗口高度及宽度的JS
Nov 26 Javascript
理解JavaScript变量作用域更轻松
Oct 25 Javascript
JavaScript Event学习补遗 addEventSimple
Feb 11 Javascript
jQuery Autocomplete自动完成插件
Jul 17 Javascript
复制网页内容,粘贴之后自动加上网址的实现方法(脚本之家特别整理)
Oct 16 Javascript
AngularJS中重新加载当前路由页面的方法
Mar 09 Javascript
node学习笔记之读写文件与开启第一个web服务器操作示例
May 29 Javascript
微信小程序 子级页面返回父级并把子级参数带回父级实现方法
Aug 22 Javascript
JS数组扁平化、去重、排序操作实例详解
Feb 24 Javascript
vue项目中使用vue-layer弹框插件的方法
Mar 11 Javascript
vue中利用mqtt服务端实现即时通讯的步骤记录
Jul 01 Vue.js
深入讲解Vue中父子组件通信与事件触发
Mar 22 Vue.js
微信小程序实现星星评价效果
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
.htaccess文件保护实例讲解
2011/02/06 PHP
PHP中实现接收多个name相同但Value不相同表单数据实例
2015/02/03 PHP
Javascript面向对象编程
2012/03/18 Javascript
jquery预览图片实现鼠标放上去显示实际大小
2014/01/16 Javascript
Javascript监视变量变化的方法
2015/06/09 Javascript
jQuery实现按钮的点击 全选/反选 单选框/复选框 文本框 表单验证
2015/06/25 Javascript
jquery实现平滑的二级下拉菜单效果
2015/08/26 Javascript
JavaScript实现点击按钮直接打印
2016/01/06 Javascript
AngularJS实现标签页的两种方式
2016/09/05 Javascript
javascript匀速动画和缓冲动画详解
2016/10/20 Javascript
BootStrop前端框架入门教程详解
2016/12/25 Javascript
使用contextMenu插件实现Bootstrap table弹出右键菜单
2017/02/20 Javascript
python爬取安居客二手房网站数据(实例讲解)
2017/10/19 Javascript
vue自定义过滤器创建和使用方法详解
2017/11/06 Javascript
Vue中使用ElementUI使用第三方图标库iconfont的示例
2018/10/11 Javascript
Nodejs中怎么实现函数的串行执行
2019/03/02 NodeJs
Vue使用watch监听一个对象中的属性的实现方法
2019/05/10 Javascript
vue柱状进度条图像的完美实现方案
2019/08/26 Javascript
详细分析Node.js 多进程
2020/06/22 Javascript
python回调函数中使用多线程的方法
2017/12/25 Python
Python中偏函数用法示例
2018/06/07 Python
python解析json串与正则匹配对比方法
2018/12/20 Python
什么是Python中的匿名函数
2020/06/02 Python
英国翻新电子产品购物网站:Tech Trade
2017/12/25 全球购物
教师师德教育的自我评价
2013/10/31 职场文书
个人简历自荐信
2013/12/05 职场文书
致100米运动员广播稿
2014/02/14 职场文书
联欢晚会主持词
2014/03/25 职场文书
年终总结会主持词
2014/03/25 职场文书
2015年学生会干事工作总结
2015/04/09 职场文书
三傻大闹宝莱坞观后感
2015/06/03 职场文书
六五普法学习心得体会
2016/01/21 职场文书
Python上下文管理器Content Manager
2021/06/26 Python
MongoDB支持的数据类型
2022/04/11 MongoDB
深入理解mysql事务隔离级别和存储引擎
2022/04/12 MySQL
python单向链表实例详解
2022/05/25 Python