小程序实现五星点评效果


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网页加载进度条的方法
Dec 09 Javascript
UI Events 用户界面事件
Jun 27 Javascript
jquery.qrcode在线生成二维码使用示例
Aug 21 Javascript
利用jQuery实现可输入搜索文字的下拉框
Oct 23 Javascript
jquery中交替点击事件的实现代码
Feb 14 Javascript
一个判断抢购时间是否到达的简单的js函数
Jun 23 Javascript
兼容Firefox的Javascript XSLT 处理XML文件
Dec 31 Javascript
jQuery实现“扫码阅读”功能
Jan 21 Javascript
Bootstrap每天必学之按钮(一)
Nov 24 Javascript
Node.js的Express框架使用上手指南
Mar 12 Javascript
基于JS正则表达式实现模板数据动态渲染(实现思路详解)
Mar 07 Javascript
Vue的data、computed、watch源码浅谈
Apr 04 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
使用迭代器 遍历文件信息的详解
2013/06/08 PHP
php var_export与var_dump 输出的不同
2013/08/09 PHP
discuz加密解密函数使用方法和中文注释
2014/01/21 PHP
PHP生成图片缩略图类示例
2017/01/12 PHP
关于Yii2框架跑脚本时内存泄漏问题的分析与解决
2019/12/01 PHP
jquery删除ID为sNews的tr元素的内容
2014/04/10 Javascript
对之前写的jquery分页做下升级
2014/06/19 Javascript
js怎么覆盖原有方法实现重写
2014/09/04 Javascript
angularJS 中input示例分享
2015/02/09 Javascript
JavaScript中的call方法和apply方法使用对比
2015/08/12 Javascript
js实现select下拉框菜单
2015/12/08 Javascript
AngularJS中的表单简单入门
2016/07/28 Javascript
浅谈angularjs module返回对象的坑(推荐)
2016/10/21 Javascript
客户端(vue框架)与服务器(koa框架)通信及服务器跨域配置详解
2017/08/26 Javascript
vue.js指令v-for使用以及下标索引的获取
2019/01/31 Javascript
nodejs使用async模块同步执行的方法
2019/03/02 NodeJs
微信公众号平台接口开发 获取access_token过程解析
2019/08/14 Javascript
nodejs和react实现即时通讯简易聊天室功能
2019/08/21 NodeJs
微信小程序关键字变色实现代码实例
2019/12/13 Javascript
vue-cli3使用mock数据的方法分析
2020/03/16 Javascript
Vue(定时器)解决mounted不能获取到data中的数据问题
2020/07/30 Javascript
[41:56]Spirit vs Liquid Supermajor小组赛A组 BO3 第一场 6.2
2018/06/03 DOTA
浅谈python中copy和deepcopy中的区别
2017/10/23 Python
python爬虫之xpath的基本使用详解
2018/04/18 Python
Python3中列表list合并的四种方法
2019/04/19 Python
解决Django中修改js css文件但浏览器无法及时与之改变的问题
2019/08/31 Python
CSS3实现类似翻书效果的过渡动画的示例代码
2019/09/06 HTML / CSS
HTML5 Canvas实现平移/放缩/旋转deom示例(附截图)
2013/07/04 HTML / CSS
办公室综合文员岗位职责范本
2014/02/13 职场文书
就业协议书怎么填
2014/04/11 职场文书
餐厅服务员岗位职责
2015/02/09 职场文书
郭明义观后感
2015/06/08 职场文书
选择比努力更重要?这是长期以来对“努力”的最大误解
2019/07/12 职场文书
JS实现扫雷项目总结
2021/05/19 Javascript
JavaScript高级程序设计之基本引用类型
2021/11/17 Javascript
Vue中使用import进行路由懒加载的原理分析
2022/04/01 Vue.js