微信小程序实现星级评价


Posted in Javascript onNovember 20, 2019

本文实例为大家分享了微信小程序星级评价的具体代码,供大家参考,具体内容如下

效果图

微信小程序实现星级评价

wxml

<view class='assess-star'>
  <view class='star-wrap'>
   <view class='star-item' wx:for="{{stars}}" wx:key="" style='background:url("{{item.flag==1?item.lightImg:item.blackImg}}") no-repeat top;background-size:100%;' data-index="{{index}}" bindtap='starClick'></view>
  </view>
  <view class='star-desc'>{{starDesc}}</view>
</view>

wxss

.assess-star {
 margin-top: 20rpx;
}
 
.star-wrap {
 width: 50vw;
 margin: 10rpx auto 10rpx auto;
}
 
.star-item {
 display: inline-block;
 height: 60rpx;
 width: 60rpx;
 margin-right: 10rpx;
}
 
.star-desc {
 font-size: 30rpx;
 font-family: PingFangSC-Regular;
 font-weight: 400;
 color: rgba(243, 162, 0, 1);
 text-align: center;
}

js

Page({
 
 /**
  * 页面的初始数据
  */
 data: {
  starDesc: '非常满意,无可挑剔',
  stars: [{
   lightImg: '../../../../images/xing.png',
   blackImg: '../../../../images/xing1.png',
   flag: 1,
   message: '非常不满意,各方面都很差'
  }, {
   lightImg: '../../../../images/xing.png',
   blackImg: '../../../../images/xing1.png',
   flag: 1,
   message: '不满意,比较差'
  }, {
   lightImg: '../../../../images/xing.png',
   blackImg: '../../../../images/xing1.png',
   flag: 1,
   message: '一般,还要改善'
  }, {
   lightImg: '../../../../images/xing.png',
   blackImg: '../../../../images/xing1.png',
   flag: 1,
   message: '比较满意,仍要改善'
  }, {
   lightImg: '../../../../images/xing.png',
   blackImg: '../../../../images/xing1.png',
   flag: 1,
   message: '非常完美,无可挑剔'
  }]
 },
 // 选择评价星星
 starClick: function(e) {
  var that = this;
  for (var i = 0; i < that.data.stars.length; i++) {
   var allItem = 'stars[' + i + '].flag';
   that.setData({
    [allItem]: 2
   })
  }
  var index = e.currentTarget.dataset.index;
  for (var i = 0; i <= index; i++) {
   var item = 'stars[' + i + '].flag';
   that.setData({
    [item]: 1
   })
  }
  this.setData({
   starDesc: this.data.stars[index].message
  })
 },
 /**
  * 生命周期函数--监听页面加载
  */
 onLoad: function(options) {
 
 },
 
 /**
  * 生命周期函数--监听页面初次渲染完成
  */
 onReady: function() {
 
 },
 
 /**
  * 生命周期函数--监听页面显示
  */
 onShow: function() {
 
 },
 
 /**
  * 生命周期函数--监听页面隐藏
  */
 onHide: function() {
 
 },
 
 /**
  * 生命周期函数--监听页面卸载
  */
 onUnload: function() {
 
 },
 
 /**
  * 页面相关事件处理函数--监听用户下拉动作
  */
 onPullDownRefresh: function() {
 
 },
 
 /**
  * 页面上拉触底事件的处理函数
  */
 onReachBottom: function() {
 
 },
 
 /**
  * 用户点击右上角分享
  */
 onShareAppMessage: function() {
 
 }
})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript触发器详解
Mar 10 Javascript
EasyUi 打开对话框后控件赋值及赋值后不显示的问题解决办法
Jan 19 Javascript
详谈构造函数加括号与不加括号的区别
Oct 26 Javascript
微信小程序实现添加手机联系人功能示例
Nov 30 Javascript
解析vue中的$mount
Dec 21 Javascript
js保留两位小数方法总结
Jan 31 Javascript
vue element-ui table表格滚动加载方法
Mar 02 Javascript
在 Angular6 中使用 HTTP 请求服务端数据的步骤详解
Aug 06 Javascript
vue数据操作之点击事件实现num加减功能示例
Jan 19 Javascript
原生JavaScript创建不可变对象的方法简单示例
May 07 Javascript
修改NPM全局模式的默认安装路径的方法
Dec 15 Javascript
原生JS实现音乐播放器的示例代码
Feb 25 Javascript
微信小程序音乐播放器开发
Nov 20 #Javascript
微信小程序实现音乐播放器
Nov 20 #Javascript
vue移动端模态框(可传参)的实现
Nov 20 #Javascript
微信小程序实现上拉加载功能
Nov 20 #Javascript
微信小程序实现锚点功能
Nov 20 #Javascript
vue实现element表格里表头信息提示功能(推荐)
Nov 20 #Javascript
微信小程序实现时间进度条功能
Nov 17 #Javascript
You might like
php通过ajax实现双击table修改内容
2014/04/28 PHP
动态表单验证的操作方法和TP框架里面的ajax表单验证
2017/07/19 PHP
javascript中使用css需要注意的地方小结
2010/09/01 Javascript
javascript学习笔记(八) js内置对象
2012/06/19 Javascript
浅谈Unicode与JavaScript的发展史
2015/01/19 Javascript
NodeJs基本语法和类型
2015/02/13 NodeJs
手机端页面rem宽度自适应脚本
2015/05/20 Javascript
jquery验证手机号是否正确实例讲解
2015/11/17 Javascript
jQuery对象与DOM对象转换方法详解
2016/05/10 Javascript
在js中实现邮箱格式的验证方法(推荐)
2016/10/24 Javascript
Vuex2.0+Vue2.0构建备忘录应用实践
2016/11/30 Javascript
微信小程序之ES6与事项助手的功能实现
2016/11/30 Javascript
js/jquery控制页面动态加载数据 滑动滚动条自动加载事件的方法
2017/02/08 Javascript
Bootstrap表格制作代码
2017/03/17 Javascript
详解Vue2.X的路由管理记录之 钩子函数(切割流水线)
2017/05/02 Javascript
深入理解vue2.0路由如何配置问题
2017/07/18 Javascript
vue系列之动态路由详解【原创】
2017/09/10 Javascript
浅谈angular2路由预加载策略
2017/10/04 Javascript
vue router-link传参以及参数的使用实例
2017/11/10 Javascript
在vue中实现简单页面逆传值的方法
2017/11/27 Javascript
vue自定义js图片碎片轮播图切换效果的实现代码
2019/04/28 Javascript
vuex存储token示例
2019/11/11 Javascript
Python实现的数据结构与算法之链表详解
2015/04/22 Python
python实现ping的方法
2015/07/06 Python
Python开发的十个小贴士和技巧及长常犯错误
2018/09/27 Python
简单了解python代码优化小技巧
2019/07/08 Python
python高斯分布概率密度函数的使用详解
2019/07/10 Python
新加坡领先的时尚生活方式零售品牌:CHARLES & KEITH
2018/01/16 全球购物
Java基础面试题
2014/07/19 面试题
档案管理员岗位职责
2013/12/01 职场文书
经济管理毕业生求职信
2014/03/15 职场文书
宝宝满月酒主持词和仪式流程
2014/03/27 职场文书
十岁生日答谢词
2015/01/05 职场文书
软件项目经理岗位职责
2015/04/01 职场文书
Go语言测试库testify使用学习
2022/07/23 Golang
win10壁纸在哪个文件夹 win10桌面背景图片文件位置分享
2022/08/05 数码科技