微信小程序实现的五星评价功能示例


Posted in Javascript onApril 25, 2019

本文实例讲述了微信小程序实现的五星评价功能。分享给大家供大家参考,具体如下:

实现五星评价功能,效果图如下:

微信小程序实现的五星评价功能示例

.wxml文件:

<view class="star-title">1、品质效果</view>
<view class="star-pos">
  <image class='stars' bindtap="changeColor" data-index='0' data-no="{{item}}" wx:for="{{stardata}}"
        src="{{flag[0]>=item? '../../images/icon/star1.png': '../../images/icon/star0.png'}}" />
  <view style='margin-left: 30rpx;'>{{startext[0]}}</view>
</view>
<view class="star-title">2、服务质量</view>
 <view class="star-pos">
  <image class='stars' bindtap="changeColor" data-index='1' data-no="{{item}}" wx:for="{{stardata}}"
          src="{{flag[1]>=item? '../../images/icon/star1.png': '../../images/icon/star0.png'}}" />
  <view style='margin-left: 30rpx;'>{{startext[1]}}</view>
</view>
<view class="star-title">3、综合管理</view>
<view class="star-pos">
  <image class='stars' bindtap="changeColor" data-index='2' data-no="{{item}}" wx:for="{{stardata}}"
        src="{{flag[2]>=item? '../../images/icon/star1.png': '../../images/icon/star0.png'}}" />
  <view style='margin-left: 30rpx;'>{{startext[2]}}</view>
</view>

.js 文件:

page: ({
  data: {
      flag:[0, 0, 0],
      startext: ['', '', ''],
      stardata: [1, 2, 3, 4, 5],
    },
    // 五星评价事件
    changeColor: function (e) {
      var index = e.currentTarget.dataset.index;
      var num = e.currentTarget.dataset.no;
      var a = 'flag[' + index + ']';
      var b = 'startext[' + index + ']';
      var that = this;
      if(num == 1) {
        that.setData({
          [a]: 1,
          [b]: '非常不满意'
        });
      } else if (num == 2){
        that.setData({
          [a]: 2,
          [b]: '不满意'
        });
      } else if (num == 3) {
        that.setData({
          [a]: 3,
          [b]: '一般'
        });
      } else if (num == 4) {
        that.setData({
          [a]: 4,
          [b]: '满意'
        });
      } else if (num == 5) {
        that.setData({
          [a]: 5,
          [b]: '非常满意'
        });
      }
  },
})

.wxss文件:

.star-pos {
  margin: 10rpx;
  display: flex;
  flex-direction: row;
}
.stars{
  width: 40rpx;
  height: 40rpx;
  margin-left: 30rpx;
}

希望本文所述对大家微信小程序开发有所帮助。

Javascript 相关文章推荐
基于jQuery的为attr添加id title等效果的实现代码
Apr 20 Javascript
jQuery操作input type=radio的实现代码
Jun 14 Javascript
JQuery页面的表格数据的增加与分页的实现
Dec 10 Javascript
验证码在IE中不刷新而谷歌等浏览器正常的解决方案
Mar 18 Javascript
JS中判断null、undefined与NaN的方法
Mar 24 Javascript
基于JavaScript实现全屏透明遮罩div层锁屏效果
Jan 26 Javascript
解决同一页面中两个iframe互相调用jquery,js函数的方法
Dec 12 Javascript
js实现图片懒加载效果
Jul 17 Javascript
详解VUE 数组更新
Dec 16 Javascript
微信小程序progress组件使用详解
Jan 31 Javascript
Less 安装及基本用法
May 05 Javascript
vue $mount 和 el的区别说明
Sep 11 Javascript
微信小程序实现单列下拉菜单效果
Apr 25 #Javascript
Vue组件通信的几种实现方法
Apr 25 #Javascript
深入解析vue 源码目录及构建过程分析
Apr 24 #Javascript
使用webpack4编译并压缩ES6代码的方法示例
Apr 24 #Javascript
页面内锚点定位及跳转方法总结(推荐)
Apr 24 #Javascript
详解Vue项目中实现锚点定位
Apr 24 #Javascript
微信小程序中使用echarts的实现方法
Apr 24 #Javascript
You might like
PHP 多维数组的排序问题 根据二维数组中某个项排序
2011/11/09 PHP
php生成二维码
2015/08/10 PHP
PHP实现的oracle分页函数实例
2016/01/25 PHP
浅析PHP数据导出知识点
2018/02/17 PHP
jquery图片不完全按比例自动缩小的简单代码
2013/07/29 Javascript
IE6已终止操作问题的2种情况及解决
2014/04/23 Javascript
Iframe实现跨浏览器自适应高度解决方法
2014/09/02 Javascript
Bootstrap每天必学之下拉菜单
2015/11/25 Javascript
JavaScript运行过程中的“预编译阶段”和“执行阶段”
2015/12/16 Javascript
ES6中Iterator与for..of..遍历用法分析
2017/03/31 Javascript
JavaScript实现读取与输出XML文件数据的方法示例
2018/06/05 Javascript
微信小程序页面传多个参数跳转页面的实现方法
2019/05/17 Javascript
vue语法自动转typescript(解放双手)
2019/09/18 Javascript
BootStrap前端框架使用方法详解
2020/02/26 Javascript
js判断密码强度的方法
2020/03/18 Javascript
Vue中通过属性绑定为元素绑定style行内样式的实例代码
2020/04/30 Javascript
Vue.js中Line第三方登录api的实现代码
2020/06/29 Javascript
Openlayers绘制地图标注
2020/09/28 Javascript
详解详解Python中writelines()方法的使用
2015/05/25 Python
python获取一组数据里最大值max函数用法实例
2015/05/26 Python
Python查询IP地址归属完整代码
2017/06/21 Python
深入了解Python iter() 方法的用法
2019/07/11 Python
python 实现从高分辨图像上抠取图像块
2020/01/02 Python
浅谈pytorch卷积核大小的设置对全连接神经元的影响
2020/01/10 Python
Python Selenium截图功能实现代码
2020/04/26 Python
新版Pycharm中Matplotlib不会弹出独立的显示窗口的问题
2020/06/02 Python
keras 读取多标签图像数据方式
2020/06/12 Python
python 实现非极大值抑制算法(Non-maximum suppression, NMS)
2020/10/15 Python
通过Canvas及File API缩放并上传图片完整示例
2013/08/08 HTML / CSS
Expedia爱尔兰:酒店、机票、租车及廉价假期
2017/01/02 全球购物
师范生自我鉴定范文
2013/10/05 职场文书
计算机专业推荐信范文
2013/11/20 职场文书
培训心得体会
2013/12/29 职场文书
节约用水演讲稿
2014/05/21 职场文书
小学英语教师2015年度个人工作总结
2015/10/14 职场文书
低端且暴利的线上线下创业项目分享
2019/09/03 职场文书