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


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 相关文章推荐
ie6下png图片背景不透明的解决办法使用js实现
Jan 11 Javascript
jQuery实现的左右移动焦点图效果
Jan 14 Javascript
微信小程序 video详解及简单实例
Jan 16 Javascript
利用Js+Css实现折纸动态导航效果实例源码
Jan 25 Javascript
原生js仿淘宝网商品放大镜效果
Feb 28 Javascript
微信小程序中多个页面传参通信的学习与实践
May 05 Javascript
详解vue-router 2.0 常用基础知识点之router-link
May 10 Javascript
Vue项目自动转换 px 为 rem的实现方法
Oct 29 Javascript
在element-ui的select下拉框加上滚动加载
Apr 18 Javascript
解决Layui数据表格显示无数据提示的问题
Nov 14 Javascript
JS寄快递地址智能解析的实现代码
Jul 16 Javascript
vue+spring boot实现校验码功能
May 27 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请求用法实例分析
2020/02/28 PHP
JavaScript 事件对象的实现
2009/07/13 Javascript
javascript 日期常用的方法
2009/11/11 Javascript
javascript json2 使用方法
2010/03/16 Javascript
JavaScript ( (__ = !$ + $)[+$] + ({} + $)[_/_] +({} + $)[_/_] )
2011/02/25 Javascript
javascript动态的改变IFrame的高度实现自动伸展
2013/10/12 Javascript
js判断数据类型如判断是否为数组是否为字符串等等
2014/01/15 Javascript
jQuery $.extend()用法总结
2014/06/15 Javascript
js判断手机号运营商的方法
2015/10/23 Javascript
js贪吃蛇游戏实现思路和源码
2016/04/14 Javascript
JavaScript String 对象常用方法总结
2016/04/28 Javascript
jQuery中的each()详细介绍(推荐)
2016/05/25 Javascript
jQuery修改DOM结构_动力节点Java学院整理
2017/07/05 jQuery
利用weixin-java-miniapp生成小程序码并直接返回图片文件流的方法
2019/03/29 Javascript
JS定时器如何实现提交成功提示功能
2020/06/12 Javascript
通过实例解析chrome如何在mac环境中安装vue-devtools插件
2020/07/10 Javascript
[58:15]2018DOTA2亚洲邀请赛 4.1 小组赛 A组 NB vs Liquid
2018/04/02 DOTA
[50:27]Secret vs VG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Python实现读取目录所有文件的文件名并保存到txt文件代码
2014/11/22 Python
Python数据分析之双色球基于线性回归算法预测下期中奖结果示例
2018/02/08 Python
python中返回矩阵的行列方法
2018/04/04 Python
Python将列表数据写入文件(txt, csv,excel)
2019/04/03 Python
详解用pyecharts Geo实现动态数据热力图城市找不到问题解决
2019/06/26 Python
浅谈Django中view对数据库的调用方法
2019/07/18 Python
Python使用Pyqt5实现简易浏览器(最新版本测试过)
2020/04/27 Python
报社实习生自荐信
2014/01/24 职场文书
大三学生做职业规划:给未来找个方向
2014/02/24 职场文书
幼儿园师德师风学习材料
2014/05/29 职场文书
本科生求职信
2014/06/17 职场文书
电话客服专员岗位职责
2014/06/28 职场文书
党的群众路线对照检查材料
2014/09/22 职场文书
本科毕业论文致谢怎么写
2015/05/14 职场文书
天气温馨提示语
2015/07/14 职场文书
初中物理教学反思
2016/02/19 职场文书
一篇文章告诉你如何实现Vue前端分页和后端分页
2022/02/18 Vue.js
python​格式化字符串
2022/04/20 Python