小程序实现五星点评效果

 更新时间:2018年11月03日 08:39:42   作者:马优晨  
这篇文章主要为大家详细介绍了小程序实现五星点评效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了小程序实现五星点评效果展示的具体代码,供大家参考,具体内容如下

先看一下效果图:

如上图所示,这里我们要添加三个五星点评。

我们这里之讲解一下,“描述相符”的点评

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;*/
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • js+canvas实现纸牌游戏

    js+canvas实现纸牌游戏

    这篇文章主要为大家详细介绍了js+canvas实现纸牌游戏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-03-03
  • 如何用js获取当前域名、Url、相对路径和参数

    如何用js获取当前域名、Url、相对路径和参数

    这篇文章主要给大家介绍了关于如何用js获取当前域名、Url、相对路径和参数的相关资料,用Javascript可以单独获取当前域名、Url相对路径和参数,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2023-11-11
  • 使用JavaScript实现轮播图效果

    使用JavaScript实现轮播图效果

    这篇文章主要为大家详细介绍了使用JavaScript实现轮播图效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-01-01
  • layui之select的option叠加问题的解决方法

    layui之select的option叠加问题的解决方法

    下面小编就为大家分享一篇layui之select的option叠加问题的解决方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • JS监听微信、支付宝等移动app及浏览器的返回、后退、上一页按钮的事件方法

    JS监听微信、支付宝等移动app及浏览器的返回、后退、上一页按钮的事件方法

    这篇文章主要介绍了JS监听微信、支付宝等移动app及浏览器的返回、后退、上一页按钮的事件方法,需要的朋友可以参考下
    2016-08-08
  • 深入探寻javascript定时器

    深入探寻javascript定时器

    这篇文章主要介绍了深入探寻javascript定时器,十分的详尽,十分全面,需要的朋友可以参考下
    2015-01-01
  • JavaScript简单生成 N~M 之间随机数的方法

    JavaScript简单生成 N~M 之间随机数的方法

    这篇文章主要介绍了JavaScript简单生成 N~M 之间随机数的方法,结合自定义函数分析了JS生成固定区间内随机数的相关操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2017-01-01
  • 探究JavaScript原型数据共享与方法共享实现

    探究JavaScript原型数据共享与方法共享实现

    这篇文章主要介绍了探究JavaScript原型数据共享与方法共享实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-05-05
  • input输入框鼠标焦点提示信息

    input输入框鼠标焦点提示信息

    本文给大家分享的是一则非常常用和实用的小技巧,当鼠标点击到输入框(input)里的时候,输入框的提示消失,鼠标再移开,输入框提示出现,推荐给小伙伴们
    2015-03-03
  • JS中取二维数组中最大值的方法汇总

    JS中取二维数组中最大值的方法汇总

    本文通过三种解决方案给大家介绍js中取二维数组中最大值的方法。介绍的非常详细,具有参考价值
    2016-04-04

最新评论