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


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 相关文章推荐
用js实现多域名不同文件的调用方法
Jan 12 Javascript
ArrayList类(增强版)
Apr 04 Javascript
JavaScript 闭包深入理解(closure)
May 27 Javascript
基于jQuery替换table中的内容并显示进度条的代码
Aug 02 Javascript
jQuery控制iFrame(实例代码)
Nov 19 Javascript
基于vue.js轮播组件vue-awesome-swiper实现轮播图
Mar 17 Javascript
bootstrap日期控件问题(双日期、清空等问题解决)
Apr 19 Javascript
手把手教你搭建ES6的开发运行环境
Jul 11 Javascript
vue项目使用axios发送请求让ajax请求头部携带cookie的方法
Sep 26 Javascript
JavaScript实现学生在线做题计时器功能
Dec 05 Javascript
《javascript设计模式》学习笔记四:Javascript面向对象程序设计链式调用实例分析
Apr 07 Javascript
vue中父子组件的参数传递和应用示例
Jan 04 Vue.js
使用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+ajax实现图片文件上传功能实例
2014/06/17 PHP
基于PHP后台的Android新闻浏览客户端
2016/05/23 PHP
PHP实现的曲线统计图表示例
2016/11/10 PHP
ThinkPHP5.1表单令牌Token失效问题的解决
2019/03/22 PHP
浅谈laravel中的关联查询with的问题
2019/10/10 PHP
laravel5 Eloquent 实现事务方式
2019/10/21 PHP
javascript 处理事件绑定的一些兼容写法
2009/12/24 Javascript
jquery中获取id值方法小结
2013/09/22 Javascript
JavaScript简单实现网页回到顶部功能
2013/11/12 Javascript
javascript中的正则表达式使用指南
2015/03/01 Javascript
AngularJS基础知识笔记之表格
2015/05/10 Javascript
在JavaScript中call()与apply()区别
2016/01/22 Javascript
基于JS代码实现实时显示系统时间
2016/06/16 Javascript
jQuery中on方法使用注意事项详解
2017/02/15 Javascript
jQuery tip提示插件(实例分享)
2017/04/28 jQuery
Easyui在treegrid添加控件的实现方法
2017/06/23 Javascript
详解利用 Express 托管静态文件的方法
2017/09/18 Javascript
JS判断数组那点事
2017/10/10 Javascript
JS简单添加元素新节点的方法示例
2018/02/10 Javascript
Python 调用VC++的动态链接库(DLL)
2008/09/06 Python
python3爬虫之设计签名小程序
2018/06/19 Python
Python寻找两个有序数组的中位数实例详解
2018/12/05 Python
python用post访问restful服务接口的方法
2018/12/07 Python
python将字典列表导出为Excel文件的方法
2019/09/02 Python
查看keras的默认backend实现方式
2020/06/19 Python
selenium3.0+python之环境搭建的方法步骤
2021/02/01 Python
Canvas 帧动画吃苹果小游戏
2020/08/05 HTML / CSS
捷克家具销售网站:SCONTO Nábytek
2020/01/02 全球购物
Java模拟试题
2014/11/10 面试题
UNIX文件名称有什么规定
2013/03/25 面试题
opencv实现图像平移效果
2021/03/24 Python
法律专业自我鉴定
2013/10/03 职场文书
党员自我评价分享
2013/12/13 职场文书
《口技》教学反思
2014/02/21 职场文书
应聘教师自荐书
2014/06/16 职场文书
如何使用分区处理MySQL的亿级数据优化
2021/06/18 MySQL