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


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 相关文章推荐
Prototype源码浅析 Enumerable部分之each方法
Jan 16 Javascript
js 操作select和option常用代码整理
Dec 13 Javascript
JS+CSS实现经典的左侧竖向滑动菜单效果
Sep 23 Javascript
js实现网页收藏功能
Dec 17 Javascript
浅谈Angularjs link和compile的使用区别
Oct 21 Javascript
详解Js模板引擎(TrimPath)
Nov 22 Javascript
jQuery网页定位导航特效实现方法
Dec 19 Javascript
Vue实现点击时间获取时间段查询功能
Aug 21 Javascript
react的滑动图片验证码组件的示例代码
Feb 27 Javascript
react使用antd表单赋值,用于修改弹框的操作
Oct 29 Javascript
vue点击弹窗自动触发点击事件的解决办法(模拟场景)
May 25 Vue.js
详细谈谈JavaScript中循环之间的差异
Aug 23 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作的文本留言本的例子(四)
2006/10/09 PHP
php利用cookies实现购物车的方法
2014/12/10 PHP
PHP中实现Bloom Filter算法
2015/03/30 PHP
YII CLinkPager分页类扩展增加显示共多少页
2016/01/29 PHP
php中Ioc(控制反转)和Di(依赖注入)
2017/05/07 PHP
JavaScript高级程序设计(第3版)学习笔记3 js简单数据类型
2012/10/11 Javascript
jquery.post用法之type设置问题
2014/02/24 Javascript
Web安全测试之XSS实例讲解
2016/08/15 Javascript
原生JS获取元素集合的子元素宽度实例
2016/12/14 Javascript
swiper 解决动态加载数据滑动失效的问题
2018/02/26 Javascript
vue利用axios来完成数据的交互
2018/03/23 Javascript
js实现input密码框显示/隐藏功能
2020/09/10 Javascript
详解服务端预渲染之Nuxt(介绍篇)
2019/04/07 Javascript
Angular实现svg和png图片下载实现
2019/05/05 Javascript
如何在JavaScript中谨慎使用代码注释
2019/06/21 Javascript
利用d3.js实现蜂巢图表带动画效果
2019/09/03 Javascript
linux 下以二进制的方式安装 nodejs
2020/02/12 NodeJs
jQuery实现html可联动的百分比进度条
2020/03/26 jQuery
vue与iframe之间的信息交互的实现
2020/04/08 Javascript
JavaScript 实现自己的安卓手机自动化工具脚本(推荐)
2020/05/13 Javascript
浅析 Vue 3.0 的组装式 API(一)
2020/08/31 Javascript
Python创建文件和追加文件内容实例
2014/10/21 Python
Python3实现将文件树中所有文件和子目录归档到tar压缩文件的方法
2015/05/22 Python
Numpy之文件存取的示例代码
2018/08/03 Python
浅述python中深浅拷贝原理
2018/09/18 Python
瑞士男士时尚网上商店:Babista
2020/05/14 全球购物
教师自荐信范文
2013/12/09 职场文书
医药工作岗位求职信分享
2013/12/31 职场文书
普通大学毕业生自荐信范文
2014/02/23 职场文书
2014年公务员思想汇报范文:全心全意为人民服务
2014/03/06 职场文书
入股协议书
2014/04/14 职场文书
英语教研活动总结
2014/07/02 职场文书
二手车交易协议书标准版
2014/11/16 职场文书
环境建议书
2015/02/04 职场文书
办公室行政主管岗位职责
2015/04/09 职场文书
JavaScript实现栈结构详细过程
2021/12/06 Javascript