小程序实现五星点评效果


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刷新页面背景图片随机变换的实现方法
Mar 15 Javascript
jQuery插件zTree实现清空选中第一个节点所有子节点的方法
Mar 08 Javascript
JS实现经典的中国地区三级联动下拉菜单功能实例【测试可用】
Jun 06 Javascript
jQuery动态添加.active 实现导航效果代码思路详解
Aug 29 jQuery
jQuery动态移除与增加onclick属性的方法详解
Jun 07 jQuery
微信小程序实现的一键连接wifi功能示例
Apr 24 Javascript
微信小程序实现跳转的几种方式总结(推荐)
Apr 24 Javascript
一个手写的vue放大镜效果
Aug 09 Javascript
jQuery实现简易聊天框
Feb 08 jQuery
Vue 中获取当前时间并实时刷新的实现代码
May 12 Javascript
vue:el-input输入时限制输入的类型操作
Aug 05 Javascript
微信小程序实现购物车功能
Nov 18 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中实现接收多个name相同但Value不相同表单数据实例
2015/02/03 PHP
php实现RSA加密类实例
2015/03/26 PHP
PHP实现随机生成水印图片功能
2017/03/22 PHP
基于jQuery的的一个隔行变色,鼠标移动变色的小插件
2010/07/06 Javascript
统计出现最多的字符次数的js代码
2010/12/03 Javascript
JS与jQ读取xml文件的方法
2015/12/08 Javascript
jQuery向webApi提交post json数据
2017/01/16 Javascript
原生js实现图片放大缩小计时器效果
2017/01/20 Javascript
一次Webpack配置文件的分离实战记录
2018/11/30 Javascript
微信小程序调用微信支付接口的实现方法
2019/04/29 Javascript
vue-cli脚手架打包静态资源请求出错的原因与解决
2019/06/06 Javascript
Vue实现图片与文字混输效果
2019/12/04 Javascript
原生JS与CSS实现软件卸载对话框功能
2019/12/05 Javascript
Vue + element 实现多选框组并保存已选id集合的示例代码
2020/06/03 Javascript
Vue中使用Echarts仪表盘展示实时数据的实现
2020/11/01 Javascript
[54:47]Liquid vs VP Supermajor决赛 BO 第五场 6.10
2018/07/05 DOTA
[02:40]2018年度DOTA2最佳新人-完美盛典
2018/12/16 DOTA
[01:22:28]DOTA2-DPC中国联赛 正赛 SAG vs RNG BO3 第一场 1月18日
2021/03/11 DOTA
python自带的http模块详解
2016/11/06 Python
在Django同1个页面中的多表单处理详解
2017/01/25 Python
python使用matplotlib绘图时图例显示问题的解决
2017/04/27 Python
python正则表达式的使用
2017/06/12 Python
python实现微信自动回复功能
2018/04/11 Python
Python对接 xray 和微信实现自动告警
2019/09/17 Python
python json load json 数据后出现乱序的解决方案
2020/02/27 Python
Python多线程实现支付模拟请求过程解析
2020/04/21 Python
python正则表达式的懒惰匹配和贪婪匹配说明
2020/07/13 Python
纯CSS3实现漂亮的input输入框动画样式库(Text input love)
2018/12/29 HTML / CSS
竞选班长演讲稿
2013/12/30 职场文书
政法大学毕业生自荐信范文
2014/01/01 职场文书
团结就是力量演讲稿
2014/05/21 职场文书
2015公务员试用期工作总结
2014/12/12 职场文书
销售员岗位职责范本
2015/04/11 职场文书
初中重阳节活动总结
2015/05/05 职场文书
网络研修心得体会
2016/01/08 职场文书
Win11控制面板快捷键是什么?Win11打开控制面板的方法汇总
2022/07/07 数码科技