小程序实现五星点评效果


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实现下拉框功能效果【实例代码】
May 06 Javascript
JS简单实现DIV相对于浏览器固定位置不变的方法
Jun 17 Javascript
Bootstrap编写一个同时适用于PC、平板、手机的登陆页面
Jun 30 Javascript
bootstrap响应式表格实例详解
May 15 Javascript
解决使用Vue.js显示数据的时,页面闪现原始代码的问题
Feb 11 Javascript
基于mpvue的小程序项目搭建的步骤
May 22 Javascript
判断iOS、Android以及PC端的示例代码
Nov 15 Javascript
教你完全理解ReentrantLock重入锁
Jun 03 Javascript
使用typescript构建Vue应用的实现
Aug 26 Javascript
原生js实现日历效果
Mar 02 Javascript
vue移动端下拉刷新和上滑加载
Oct 27 Javascript
vue浏览器返回监听的具体步骤
Feb 03 Vue.js
微信小程序实现星星评价效果
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
用js进行url编码后用php反解以及用php实现js的escape功能函数总结
2010/02/08 PHP
PHP中的gzcompress、gzdeflate、gzencode函数详解
2014/07/29 PHP
Laravel中encrypt和decrypt的实现方法
2017/09/24 PHP
php实现微信分享朋友链接功能
2019/02/18 PHP
jquery URL参数判断,确定菜单样式
2010/05/31 Javascript
缓动函数requestAnimationFrame 更好的实现浏览器经动画
2012/12/07 Javascript
js异步加载的三种解决方案
2013/03/04 Javascript
js操作IE浏览器弹出浏览文件夹可以返回目录路径
2014/07/14 Javascript
jQuery使用append在html元素后同时添加多项内容的方法
2015/03/26 Javascript
详解js图片轮播效果实现原理
2015/12/17 Javascript
浅谈jquery选择器 :first与:first-child的区别
2016/11/20 Javascript
JavaScript实现图片懒加载(Lazyload)
2016/11/28 Javascript
jQuery插件zTree实现删除树节点的方法示例
2017/03/08 Javascript
iview日期控件,双向绑定日期格式的方法
2018/03/15 Javascript
Vue.JS实现垂直方向展开、收缩不定高度模块的JS组件
2018/06/19 Javascript
vue配置font-awesome5的方法步骤
2019/01/27 Javascript
图文讲解用vue-cli脚手架创建vue项目步骤
2019/02/12 Javascript
微信小程序简单的canvas裁剪图片功能详解
2019/07/12 Javascript
基于better-scroll 实现歌词联动功能的代码
2020/05/07 Javascript
在Vue中使用Echarts可视化库的完整步骤记录
2020/11/18 Vue.js
[03:49]显微镜下的DOTA2第十五期—VG登基之路完美团
2014/06/24 DOTA
举例讲解Python中的迭代器、生成器与列表解析用法
2016/03/20 Python
python操作excel的方法(xlsxwriter包的使用)
2018/06/11 Python
python实现俄罗斯方块
2018/06/26 Python
python实现简单登陆系统
2018/10/18 Python
python实现一组典型数据格式转换
2018/12/15 Python
Django 在iframe里跳转顶层url的例子
2019/08/21 Python
Python任务调度利器之APScheduler详解
2020/04/02 Python
一款纯css3实现简单的checkbox复选框和radio单选框
2014/11/05 HTML / CSS
党员违纪检讨书
2014/02/18 职场文书
预备党员转正考核材料
2014/06/03 职场文书
2014年图书室工作总结
2014/12/09 职场文书
楚门的世界观后感
2015/06/03 职场文书
原生CSS实现文字无限轮播的通用方法
2021/03/30 HTML / CSS
Node实现搜索框进行模糊查询
2021/06/28 Javascript
redis 存储对象的方法对比分析
2021/08/02 Redis