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


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 相关文章推荐
JavaScript类和继承 prototype属性
Sep 03 Javascript
通过下拉框的值来确定输入框是否可以为空的代码
Oct 18 Javascript
js 函数调用模式小结
Dec 26 Javascript
JS控制阿拉伯数字转为中文大写示例代码
Sep 04 Javascript
jquery中的过滤操作详细解析
Dec 02 Javascript
javascript判断office版本示例
Apr 11 Javascript
JavaScript模拟实现继承的方法
Mar 30 Javascript
JS新包管理工具yarn和npm的对比与使用入门
Dec 09 Javascript
Angular实现一个简单的多选复选框的弹出框指令实例
Apr 25 Javascript
Node.js创建Web、TCP服务器
Dec 05 Javascript
关于Angularjs中跨域设置白名单问题
Apr 17 Javascript
jQuery实现input[type=file]多图预览上传删除等功能
Aug 02 jQuery
使用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 目录遍历、删除 函数的使用介绍
2013/04/28 PHP
PHP数据库操作Helper类完整实例
2016/05/11 PHP
CI框架(CodeIgniter)操作redis的方法详解
2018/01/25 PHP
扩展javascript的Date方法实现代码(prototype)
2010/11/20 Javascript
javascript中的self和this用法小结
2014/02/08 Javascript
JS组件Bootstrap实现弹出框效果代码
2016/04/26 Javascript
第一次接触神奇的Bootstrap菜单和导航
2016/08/01 Javascript
微信小程序 绘图之饼图实现
2016/10/24 Javascript
微信小程序 POST请求(网络请求)详解及实例代码
2016/11/16 Javascript
JS实现简单的二元方程计算器功能示例
2017/01/03 Javascript
JQuery EasyUI 结合ztrIee的后台页面开发实例
2017/09/01 jQuery
vue使用监听实现全选反选功能
2018/07/06 Javascript
详解angular应用容器化部署
2018/08/14 Javascript
JavaScript JMap类定义与使用方法示例
2019/01/22 Javascript
200行HTML+JavaScript实现年会抽奖程序
2019/01/22 Javascript
vue中typescript装饰器的使用方法超实用教程
2019/06/17 Javascript
Vue.js的模板语法详解
2020/02/16 Javascript
Python实现登录接口的示例代码
2017/07/21 Python
Python反转序列的方法实例分析
2018/03/21 Python
Python定义一个跨越多行的字符串的多种方法小结
2018/07/19 Python
python抓取网页内容并进行语音播报的方法
2018/12/24 Python
Python  Django 母版和继承解析
2019/08/09 Python
python sqlite的Row对象操作示例
2019/09/11 Python
Pycharm远程连接服务器并实现代码同步上传更新功能
2020/02/25 Python
python numpy库np.percentile用法说明
2020/06/08 Python
python中复数的共轭复数知识点总结
2020/12/06 Python
母亲七十大寿答谢词
2014/01/18 职场文书
马智宇婚礼主持词
2014/03/22 职场文书
本科毕业生应聘自荐信范文
2014/06/26 职场文书
土地租赁意向书
2014/07/30 职场文书
党的群众路线教育实践活动剖析材料
2014/09/30 职场文书
学生逃课检讨书1000字
2014/10/20 职场文书
夫妻忠诚协议范文
2014/11/16 职场文书
三峡人家导游词
2015/01/31 职场文书
pytorch常用数据类型所占字节数对照表一览
2021/05/17 Python
详解PHP用mb_string处理windows中文字符
2021/05/26 PHP