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


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 相关文章推荐
JTrackBar水平拖动效果
Jul 15 Javascript
js jquery获取随机生成id的服务器控件的三种方法
Jul 11 Javascript
Jquery插件easyUi表单验证提交(示例代码)
Dec 30 Javascript
js的[defer]和[async]属性
Nov 24 Javascript
sails框架的学习指南
Dec 22 Javascript
js实现纯前端的图片预览
Apr 27 Javascript
第一次接触神奇的Bootstrap基础排版
Jul 26 Javascript
纯JS实现只能输入数字的简单代码
Jun 21 Javascript
jQuery实现动态添加节点与遍历节点功能示例
Nov 09 jQuery
vue不操作dom实现图片轮播的示例代码
Dec 18 Javascript
微信小程序使用自定义组件导航实现当前页面高亮
Jan 02 Javascript
JavaScript嵌入百度地图API的最详细方法
Apr 16 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导出MySQL数据到Excel文件(fputcsv)
2011/07/03 PHP
php bootstrap实现简单登录
2016/03/08 PHP
thinkphp3.2.3 分页代码分享
2016/07/28 PHP
PHPstorm快捷键(分享)
2017/07/17 PHP
PHP中define() 与 const定义常量的区别详解
2019/06/25 PHP
在Laravel的Model层做数据缓存的实现
2019/09/26 PHP
PHP框架实现WebSocket在线聊天通讯系统
2019/11/21 PHP
JSON扫盲帖 JSON.as类教程
2009/02/16 Javascript
javascript 子窗体父窗体相互传值方法
2010/05/31 Javascript
jquery.Jwin.js 基于jquery的弹出层插件代码
2012/05/23 Javascript
如何让DIV可编辑、可拖动示例代码
2013/09/18 Javascript
javascript事件函数中获得事件源的两种不错方法
2014/03/17 Javascript
jquery实现对联广告的方法
2015/02/05 Javascript
javascript中动态函数用法实例分析
2015/05/14 Javascript
跨域资源共享 CORS 详解
2016/04/26 Javascript
Javascript点击其他任意地方隐藏关闭DIV实例
2016/06/21 Javascript
利用iscroll4实现轮播图效果实例代码
2017/01/11 Javascript
JavaScript定义函数的三种实现方法
2017/09/23 Javascript
Vue 组件注册全解析
2020/12/17 Vue.js
python处理圆角图片、圆形图片的例子
2014/04/25 Python
Python编程中字符串和列表的基本知识讲解
2015/10/14 Python
Python 处理数据的实例详解
2017/08/10 Python
django定期执行任务(实例讲解)
2017/11/03 Python
简单了解什么是神经网络
2017/12/23 Python
python更改已存在excel文件的方法
2018/05/03 Python
python使用turtle库与random库绘制雪花
2018/06/22 Python
在macOS上搭建python环境的实现方法
2019/08/13 Python
Python 实现大整数乘法算法的示例代码
2019/09/17 Python
Django 路由层URLconf的实现
2019/12/30 Python
python字典key不能是可以是啥类型
2020/08/04 Python
CSS3中Animation属性的使用详解
2015/08/06 HTML / CSS
巴西香水和化妆品购物网站:The Beauty Box
2019/09/03 全球购物
房屋租赁授权委托书范本
2014/09/20 职场文书
劳动者解除劳动合同通知书
2015/04/16 职场文书
mysql优化
2021/04/06 MySQL
python读取并查看npz/npy文件数据以及数据显示方法
2022/04/14 Python