小程序实现五星点评效果


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 相关文章推荐
在IE下:float属性会影响offsetTop的取值
Dec 22 Javascript
10个实用的脚本代码工具
May 04 Javascript
JavaScript函数的一些注意要点小结及js匿名函数
Nov 10 Javascript
详解JavaScript中的事件流和事件处理程序
May 20 Javascript
设置jQueryUI DatePicker默认语言为中文
Jun 04 Javascript
Bootstrap Table列宽拖动的方法
Aug 15 Javascript
vuedraggable+element ui实现页面控件拖拽排序效果
Jul 29 Javascript
在微信小程序中保存网络图片
Feb 12 Javascript
js module大战
Apr 19 Javascript
vue实现pdf文档在线预览功能
Nov 26 Javascript
node.js使用mongoose操作数据库实现购物车的增、删、改、查功能示例
Dec 23 Javascript
PHP读取远程txt文档到数组并实现遍历
Aug 25 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之数据库操作详解及乱码解决!
2007/01/02 PHP
php下关于中英数字混排的字符串分割问题
2010/04/06 PHP
分享php分页的功能模块
2015/06/16 PHP
php面向对象值单例模式
2016/05/03 PHP
PHP基于imagick扩展实现合成图片的两种方法【附imagick扩展下载】
2017/11/14 PHP
PHP中抽象类,接口功能、定义方法示例
2019/02/26 PHP
Extjs在exlipse中设置自动提示的方法
2010/04/07 Javascript
关于js获取radio和select的属性并控制的代码
2011/05/12 Javascript
jquery创建并行对象或者合并对象的实现代码
2012/10/10 Javascript
JS实现网页标题栏显示当前时间和日期的完整代码
2015/11/02 Javascript
JS简单生成两个数字之间随机数的方法
2016/08/03 Javascript
JS中的事件委托实例浅析
2018/03/22 Javascript
vue计算属性computed的使用方法示例
2019/03/13 Javascript
vue-cli3 配置开发与测试环境详解
2019/05/17 Javascript
JavaScript中clientWidth,offsetWidth,scrollWidth的区别
2021/01/25 Javascript
[01:09:01]完美世界DOTA2联赛循环赛 Magma vs PXG BO2第一场 10.28
2020/10/28 DOTA
Python中的Classes和Metaclasses详解
2015/04/02 Python
python嵌套函数使用外部函数变量的方法(Python2和Python3)
2016/01/31 Python
python sys.argv[]用法实例详解
2018/05/25 Python
django的ORM操作 删除和编辑实现详解
2019/07/24 Python
如何修复使用 Python ORM 工具 SQLAlchemy 时的常见陷阱
2019/11/19 Python
python给指定csv表格中的联系人群发邮件(带附件的邮件)
2019/12/31 Python
python求一个字符串的所有排列的实现方法
2020/02/04 Python
Django多数据库配置及逆向生成model教程
2020/03/28 Python
Python Selenium XPath根据文本内容查找元素的方法
2020/12/07 Python
解决virtualenv -p python3 venv报错的问题
2021/02/05 Python
戴森美国官网:Dyson美国
2016/09/11 全球购物
英国最大的天然和有机产品在线零售商之一:Big Green Smile
2020/05/06 全球购物
社团文化节邀请函
2014/01/10 职场文书
白血病捐款倡议书
2014/05/14 职场文书
校园演讲稿汇总
2014/05/21 职场文书
2014年财务工作总结范文
2014/11/11 职场文书
2015年银行信贷员工作总结
2015/05/19 职场文书
男方家长婚礼答谢词
2015/09/29 职场文书
python3.9之你应该知道的新特性详解
2021/04/29 Python
mysql创建存储过程及函数详解
2021/12/04 MySQL