小程序实现五星点评效果


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 (十一) 实战表单验证与自动完成提示插件
Feb 23 Javascript
使用jquery菜单插件HoverTree仿京东无限级菜单
Dec 18 Javascript
轻松学习jQuery插件EasyUI EasyUI创建树形网络(1)
Nov 30 Javascript
Javascript字符串常用方法详解
Jul 21 Javascript
jQuery图片加载显示loading效果
Nov 04 Javascript
Angular和Vue双向数据绑定的实现原理(重点是vue的双向绑定)
Nov 22 Javascript
javascript input输入框模糊提示功能的实现
Sep 25 Javascript
详解node字体压缩插件font-spider的用法
Sep 28 Javascript
js实现倒计时器自定义时间和暂停
Feb 25 Javascript
Typescript 中的 interface 和 type 到底有什么区别详解
Jun 18 Javascript
jquery实现进度条状态展示
Mar 26 jQuery
js回到页面指定位置的三种方式
Dec 17 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线性表顺序存储实现代码(增删查改)
2012/02/16 PHP
php 获取本地IP代码
2013/06/23 PHP
去除php注释和去除空格函数分享
2014/03/13 PHP
PHP YII框架开发小技巧之模型(models)中rules自定义验证规则
2015/11/16 PHP
PHP处理CSV表格文件的常用操作方法总结
2016/07/01 PHP
php版微信公众号接口实现发红包的方法
2016/10/14 PHP
PHP ADODB实现事务处理功能示例
2018/05/25 PHP
js innerHTML 改变div内容的方法
2013/08/03 Javascript
利用jquery动画特效和css打造的侧边弹出垂直导航
2014/04/04 Javascript
js/jquery判断浏览器类型的方法小结
2015/05/12 Javascript
基于jQuery实现动态搜索显示功能
2016/05/05 Javascript
Angular2入门--架构总览
2017/03/29 Javascript
微信小程序实现打开内置地图功能【附源码下载】
2017/12/07 Javascript
如何使用 vue + d3 画一棵树
2018/12/03 Javascript
JS使用对象的defineProperty进行变量监控操作示例
2019/02/02 Javascript
[01:46]辉夜杯—打造中国DOTA新格局
2015/12/25 DOTA
python开发之IDEL(Python GUI)的使用方法图文详解
2015/11/12 Python
浅析Python中return和finally共同挖的坑
2017/08/18 Python
python如何在列表、字典中筛选数据
2018/03/19 Python
利用pandas将numpy数组导出生成excel的实例
2018/06/14 Python
mvc框架打造笔记之wsgi协议的优缺点以及接口实现
2018/08/01 Python
python处理DICOM并计算三维模型体积
2019/02/26 Python
Python filter过滤器原理及实例应用
2020/08/18 Python
python更新数据库中某个字段的数据(方法详解)
2020/11/18 Python
英国复古服装和球衣购买网站:3Retro Football
2018/07/09 全球购物
在C#中如何实现多态
2014/07/02 面试题
JPA的优势都有哪些
2013/07/04 面试题
金融专业个人求职信范文
2013/11/28 职场文书
儿子婚宴答谢词
2014/01/09 职场文书
家长学校培训材料
2014/08/20 职场文书
教师群众路线教育实践活动学习笔记
2014/11/05 职场文书
2014年餐厅服务员工作总结
2014/11/18 职场文书
师德承诺书2015
2015/04/28 职场文书
PostgreSQL解析URL的方法
2021/08/02 PostgreSQL
springmvc直接不经过controller访问WEB-INF中的页面问题
2022/02/24 Java/Android
js面向对象编程OOP及函数式编程FP区别
2022/07/07 Javascript