微信小程序实现星星评价效果


Posted in Javascript onNovember 02, 2018

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

微信小程序实现星星评价效果

代码实现

wxml文件

<!--pages/evaluatepage/evaluatepage.wxml-->

<view class='container'>
 <view class='evaluate_contant'>
 <!--外层循环控制有几个评价条目 -->
 <block wx:for='{{evaluate_contant}}' wx:key='' wx:for-index='idx'>
 <view class='evaluate_item'>
  <view class='evaluate_title'>{{item}}</view>

  <!--星星评价 -->
  <view class='evaluate_box'>
  <!--内层循环展示每个评价条目的星星 -->
  <block wx:for="{{stars}}" wx:key=''>
  <image class="star-image" style="left: {{item*80}}rpx" src="{{scores[idx] > item ?(scores[idx]-item == 0.5?halfSrc:selectedSrc) : normalSrc}}">
  <view class="item" style="left:0rpx" data-score="{{item + 0.5}}" data-idx='{{idx}}' bindtap="selectLeft"></view>
  <view class="item" style="left:20rpx" data-score="{{item + 1}}" data-idx='{{idx}}' bindtap="selectRight"></view>
  </image>
  </block>
  </view>

 </view>
 </block>
 <button class='submit_button' bindtap='submit_evaluate' type='primary'>提交</button>
 </view>
</view>

js文件

Page({

 data: {
 evaluate_contant: ['评价条目一', '评价条目二', '评价条目三',],
 stars: [0, 1, 2, 3, 4],
 normalSrc: '../../images/no-star.png',
 selectedSrc: '../../images/full-star.png',
 halfSrc: '../../images/half-star.png',
 score: 0,
 scores: [0, 0, 0],
 },

 // 提交事件
 submit_evaluate: function () {
 console.log('评价得分' + this.data.scores)
 },

 //点击左边,半颗星
 selectLeft: function (e) {
 var score = e.currentTarget.dataset.score
 if (this.data.score == 0.5 && e.currentTarget.dataset.score == 0.5) {
 score = 0;
 }

 this.data.scores[e.currentTarget.dataset.idx] = score,
 this.setData({
 scores: this.data.scores,
 score: score
 })

 },

 //点击右边,整颗星
 selectRight: function (e) {
 var score = e.currentTarget.dataset.score

 this.data.scores[e.currentTarget.dataset.idx] = score,
 this.setData({
 scores: this.data.scores,
 score: score
 })
 }
})

wxss

/*评价区域 */
.container .evaluate_contant .evaluate_item {
 font-size: 30rpx;
 color: gray;
 margin-left: 20rpx;
 margin-top: 30rpx;
}

/*评价标题 */
.container .evaluate_contant .evaluate_item .evaluate_title {
 display: inline-block;
}

/*评价盒子 */
.container .evaluate_contant .evaluate_item .evaluate_box {
 position: absolute;
 left: 220rpx;
 width: 100%;
 display: inline-block;
}

/*星星评价的每个图片 */
.container .evaluate_contant .evaluate_item .evaluate_box .star-image {
 position: absolute;
 width: 40rpx;
 height: 40rpx;
 src: "../../images/no-star.png";
}

/*星星的左边和右边区域<点击左边半个星星,点击右边整个星星> */
.container .evaluate_contant .evaluate_item .evaluate_box .star-image .item {
 position: absolute;
 top: 0rpx;
 width: 20rpx;
 height: 40rpx;
}

/*按钮 */
.container .evaluate_contant .submit_button {
 height: 60rpx;
 font-size: 30rpx;
 line-height: 60rpx;
 margin: 20rpx;
}

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

Javascript 相关文章推荐
jQuery 性能优化指南 (1)
May 21 Javascript
javaScript 动态访问JSon元素示例代码
Aug 30 Javascript
JS的参数传递示例介绍
Feb 08 Javascript
jquery+CSS3实现淘宝移动网页菜单效果
Aug 31 Javascript
javascript设置和获取cookie的方法实例详解
Jan 05 Javascript
纯js实现倒计时功能
Jan 06 Javascript
vue实现验证码按钮倒计时功能
Apr 10 Javascript
js input输入百分号保存数据库失败的解决方法
May 26 Javascript
详解微信小程序之scroll-view的flex布局问题
Jan 16 Javascript
微信小程序语音同步智能识别的实现案例代码解析
May 29 Javascript
js实现前端界面导航栏下拉列表
Aug 27 Javascript
JavaScript小技巧带你提升你的代码技能
Sep 15 Javascript
使用Object.defineProperty如何巧妙找到修改某个变量的准确代码位置
Nov 02 #Javascript
微信小程序实现点赞、取消点赞功能
Nov 02 #Javascript
Vue利用History记录上一页面的数据方法实例
Nov 02 #Javascript
vue如何根据网站路由判断页面主题色详解
Nov 02 #Javascript
小程序实现列表点赞功能
Nov 02 #Javascript
Vue中的vue-resource示例详解
Nov 02 #Javascript
微信小程序实现列表页的点赞和取消点赞功能
Nov 02 #Javascript
You might like
php中的数组操作函数整理
2008/08/18 PHP
php strcmp使用说明
2010/04/22 PHP
php学习笔记之 函数声明(二)
2011/06/09 PHP
最新制作ThinkPHP3.2.3完全开发手册
2015/11/23 PHP
PHP中的数组处理函数实例总结
2016/01/09 PHP
Laravel学习教程之IOC容器的介绍与用例
2017/08/15 PHP
jquery弹出框的用法示例(一)
2013/08/26 Javascript
jquery easyui 结合jsp简单展现table数据示例
2014/04/18 Javascript
Nodejs Express4.x开发框架随手笔记
2015/11/23 NodeJs
Bootstrap按钮下拉菜单组件详解
2016/05/10 Javascript
微信小程序 实战小程序实例
2016/10/08 Javascript
AngularJS实现路由实例
2017/02/12 Javascript
js中new一个对象的过程
2017/02/20 Javascript
想用好React的你必须要知道的一些事情
2017/07/24 Javascript
iview在vue-cli3如何按需加载的方法
2018/10/31 Javascript
微信小程序转发事件实现解析
2019/10/22 Javascript
Python中常见的数据类型小结
2015/08/29 Python
python按行读取文件,去掉每行的换行符\n的实例
2018/04/19 Python
python 对多个csv文件分别进行处理的方法
2019/01/07 Python
python3实现表白神器
2019/04/09 Python
Django网络框架之HelloDjango项目创建教程
2019/06/06 Python
Python中函数参数匹配模型详解
2019/06/09 Python
python3 selenium自动化 frame表单嵌套的切换方法
2019/08/23 Python
Python正则表达式学习小例子
2020/03/03 Python
Python描述符descriptor使用原理解析
2020/03/21 Python
python对execl 处理操作代码
2020/06/22 Python
用Python开发app后端有优势吗
2020/06/29 Python
记一次django内存异常排查及解决方法
2020/08/07 Python
约瑟夫·特纳男装:Joseph Turner
2017/10/10 全球购物
英国折扣零售连锁店:QD Stores
2018/12/08 全球购物
《雾凇》教学反思
2014/02/17 职场文书
弘扬雷锋精神活动演讲稿
2014/03/04 职场文书
出纳担保书范文
2014/04/02 职场文书
留守儿童工作方案
2014/06/02 职场文书
抗洪救灾感谢信
2015/01/22 职场文书
2015年学校教研室主任工作总结
2015/07/20 职场文书