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


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实现QueryString获取GET参数的方法
Jul 02 Javascript
js 动态加载事件的几种方法总结
Dec 25 Javascript
COM组件中调用JavaScript函数详解及实例
Feb 23 Javascript
10行原生JS实现文字无缝滚动(超简单)
Jan 02 Javascript
mint-ui 时间插件使用及获取选择值的方法
Feb 09 Javascript
详解Javascript中new()到底做了些什么?
Mar 29 Javascript
Vuejs+vue-router打包+Nginx配置的实例
Sep 20 Javascript
vue头部导航动态点击处理方法
Nov 02 Javascript
JS通过ajax + 多列布局 + 自动加载实现瀑布流效果
May 30 Javascript
layui-table对返回的数据进行转变显示的实例
Sep 04 Javascript
node后端服务保活的实现
Nov 10 Javascript
微信公众号服务器验证Token步骤图解
Dec 30 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判断远程图片或文件是否存在的实现代码
2014/02/20 PHP
php清空(删除)指定目录下的文件,不删除目录文件夹的实现代码
2014/09/04 PHP
字符串长度函数strlen和mb_strlen的区别示例介绍
2014/09/09 PHP
PDO::_construct讲解
2019/01/27 PHP
Javascript 面向对象编程(coolshell)
2012/03/18 Javascript
javascript继承之为什么要继承
2012/11/10 Javascript
jquery左右滚动焦点图banner图片鼠标经过显示上下页按钮
2013/10/11 Javascript
javascript中typeof的使用示例
2013/12/19 Javascript
利用jquery写的左右轮播图特效
2014/02/12 Javascript
js去除输入框中所有的空格和禁止输入空格的方法
2014/06/09 Javascript
jquery实现漂亮的二级下拉菜单代码
2015/08/26 Javascript
轻松学习jQuery插件EasyUI EasyUI创建树形菜单
2015/11/30 Javascript
使用node+vue.js实现SPA应用
2016/01/28 Javascript
使用jQuery的ajax方法向服务器发出get和post请求的方法
2017/01/13 Javascript
微信小程序 九宫格实例代码
2017/01/21 Javascript
Cropper.js 实现裁剪图片并上传(PC端)
2017/08/20 Javascript
JavaScript对JSON数组简单排序操作示例
2019/01/31 Javascript
vue 实现tab切换保持数据状态
2020/07/21 Javascript
Vue双向数据绑定(MVVM)的原理
2020/10/03 Javascript
[01:54]TI珍贵瞬间系列(五):压力
2020/08/29 DOTA
浅谈Python爬取网页的编码处理
2016/11/04 Python
Python极简代码实现杨辉三角示例代码
2016/11/15 Python
Python使用爬虫爬取静态网页图片的方法详解
2018/06/05 Python
PyQt5基本控件使用之消息弹出、用户输入、文件对话框的使用方法
2019/08/06 Python
python TK库简单应用(实时显示子进程输出)
2019/10/29 Python
如何更改 pandas dataframe 中两列的位置
2019/12/27 Python
pycharm新建Vue项目的方法步骤(图文)
2020/03/04 Python
深入剖析webstorage[html5的本地数据处理]
2016/07/11 HTML / CSS
使用phonegap获取位置信息的实现方法
2017/03/31 HTML / CSS
八年级生物教学反思
2014/01/22 职场文书
自荐信写法介绍
2014/01/25 职场文书
初中三好学生自我鉴定
2014/04/07 职场文书
实习科室评语
2015/01/04 职场文书
2015年全国科普日活动总结
2015/03/23 职场文书
律政俏佳人观后感
2015/06/09 职场文书
Java实现斗地主之洗牌发牌
2021/06/14 Java/Android