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


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 相关文章推荐
js简单实现删除记录时的提示效果
Dec 05 Javascript
node.js实现多图片上传实例
Jun 03 Javascript
Javascript设计模式之观察者模式的多个实现版本实例
Mar 03 Javascript
jQuery实现下滑菜单导航效果代码
Aug 25 Javascript
JS获取当前脚本文件的绝对路径
Mar 02 Javascript
关于Bootstrap按钮组件消除黄框的方法
May 19 Javascript
微信小程序--组件(swiper)详细介绍
Jun 13 Javascript
JavaScript实现旋转轮播图
Aug 18 Javascript
五步轻松实现zTree的使用
Nov 01 Javascript
js 实现复选框只能选择一项的示例代码
Jan 23 Javascript
Django+Vue实现WebSocket连接的示例代码
May 28 Javascript
vue中三级导航的菜单权限控制
Mar 31 Vue.js
微信小程序实现单列下拉菜单效果
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自动更新新闻DIY
2006/10/09 PHP
php 将字符串按大写字母分隔成字符串数组
2010/04/30 PHP
php简单的留言板与回复功能具体实现
2014/02/19 PHP
PHP中使用sleep造成mysql读取失败的案例和解决方法
2014/08/21 PHP
Laravel5权限管理方法详解
2016/07/26 PHP
通过修改Laravel Auth使用salt和password进行认证用户详解
2017/08/17 PHP
php微信公众号开发之二级菜单
2018/10/20 PHP
jQuery 1.3 和 Validation 验证插件1.5.1
2009/07/09 Javascript
在服务端(Page.Write)调用自定义的JS方法详解
2013/08/09 Javascript
用RadioButten或CheckBox实现div的显示与隐藏
2013/09/21 Javascript
js去除空格的12种实用方法
2013/11/08 Javascript
页面装载js及性能分析方法介绍
2014/03/21 Javascript
jquery中子元素和后代元素的区别示例介绍
2014/04/02 Javascript
node.js中的console.trace方法使用说明
2014/12/09 Javascript
node.js中的fs.write方法使用说明
2014/12/15 Javascript
动态创建按钮的JavaScript代码
2016/01/29 Javascript
浅析Bootstrap缩略图组件与警示框组件
2016/04/29 Javascript
Bootstrap 布局组件(全)
2016/07/18 Javascript
JavaScript数据结构与算法之检索算法实例分析【顺序查找、最大最小值、自组织查询】
2019/02/22 Javascript
微信小程序生成二维码的示例代码
2019/03/29 Javascript
python多进程共享变量
2016/04/06 Python
Python使用matplotlib绘制随机漫步图
2018/08/27 Python
python 随机生成10位数密码的实现代码
2019/06/27 Python
python对象销毁实例(垃圾回收)
2020/01/16 Python
Django模板之基本的 for 循环 和 List内容的显示方式
2020/03/31 Python
Python matplotlib绘制图形实例(包括点,曲线,注释和箭头)
2020/04/17 Python
scrapy redis配置文件setting参数详解
2020/11/18 Python
使用Python通过oBIX协议访问Niagara数据的示例
2020/12/04 Python
一些Unix笔试题和面试题
2012/09/25 面试题
英语硕士生求职简历的自我评价
2013/10/15 职场文书
高分子材料与工程专业个人求职信
2013/12/15 职场文书
小学教师办公室制度
2014/02/03 职场文书
2015自愿离婚协议书范本
2015/01/28 职场文书
小学重阳节活动总结
2015/03/24 职场文书
城镇居民医疗保险工作总结
2015/08/10 职场文书
教你修复 Win11应用商店加载空白问题
2021/12/06 数码科技