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


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 相关文章推荐
JS getStyle获取最终样式函数代码
Apr 01 Javascript
ExtJS 下拉多选框lovcombo
May 19 Javascript
一个简单的JavaScript数据缓存系统实现代码
Oct 24 Javascript
js中判断文本框是否为空的两种方法
Jul 31 Javascript
jquery学习笔记 用jquery实现无刷新登录
Aug 08 Javascript
JavaScript操作HTML元素和样式的方法详解
Oct 21 Javascript
详解用Node.js实现Restful风格webservice
Sep 29 Javascript
Django+Vue跨域环境配置详解
Jul 06 Javascript
Angular异步变同步处理方法
Aug 13 Javascript
深入理解JavaScript 中的执行上下文和执行栈
Oct 23 Javascript
Angular实现svg和png图片下载实现
May 05 Javascript
微信小程序实现签到弹窗动画
Sep 21 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
jQuery入门第一课 jQuery选择符
2010/03/14 Javascript
javascript开发技术大全-第3章 js数据类型
2011/07/03 Javascript
使用js解决由border属性引起的div宽度问题
2013/11/26 Javascript
jQuery实现伸展与合拢panel的方法
2015/04/30 Javascript
JavaScript中for循环的使用详解
2015/06/03 Javascript
Nodejs如何搭建Web服务器
2016/03/28 NodeJs
手机端实现Bootstrap简单图片轮播效果
2016/10/13 Javascript
如何清除IE10+ input X 文本框的叉叉和密码输入框的眼睛图标
2016/12/21 Javascript
深入理解Angularjs向指令传递数据双向绑定机制
2016/12/31 Javascript
JS实现获取进今年第几天是周几的方法分析
2018/06/27 Javascript
详解vue-cli脚手架中webpack配置方法
2018/08/22 Javascript
Vue中使用 setTimeout() setInterval()函数的问题
2018/09/13 Javascript
Vee-validate 父组件获取子组件表单校验结果的实例代码
2019/05/20 Javascript
vue安装遇到的5个报错及解决方法
2019/06/12 Javascript
在 Vue 中编写 SVG 图标组件的方法
2020/02/24 Javascript
[48:11]完美世界DOTA2联赛 Magma vs GXR 第二场 11.07
2020/11/10 DOTA
在Mac OS上搭建Python的开发环境
2015/12/24 Python
Python基于Floyd算法求解最短路径距离问题实例详解
2018/05/16 Python
python实现nao机器人手臂动作控制
2019/04/29 Python
python 进程的几种创建方式详解
2019/08/29 Python
利用 Flask 动态展示 Pyecharts 图表数据方法小结
2019/09/04 Python
tensorflow求导和梯度计算实例
2020/01/23 Python
中国领先的专业演出票务网:永乐票务
2016/08/29 全球购物
英国最受欢迎的平价女士时装零售商:Roman Originals
2019/11/02 全球购物
澳大利亚购买太阳镜和眼镜网站:Glamoureyes
2020/09/22 全球购物
抽象方法、抽象类怎样声明
2014/10/25 面试题
探矿工程师自荐信
2014/01/24 职场文书
入党申请自荐书范文
2014/02/11 职场文书
单位消防安全责任书
2014/07/23 职场文书
汽车服务工程专业自荐信
2014/09/02 职场文书
工作时间擅自离岗检讨书
2014/10/24 职场文书
出纳年终工作总结2014
2014/12/05 职场文书
护士先进个人总结
2015/02/13 职场文书
项目验收申请报告
2015/05/15 职场文书
在前女友婚礼上,用Python破解了现场的WIFI还把名称改成了
2021/05/28 Python
Java循环队列与非循环队列的区别总结
2021/06/22 Java/Android