小程序实现五星点评效果


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还原含有rowspan、colspan的table的实现方法
Feb 10 Javascript
Javascript图像处理—亮度对比度应用案例
Jan 03 Javascript
JavaScript获取页面上被选中文字的方法技巧
Mar 13 Javascript
Javascript实现字数统计
Jul 03 Javascript
详解JavaScript的变量和数据类型
Nov 27 Javascript
bootstrap datepicker限定可选时间范围实现方法
Sep 28 Javascript
详解JavaScript对象的深浅复制
Mar 30 Javascript
vue使用中的内存泄漏【推荐】
Jul 10 Javascript
微信小程序实现多选框全选与取消全选功能示例
May 14 Javascript
vue中input的v-model清空操作
Sep 06 Javascript
如何配置vue.config.js 处理static文件夹下的静态文件
Jun 19 Javascript
如何使用three.js 制作一个三维的推箱子游戏
Jul 29 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/10 PHP
php图片缩放实现方法
2014/02/20 PHP
PHP正则匹配日期和时间(时间戳转换)的实例代码
2016/12/14 PHP
用js查找法实现当前栏目的高亮显示的代码
2007/11/24 Javascript
extjs fckeditor集成代码
2009/05/10 Javascript
Chrome中JSON.parse的特殊实现
2011/01/12 Javascript
javascript基础知识大集锦(一) 推荐收藏
2011/01/13 Javascript
利用Keydown事件阻止用户输入实现代码
2014/03/11 Javascript
javascript实现des解密加密全过程
2014/04/03 Javascript
javascript弹出带文字信息的提示框效果
2016/07/19 Javascript
Javascript实现代码折叠功能
2016/08/25 Javascript
浅谈vuex之mutation和action的基本使用
2017/08/29 Javascript
微信小程序模版渲染详解
2018/01/26 Javascript
解决vue-router中的query动态传参问题
2018/03/20 Javascript
[01:45]2014DOTA2 TI预选赛预选赛 大神专访第二弹!
2014/05/20 DOTA
[02:07]2018DOTA2亚洲邀请赛主赛事第三日五佳镜头 fy极限反杀
2018/04/06 DOTA
[01:34]DOTA2 7.22版本新增神杖效果一览(敏捷英雄篇)
2019/05/28 DOTA
python logging类库使用例子
2014/11/22 Python
Python探索之创建二叉树
2017/10/25 Python
使用Python给头像戴上圣诞帽的图像操作过程解析
2019/09/20 Python
python 字段拆分详解
2019/12/17 Python
pytorch中的上采样以及各种反操作,求逆操作详解
2020/01/03 Python
CSS3 rgb and rgba(透明色)的使用详解
2020/09/25 HTML / CSS
AmazeUI折叠式卡片布局,整合内容列表、表格组件实现
2020/08/20 HTML / CSS
俄罗斯一家时尚女装商店:Charuel
2019/12/04 全球购物
特色冷饮店创业计划书
2014/01/28 职场文书
教师节促销活动方案
2014/02/14 职场文书
财务总监管理岗位职责
2014/03/08 职场文书
《春晓》教学反思
2014/04/20 职场文书
基层干部个人对照检查及整改措施
2014/10/28 职场文书
2014年依法行政工作总结
2014/11/19 职场文书
活动经费申请报告
2015/05/15 职场文书
2015年民主评议党员工作总结
2015/05/19 职场文书
导游词之杭州西湖
2019/09/19 职场文书
python ansible自动化运维工具执行流程
2021/06/24 Python
Python docx库删除复制paragraph及行高设置图片插入示例
2022/07/23 Python