微信小程序实现星级评价


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 相关文章推荐
根据鼠标的位置动态的控制层的位置
Nov 24 Javascript
基于jQuery的淡入淡出可自动切换的幻灯插件打包下载
Sep 15 Javascript
javascript实现的HashMap类代码
Jun 27 Javascript
JS及PHP代码编写八大排序算法
Jul 12 Javascript
Javascript下拉刷新的简单实现
Feb 14 Javascript
JavaScript中创建对象的7种模式详解
Feb 21 Javascript
浅谈Node.js轻量级Web框架Express4.x使用指南
May 03 Javascript
vue实现某元素吸顶或固定位置显示(监听滚动事件)
Dec 13 Javascript
Vue仿今日头条实例详解
Feb 06 Javascript
react native 文字轮播的实现示例
Jul 27 Javascript
浅谈Vue.use的使用
Aug 29 Javascript
javascript头像上传代码实例
Sep 28 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
frename PHP 灵活文件命名函数 frename
2009/09/09 PHP
php数据结构与算法(PHP描述) 查找与二分法查找
2012/06/21 PHP
thinkphp3.2中Lite文件替换框架入口文件或应用入口文件的方法
2015/05/21 PHP
php读取XML的常见方法实例总结
2017/04/25 PHP
PHP5.5基于mysqli连接MySQL数据库和读取数据操作实例详解
2019/02/16 PHP
使用Git实现Laravel项目的自动化部署
2019/11/24 PHP
在网页里看flash的trace数据的js类
2009/01/10 Javascript
js textarea自动增高并隐藏滚动条
2009/12/16 Javascript
一个简单的js渐显(fadeIn)渐隐(fadeOut)类
2010/06/19 Javascript
js判断选择时间不能小于当前时间的示例代码
2013/09/24 Javascript
jQuery仿gmail实现fixed布局的方法
2015/05/27 Javascript
js事件监听器用法实例详解
2015/06/01 Javascript
jQuery实现日期联动效果实例
2016/07/26 Javascript
JavaScript 链式结构序列化详解
2016/09/30 Javascript
关于JS Lodop打印插件打印Bootstrap样式错乱问题的解决方案
2016/12/23 Javascript
详解angular2采用自定义指令(Directive)方式加载jquery插件
2017/02/09 Javascript
js实现滑动到页面底部自动加载更多功能
2017/02/15 Javascript
Angular 2父子组件数据传递之局部变量获取子组件其他成员
2017/07/04 Javascript
详解React之key的使用和实践
2018/09/29 Javascript
Node.js 使用axios读写influxDB的方法示例
2018/10/26 Javascript
Vue 封装防刷新考试倒计时组件的实现
2020/06/05 Javascript
JavaScript实现移动端拖动元素
2020/11/24 Javascript
python字符串替换示例
2014/04/24 Python
Python常见异常分类与处理方法
2017/06/04 Python
python pyinstaller打包exe报错的解决方法
2019/11/02 Python
解决os.path.isdir() 判断文件夹却返回false的问题
2019/11/29 Python
Python函数的定义方式与函数参数问题实例分析
2019/12/26 Python
HTML5适合的情人节礼物有纪念日期功能
2021/01/25 HTML / CSS
Pamela Love官网:纽约设计师Pamela Love的精美、时尚和穿孔珠宝
2020/10/19 全球购物
Auguste The Label官网:澳大利亚一家精品女装时尚品牌
2020/06/14 全球购物
在校生汽车维修实习自我鉴定
2013/09/19 职场文书
一月红领巾广播稿
2014/02/11 职场文书
岗位廉洁从业承诺书
2014/03/28 职场文书
酒店人事专员岗位职责
2015/04/07 职场文书
Opencv实现二维直方图的计算及绘制
2021/07/21 Python
Nginx限流和黑名单配置
2022/05/20 Servers