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


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实现div浮动层跟随页面滚动效果
Feb 11 Javascript
JavaScript中的console.trace()函数介绍
Dec 29 Javascript
JavaScript的内存释放问题详解
Jan 21 Javascript
7个有用的jQuery代码片段分享
May 19 Javascript
jQuery实现漂亮实用的商品图片tips提示框效果(无图片箭头+阴影)
Apr 16 Javascript
jquery 动态增加删除行的简单实例(推荐)
Oct 12 Javascript
JavaScript高仿支付宝倒计时页面及代码实现
Oct 21 Javascript
JavaScript中的普通函数和箭头函数的区别和用法详解
Mar 21 Javascript
利用jQuery异步上传文件的插件用法详解
Jul 19 jQuery
js+html5生成自动排列对话框实例
Oct 09 Javascript
CentOS环境中MySQL修改root密码方法
Jan 07 Javascript
请求时token过期自动刷新token操作
Sep 11 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 日期时间处理函数小结
2009/12/18 PHP
PHP发明人谈MVC和网站设计架构 貌似他不支持php用mvc
2011/06/04 PHP
Yii2前后台分离及migrate使用(七)
2016/05/04 PHP
Yii2框架dropDownList下拉菜单用法实例分析
2016/07/18 PHP
php异步:在php中使用fsockopen curl实现类似异步处理的功能方法
2016/12/10 PHP
php swoft框架实例用法
2020/12/22 PHP
选择器中含有空格在使用示例及注意事项
2013/07/31 Javascript
jquery批量控制form禁用的代码
2013/08/06 Javascript
js几秒以后倒计时跳转示例
2013/12/26 Javascript
jQuery制作的别致导航有阴影背景高亮模式窗口
2014/04/15 Javascript
JavaScript sub方法入门实例(把字符串显示为下标)
2014/10/17 Javascript
JavaScript弹窗基础篇
2016/04/27 Javascript
JQuery DIV 动态隐藏和显示的方法
2016/06/23 Javascript
聊一聊Vue.js过渡效果
2016/09/07 Javascript
JS正则表达式学习之贪婪和非贪婪模式实例总结
2016/12/26 Javascript
Javascript基础回顾之(一) 类型
2017/01/31 Javascript
前端开发之CSS原理详解
2017/03/11 Javascript
JS与jQuery实现子窗口获取父窗口元素值的方法
2017/04/17 jQuery
Angular4学习笔记router的简单使用
2018/03/30 Javascript
vue语法自动转typescript(解放双手)
2019/09/18 Javascript
使用vuex较为优雅的实现一个购物车功能的示例代码
2019/12/09 Javascript
js实现小星星游戏
2020/03/23 Javascript
用C++封装MySQL的API的教程
2015/05/06 Python
python 剪切移动文件的实现代码
2018/08/02 Python
python腾讯语音合成实现过程解析
2019/08/01 Python
python中的数组赋值与拷贝的区别详解
2019/11/26 Python
HTML5中语义化 b 和 i 标签
2008/10/17 HTML / CSS
HTML5里的placeholder属性使用实例和美化显示效果的方法
2014/04/23 HTML / CSS
Static Nested Class 和 Inner Class的不同
2013/11/28 面试题
实习生自我评价
2014/01/18 职场文书
个人现实表现材料
2014/02/04 职场文书
中层干部培训方案
2014/06/16 职场文书
团员自我评价范文
2015/03/10 职场文书
售后前台接待岗位职责
2015/04/03 职场文书
你对自己的信用报告有过了解吗?
2019/07/09 职场文书
在 HTML 页面中使用 React的场景分析
2022/01/18 Javascript