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


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 相关文章推荐
使用TextRange获取输入框中光标的位
Oct 14 Javascript
javascript flash下fromCharCode和charCodeAt方法使用说明
Jan 12 Javascript
JavaScript中window、doucment、body的解释
Aug 14 Javascript
JS与C#编码解码
Dec 03 Javascript
js与css实现弹出层覆盖整个页面的方法
Dec 13 Javascript
简单实现限制uploadify上传个数
Nov 16 Javascript
JavaScript实现瀑布流布局
Jun 28 Javascript
JavaScript 身份证号有效验证详解及实例代码
Oct 20 Javascript
js 去掉字符串前后空格实现代码集合
Mar 25 Javascript
微信小程序登录换取token的教程
May 31 Javascript
express express-session的使用小结
Dec 12 Javascript
angular组件间通讯的实现方法示例
May 07 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
dedecms后台验证码总提示错误的解决方法
2007/03/21 PHP
修改php.ini不生效问题解决方法(上传大于8M的文件)
2013/06/14 PHP
探讨:如何通过stats命令分析Memcached的内部状态
2013/06/14 PHP
php/js获取客户端mac地址的实现代码
2013/07/08 PHP
54个提高PHP程序运行效率的方法
2015/07/19 PHP
PHP与jquery实时显示网站在线人数实例详解
2016/12/02 PHP
使用javascript访问XML数据的实例
2006/12/27 Javascript
DWR Ext 加载数据
2009/03/22 Javascript
使用jquery与图片美化checkbox和radio控件的代码(打包下载)
2010/11/11 Javascript
jquery获取table中的某行全部td的内容方法
2013/03/08 Javascript
jsonp原理及使用
2013/10/28 Javascript
使用JQuery库提供的扩展功能实现自定义方法
2014/09/09 Javascript
JavaScript中常用的六种互动方法示例
2015/03/13 Javascript
分享12个实用的jQuery代码片段
2016/03/09 Javascript
javascript 中select框触发事件过程的分析
2017/08/01 Javascript
JavaScript手写数组的常用函数总结
2020/11/22 Javascript
[01:01:24]DOTA2上海特级锦标赛A组败者赛 EHOME VS CDEC第三局
2016/02/25 DOTA
Python学习笔记(一)(基础入门之环境搭建)
2014/06/05 Python
跟老齐学Python之折腾一下目录
2014/10/24 Python
WINDOWS 同时安装 python2 python3 后 pip 错误的解决方法
2017/03/16 Python
python爬虫_微信公众号推送信息爬取的实例
2017/10/23 Python
python3 打开外部程序及关闭的示例
2018/11/06 Python
利用arcgis的python读取要素的X,Y方法
2018/12/22 Python
python实现拼图小游戏
2020/02/22 Python
Windows 下python3.8环境安装教程图文详解
2020/03/11 Python
Python中Yield的基本用法
2020/10/18 Python
英国领先的运动营养品牌:Protein Dynamix
2018/01/02 全球购物
Vrbo西班牙:预订您的度假公寓(公寓、乡村房屋…)
2020/04/27 全球购物
资生堂英国官网:Shiseido英国
2020/12/30 全球购物
Ajax和javascript的区别
2013/07/20 面试题
学生个人求职自荐信格式
2013/09/23 职场文书
专科毕业生求职简历的自我评价
2013/10/12 职场文书
大学生学习自我评价
2014/01/13 职场文书
应届毕业生如何写求职信
2014/02/16 职场文书
大学生怎样写好自荐信
2014/02/25 职场文书
2015企业年终工作总结范文
2015/05/27 职场文书