小程序实现五星点评效果


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 相关文章推荐
用js判断浏览器是否是IE的比较好的办法
May 08 Javascript
汉化英文版的Dreamweaver CS5并自动提示jquery
Nov 25 Javascript
JavaScript的继承的封装介绍
Oct 15 Javascript
利用原生JS与jQuery实现数字线性变化的动画
Feb 24 Javascript
使用JavaScript实现表格编辑器(实例讲解)
Aug 02 Javascript
js禁止表单重复提交
Aug 29 Javascript
Nginx 配置多站点vhost 的方法
Jan 07 Javascript
express启用https使用小记
May 21 Javascript
VUE兄弟组件传值操作实例分析
Oct 26 Javascript
微信小程序间使用navigator跳转传值问题实例分析
Mar 27 Javascript
JS轻量级函数式编程实现XDM三
Jun 16 Javascript
二维码条形码生成的JavaScript脚本库
Jul 07 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
Oracle Faq(Oracle的版本)
2006/10/09 PHP
怎么样可以把 phpinfo()屏蔽掉?
2006/11/24 PHP
PHP代码判断设备是手机还是平板电脑(两种方法)
2015/10/19 PHP
配置eAccelerator和XCache扩展来加速PHP程序的执行
2015/12/22 PHP
PHP分页初探 一个最简单的PHP分页代码的简单实现
2016/06/21 PHP
php 函数使用可变数量的参数方法
2017/05/02 PHP
用AJAX返回HTML片段中的JavaScript脚本
2010/01/04 Javascript
jQuery 类twitter的文本字数限制带提示效果插件
2010/04/16 Javascript
jquery 日期分离成年月日的代码
2010/05/14 Javascript
Javasipt:操作radio标签详解
2013/12/30 Javascript
AngularJs根据访问的页面动态加载Controller的解决方案
2015/02/04 Javascript
使用JavaScript和CSS实现文本隔行换色的方法
2015/11/04 Javascript
vue.js组件vue-waterfall-easy实现瀑布流效果
2017/08/22 Javascript
微信小程序生成海报分享朋友圈的实现方法
2019/05/06 Javascript
js中的深浅拷贝问题简析
2019/05/10 Javascript
npm ci命令的基本使用方法
2020/09/20 Javascript
js获取url页面id,也就是最后的数字文件名
2020/09/25 Javascript
[02:43]中国五虎出征TI3视频
2013/08/02 DOTA
深入理解Django中内置的用户认证
2017/10/06 Python
TF-IDF算法解析与Python实现方法详解
2017/11/16 Python
python创建文件时去掉非法字符的方法
2018/10/31 Python
Python实现京东秒杀功能代码
2019/05/16 Python
python爬虫 爬取58同城上所有城市的租房信息详解
2019/07/30 Python
CSS3颜色值RGBA与渐变色使用介绍
2020/03/06 HTML / CSS
浅析HTML5中的download属性使用
2019/03/13 HTML / CSS
有关打架的检讨书
2014/01/25 职场文书
九年级物理教学反思
2014/01/29 职场文书
大型车展策划方案
2014/02/01 职场文书
《李时珍夜宿古寺》教学反思
2014/04/09 职场文书
个人工作表现评语
2014/04/30 职场文书
说明书格式及范文
2014/05/07 职场文书
水污染治理工程专业自荐信
2014/06/21 职场文书
三严三实对照检查材料思想汇报
2014/09/28 职场文书
python实现自动化群控的步骤
2021/04/11 Python
原生JS中应该禁止出现的写法
2021/05/05 Javascript
vite+vue3.0+ts+element-plus快速搭建项目的实现
2021/06/24 Vue.js