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


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实现x秒后自动跳转到一个页面
Jan 03 Javascript
JavaScript将一个数组插入到另一个数组的方法
Mar 19 Javascript
JavaScript如何实现对数字保留两位小数一位自动补零
Dec 18 Javascript
详解JavaScript设计模式开发中的桥接模式使用
May 18 Javascript
jquery滚动条插件(可以自定义)
Dec 11 Javascript
js 去掉字符串前后空格实现代码集合
Mar 25 Javascript
详解html-webpack-plugin用法全解
Jan 22 Javascript
利用js实现前后台传送Json的示例代码
Mar 29 Javascript
JavaScript生成随机验证码代码实例
Sep 28 Javascript
Node.js Domain 模块实例详解
Mar 18 Javascript
jQuery实现滑动开关效果
Aug 02 jQuery
js实现炫酷光感效果
Sep 05 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
人族 TERRAN 概述
2020/03/14 星际争霸
第六节--访问属性和方法
2006/11/16 PHP
15种PHP Encoder的比较
2007/03/06 PHP
PHP中each与list用法分析
2016/01/08 PHP
比较简单实用的使用正则三种版本的js去空格处理方法
2007/11/18 Javascript
IE Firefox 使用自定义标签的区别
2009/10/15 Javascript
jquery内置验证(validate)使用方法示例(表单验证)
2013/12/04 Javascript
jquery实现导航固定顶部的效果仿蘑菇街
2014/10/22 Javascript
基于javascript的COOkie的操作实现只能点一次
2014/12/26 Javascript
javascript常用功能汇总
2015/07/05 Javascript
分享几种比较简单实用的JavaScript tabel切换
2015/12/31 Javascript
实例详解JavaScript获取链接参数的方法
2016/01/01 Javascript
Vue自定义指令介绍(2)
2016/12/08 Javascript
微信小程序 仿猫眼实现实例代码
2017/03/14 Javascript
React Native使用百度Echarts显示图表的示例代码
2017/11/07 Javascript
详解vue-cli 本地开发mock数据使用方法
2018/05/29 Javascript
JS逻辑运算符短路操作实例分析
2018/07/09 Javascript
Vue中mintui的field实现blur和focus事件的方法
2018/08/25 Javascript
微信小程序 授权登录详解(附完整源码)
2019/08/23 Javascript
原生js+canvas实现下雪效果
2020/08/02 Javascript
python pygame模块编写飞机大战
2018/11/20 Python
用python生成(动态彩色)二维码的方法(使用myqr库实现)
2019/06/24 Python
对python 调用类属性的方法详解
2019/07/02 Python
利用Python实现某OA系统的自动定位功能
2020/05/27 Python
Python之字典对象的几种创建方法
2020/09/30 Python
Selenium获取登录Cookies并添加Cookies自动登录的方法
2020/12/04 Python
墨西哥运动服饰和鞋网上商店:Netshoes墨西哥
2016/07/28 全球购物
美国在线轮胎零售商:SimpleTire
2019/04/08 全球购物
Yves Rocher捷克官方网站:植物化妆品的创造者
2019/07/31 全球购物
Ever New美国:澳大利亚领先的女装时尚品牌
2019/11/28 全球购物
祝寿主持词
2015/07/02 职场文书
小学班主任研修日志
2015/11/13 职场文书
2016年大学生暑期社会实践方案
2015/11/26 职场文书
只需要12页,掌握撰写一流商业计划书的技巧
2019/05/07 职场文书
JavaScript 防篡改对象的用法示例
2021/04/24 Javascript
python画条形图的具体代码
2022/04/20 Python