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


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 相关文章推荐
在b/s开发中经常用到的javaScript技术
Aug 23 Javascript
jQuery温习篇 强大的JQuery选择器
Apr 24 Javascript
Javascript操作URL函数修改版
Nov 07 Javascript
js判断60秒以及倒计时示例代码
Jan 24 Javascript
Node.js 的异步 IO 性能探讨
Oct 08 Javascript
jQuery基本选择器和层次选择器学习使用
Feb 27 Javascript
jquery表单验证实例仿Toast提示效果
Mar 03 Javascript
ES6中新增的Object.assign()方法详解
Sep 22 Javascript
vue登录注册及token验证实现代码
Dec 14 Javascript
JavaScript和TypeScript中的void的具体使用
Sep 12 Javascript
利用React高阶组件实现一个面包屑导航的示例
Aug 23 Javascript
JavaScript 定时器详情
Nov 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原理之错误抑制与内嵌HTML分析
2011/05/02 PHP
PHP的switch判断语句的“高级”用法详解
2014/10/01 PHP
php去除html标记的原生函数详解
2015/01/27 PHP
PHP查询快递信息的方法
2015/03/07 PHP
php中使用sftp教程
2015/03/30 PHP
php生成图片验证码-附五种验证码
2015/08/19 PHP
php验证码实现代码(3种)
2015/09/07 PHP
PHP操作路由器实现方法示例
2019/04/27 PHP
jQuery性能优化28条建议你值得借鉴
2013/02/16 Javascript
jqueyr判断checkbox组的选中(示例代码)
2013/11/08 Javascript
jquery css 设置table的奇偶行背景色示例
2014/06/03 Javascript
js获取日期:昨天今天和明天、后天
2014/06/11 Javascript
jquery自适应布局的简单实例
2016/05/28 Javascript
yii form 表单提交之前JS在提交按钮的验证方法
2017/03/15 Javascript
教你5分钟学会用requirejs(必看篇)
2017/07/25 Javascript
详解小程序之简单登录注册表单验证
2019/05/13 Javascript
微信小程序实现上传word、txt、Excel、PPT等文件功能
2019/05/23 Javascript
Python 常用 PEP8 编码规范详解
2017/01/22 Python
解决Django模板无法使用perms变量问题的方法
2017/09/10 Python
Python3爬虫使用Fidder实现APP爬取示例
2018/11/27 Python
python批量获取html内body内容的实例
2019/01/02 Python
python导入模块交叉引用的方法
2019/01/19 Python
python实现画五角星和螺旋线的示例
2019/01/20 Python
python面试题之列表声明实例分析
2019/07/08 Python
matplotlib 画动态图以及plt.ion()和plt.ioff()的使用详解
2021/01/05 Python
施华洛世奇加拿大官网:SWAROVSKI加拿大
2018/06/03 全球购物
家得宝墨西哥官网:The Home Depot墨西哥
2019/11/18 全球购物
linux面试题参考答案(4)
2013/01/28 面试题
单位消防安全制度
2014/01/12 职场文书
教学个人的自我评价分享
2014/02/16 职场文书
金融系应届毕业生求职信
2014/05/26 职场文书
小学三好学生事迹材料
2014/08/15 职场文书
我的未来不是梦演讲稿
2014/09/02 职场文书
会计试用期自我评价怎么写
2014/09/18 职场文书
防灾减灾宣传标语
2014/10/07 职场文书
《群青的幻想曲》京力秋树角色PV公开
2022/04/08 日漫