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


Posted in Javascript onNovember 01, 2020

本文实例为大家分享了微信小程序实现星星评分的具体代码,供大家参考,具体内容如下

思路很简单,小星星都是一张张独立的图片,点击的时候改变图片的路径就可以了。
我是用背景图片做的,先给盒子设置背景图片为灰色的小星星,盒子是根据js文件中的stars数组循环出来的,根据flag的值确定是灰色的小星星还是黄色的小星星,点击的时候获取当下这个盒子的index值,然后去更改stars数组中索引值小于等于index的每一项的flag就可以了。
当然,也可以用类名来控制灰色和黄色的小星星,在点击的时候操作类名也是可以实现的。

实现代码如下:

*.wxml文件
<view class="container">
 <view class='stars'>
 <image src=''></image>
 <view class='content'>
 <view>评分</view>
 <view>
 <view wx:for="{{stars}}" wx:key="" style='background:url("{{item.flag==1?item.bgImg:item.bgfImg}}") no-repeat top; background-size:100%;' data-index="{{index}}" bindtap='score'></view>
 </view>
 </view>
 </view>
 <view class='reviews'>
 <textarea placeholder='请写下购买体会或商品的相关信息,可以拉其他小伙伴提供参考~(评价在100字以内)'></textarea>
 </view>
</view>
*.wxss文件
.stars{
 padding:85rpx 0 60rpx 273rpx;
 box-sizing: border-box;
 position: relative;
 border-bottom: 1rpx solid #ececec;
 background-color: #fff;
}
.stars image{
 width: 190rpx;
 height: 190rpx;
 border: 1rpx solid #000;
 position: absolute;
 top: 41rpx;
 left: 36rpx;
}
.stars .content view{
 font-size: 32rpx;
 color: #4a4a4a;
}
.stars .content>view:last-of-type{
 height: 40rpx;
 margin-top: 48rpx;
}
.stars .content>view:last-of-type view{
 float: left;
 width: 42rpx;
 height: 42rpx;
 margin-right: 25rpx;
 background-size: 100% 100%;
}
*.js文件
 data: {
 stars:[
 {
 flag:1,
 bgImg: "/star.png",
 bgfImg:"/f_star.png"
 },
 {
 flag: 1,
 bgImg: "/star.png",
 bgfImg: "/f_star.png"
 },
 {
 flag: 1,
 bgImg: "/star.png",
 bgfImg: "/f_star.png"
 },
 {
 flag: 1,
 bgImg: "/star.png",
 bgfImg: "/f_star.png"
 },
 {
 flag: 1,
 bgImg: "/star.png",
 bgfImg: "/f_star.png"
 }
 ]
 },
 score:function(e){
 var that=this;
 for(var i=0;i<that.data.stars.length;i++){
 var allItem = 'stars['+i+'].flag';
 that.setData({
 [allItem]: 1
 })
 }
 var index=e.currentTarget.dataset.index;
 for(var i=0;i<=index;i++){
 var item = 'stars['+i+'].flag';
 that.setData({
 [item]:2
 })
 }
 },

代码分析:

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

效果图:

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于jquery的checkbox下拉框插件代码
Jun 25 Javascript
javascript 日期时间 转换的方法
Feb 21 Javascript
JS+CSS实现感应鼠标渐变显示DIV层的方法
Feb 20 Javascript
浅析Javascript中bind()方法的使用与实现
Apr 29 Javascript
jQuery网页定位导航特效实现方法
Dec 19 Javascript
基于vue-resource jsonp跨域问题的解决方法
Feb 03 Javascript
基于vue 添加axios组件,解决post传参数为null的问题
Mar 05 Javascript
jQuery实现模糊查询的方法分析
May 10 jQuery
jquery 通过ajax请求获取后台数据显示在表格上的方法
Aug 08 jQuery
element-ui组件中input等的change事件中传递自定义参数
May 22 Javascript
js实现多个标题吸顶效果
Jan 08 Javascript
Nest.js参数校验和自定义返回数据格式详解
Mar 29 Javascript
Express 配置HTML页面访问的实现
Nov 01 #Javascript
ant design vue 表格table 默认勾选几项的操作
Oct 31 #Javascript
浅谈Vue使用Cascader级联选择器数据回显中的坑
Oct 31 #Javascript
Ant design vue中的联动选择取消操作
Oct 31 #Javascript
Ant Design Vue table中列超长显示...并加提示语的实例
Oct 31 #Javascript
vue中可编辑树状表格的实现代码
Oct 31 #Javascript
Ant Design Pro 之 ProTable使用操作
Oct 31 #Javascript
You might like
PHP 数组教程 定义数组
2009/10/23 PHP
匹配csdn用户数据库与官方用户的重合度并将重叠部分的用户筛选出来
2011/12/25 PHP
php cookie使用方法学习笔记分享
2013/11/07 PHP
php使用GD库创建图片缩略图的方法
2015/06/10 PHP
php文件上传的两种实现方法
2016/04/04 PHP
浅谈PHP检查数组中是否存在某个值 in_array 函数
2016/06/13 PHP
phpStudy配置多站点多域名方法及遇到的403错误解决方法
2017/10/19 PHP
Laravel 集成 Geetest验证码的方法
2018/05/14 PHP
PHP实现15位身份证号转18位的方法分析
2019/10/16 PHP
深入理解JavaScript系列(50):Function模式(下篇)
2015/03/04 Javascript
jQuery 1.9.1源码分析系列(十)事件系统之主动触发事件和模拟冒泡处理
2015/11/24 Javascript
基于原生JS实现图片裁剪
2016/08/01 Javascript
Angular4编程之表单响应功能示例
2017/12/13 Javascript
解析vue中的$mount
2017/12/21 Javascript
在vue项目中,使用axios跨域处理
2018/03/07 Javascript
vue-rx的初步使用教程
2018/09/21 Javascript
微信小程序实现左侧滑栏过程解析
2019/08/26 Javascript
记录vue做微信自定义分享的一些问题
2019/09/12 Javascript
Python单链表简单实现代码
2016/04/27 Python
使用XML库的方式,实现RPC通信的方法(推荐)
2017/06/14 Python
python 垃圾收集机制的实例详解
2017/08/20 Python
python实现随机调用一个浏览器打开网页
2018/04/21 Python
python多继承(钻石继承)问题和解决方法简单示例
2019/10/21 Python
Python模块的定义,模块的导入,__name__用法实例分析
2020/01/07 Python
详解使用python3.7配置开发钉钉群自定义机器人(2020年新版攻略)
2020/04/01 Python
HTML5 Canvas实现烟花绽放特效
2016/03/02 HTML / CSS
数字漫画:comiXology
2020/06/13 全球购物
波兰运动鞋网上商店:Distance.pl
2020/07/30 全球购物
女大学生个人求职信
2013/12/09 职场文书
小学生运动会通讯稿
2014/09/23 职场文书
2014年作风建设剖析材料
2014/10/23 职场文书
2014社会治安综合治理工作总结
2014/12/04 职场文书
投标承诺函格式
2015/01/21 职场文书
幼儿园大班个人总结
2015/02/28 职场文书
工程技术员岗位职责
2015/04/11 职场文书
写作之关于描写老人的好段摘抄
2019/11/14 职场文书