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


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 相关文章推荐
让回调函数 showResponse 也带上参数的代码
Aug 13 Javascript
JS模拟的QQ面板上的多级可展开的菜单
Oct 10 Javascript
IE和Firefox下event事件杂谈
Dec 18 Javascript
使用IE6看老赵的博客 jQuery初探
Jan 17 Javascript
点击隐藏页面左栏或右栏实现js代码
Apr 01 Javascript
jQuery实现切换字体大小的方法
Mar 10 Javascript
MVVM模式中ViewModel和View、Model有什么区别?
Jun 19 Javascript
通过js获取上传的图片信息(临时保存路径,名称,大小)然后通过ajax传递给后端的方法
Oct 01 Javascript
利用yarn实现一个webpack+react种子
Oct 25 Javascript
Angular2 组件通信的实例代码
Jun 23 Javascript
JS实现获取自定义属性data值的方法示例
Dec 19 Javascript
在vue中动态添加class类进行显示隐藏实例
Nov 09 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
咖啡的种类和口感
2021/03/03 新手入门
浅析PHP中Collection 类的设计
2013/06/21 PHP
解析php中如何调用用户自定义函数
2013/08/06 PHP
PHP读取CURL模拟登录时生成Cookie文件的方法
2014/11/04 PHP
smarty的section嵌套循环用法示例
2016/05/28 PHP
php实现xml与json之间的相互转换功能实例
2016/07/07 PHP
PHP封装的验证码工具类定义与用法示例
2018/08/22 PHP
Jquery iframe内部出滚动条
2010/02/11 Javascript
javascript解析json数据的3种方式
2014/05/08 Javascript
jQuery-1.9.1源码分析系列(十)事件系统之事件体系结构
2015/11/19 Javascript
微信小程序使用input组件实现密码框功能【附源码下载】
2017/12/11 Javascript
angular2 NgModel模块的具体使用方法
2019/04/10 Javascript
cordova+vue+webapp使用html5获取地理位置的方法
2019/07/06 Javascript
layui多图上传实现删除功能的例子
2019/09/23 Javascript
vue计算属性+vue中class与style绑定(推荐)
2020/03/30 Javascript
JS sort方法基于数组对象属性值排序
2020/07/10 Javascript
微信小程序自定义底部弹出框动画
2020/11/18 Javascript
javascript实现滚轮轮播图片
2020/12/13 Javascript
[09:22]2014DOTA2西雅图国际邀请赛 主赛事第二日TOPPLAY
2014/07/21 DOTA
tensorflow: 查看 tensor详细数值方法
2018/06/13 Python
10 行 Python 代码教你自动发送短信(不想回复工作邮件妙招)
2018/10/11 Python
django之对FileField字段的upload_to的设定方法
2019/07/28 Python
python使用python-pptx删除ppt某页实例
2020/02/14 Python
最简单的matplotlib安装教程(小白)
2020/07/28 Python
Python使用urlretrieve实现直接远程下载图片的示例代码
2020/08/17 Python
python用700行代码实现http客户端
2021/01/14 Python
澳大利高级泳装品牌:Bondi Born
2018/05/23 全球购物
给儿子的表扬信
2014/01/15 职场文书
大宝sod蜜广告词
2014/03/21 职场文书
乡镇网格化管理实施方案
2014/03/23 职场文书
2014年档案管理员工作总结
2014/12/01 职场文书
酒桌上的开场白
2015/06/01 职场文书
2016年七夕情人节宣传语
2015/11/25 职场文书
合作合同协议书
2016/03/21 职场文书
python异步的ASGI与Fast Api实现
2021/07/16 Python
Golang 并发编程 SingleFlight模式
2022/04/26 Golang