小程序实现五星点评效果


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 简单导航实现代码
Sep 11 Javascript
JavaScript去除数组里重复值的方法
Jul 13 Javascript
angularjs学习笔记之双向数据绑定
Sep 26 Javascript
jqGrid 学习笔记整理——进阶篇(一 )
Apr 17 Javascript
JS封装的自动创建表格的实现代码
Jun 15 Javascript
使用JavaScript实现alert的实例代码
Jul 06 Javascript
js防刷新的倒计时代码 js倒计时代码
Sep 06 Javascript
基于vue-ssr的静态网站生成器VuePress 初体验
Apr 17 Javascript
Vue写一个简单的倒计时按钮功能
Apr 20 Javascript
解决jquery的ajax调取后端数据成功却渲染失败的问题
Aug 08 jQuery
vue 组件销毁并重置的实现
Jan 13 Javascript
vue 项目中当访问路由不存在的时候默认访问404页面操作
Aug 31 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 模拟POST提交的2种方法详解
2013/06/17 PHP
php递归删除目录与文件的方法
2015/01/30 PHP
PHPUnit测试私有属性和方法功能示例
2018/06/12 PHP
jquery 1.4.2发布!主要是性能与API
2010/02/25 Javascript
Ajax 数据请求的简单分析
2011/04/05 Javascript
在javascript中实现函数数组的方法
2013/12/25 Javascript
js取值中form.all和不加all的区别介绍
2014/01/20 Javascript
js实现鼠标点击左上角滑动菜单效果代码
2015/09/06 Javascript
Angular.js与Bootstrap相结合实现表格分页代码
2016/04/12 Javascript
Bootstrap项目实战之首页内容介绍(全)
2016/04/25 Javascript
基于JavaScript实现轮播图代码
2016/07/14 Javascript
AngularJS ngModel实现指令与输入直接的数据通信
2016/09/21 Javascript
利用Js的console对象,在控制台打印调式信息测试Js的实现
2016/11/26 Javascript
有趣的bootstrap走动进度条
2016/12/01 Javascript
vue bootstrap小例子一枚
2017/06/09 Javascript
AngularJS的ng-click传参的方法
2017/06/19 Javascript
NodeJS自定义模块写法(详解)
2017/06/27 NodeJs
JavaScript数据结构之栈实例用法
2019/01/18 Javascript
jQuery表单元素过滤选择器用法实例分析
2019/02/20 jQuery
性能优化篇之Webpack构建速度优化的建议
2019/04/03 Javascript
layui使用templet格式化表格数据的方法
2019/09/16 Javascript
微信小程序wx.request的简单封装
2019/11/13 Javascript
[01:55]《走出家门看比赛》——DOTA2 2015国际邀请赛同城线下观战
2015/07/18 DOTA
[43:35]EG vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
[46:21]Liquid vs LGD 2018国际邀请赛淘汰赛BO3 第一场 8.23
2018/08/24 DOTA
python使用os模块的os.walk遍历文件夹示例
2014/01/27 Python
Python简单实现安全开关文件的两种方式
2016/09/19 Python
Python 编码Basic Auth使用方法简单实例
2017/05/25 Python
用Python一键搭建Http服务器的方法
2018/06/01 Python
Python 字符串换行的多种方式
2018/09/06 Python
python实现获取单向链表倒数第k个结点的值示例
2019/10/24 Python
您在慕尼黑的跑步商店:Lauf-bar
2019/10/11 全球购物
保护环境建议书300字
2014/05/13 职场文书
2014大学生批评与自我批评思想汇报
2014/09/21 职场文书
2014年幼儿园后勤工作总结
2014/11/10 职场文书
小学教师个人工作总结2015
2015/04/20 职场文书