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


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使用手册之三 CSS操作
Mar 24 Javascript
JavaScript与函数式编程解释
Apr 27 Javascript
javascript之querySelector和querySelectorAll使用说明
Oct 09 Javascript
在jQuery ajax中按钮button和submit的区别分析
Oct 07 Javascript
setInterval,setTimeout与jquery混用的问题
Apr 08 Javascript
js作用域及作用域链概念理解及使用
Apr 15 Javascript
点击显示指定元素隐藏其他同辈元素的方法
Feb 19 Javascript
PHP实现的各种中文编码转换类分享
Jan 23 Javascript
JS基于cookie实现来宾统计记录访客信息的方法
Aug 04 Javascript
使用ionic在首页新闻中应用到的跑马灯效果的实现方法
Feb 13 Javascript
微信小程序实现全局搜索代码高亮的示例
Mar 30 Javascript
解决echarts的多个折现数据出现坐标和值对不上的问题
Dec 28 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连接MYSQL成功与否的代码
2013/08/16 PHP
php中的curl使用入门教程和常见用法实例
2014/04/10 PHP
PHP反射机制用法实例
2014/08/28 PHP
php实现插入数组但不影响原有顺序的方法
2015/03/27 PHP
php实现文本数据导入SQL SERVER
2015/05/17 PHP
支持中文的PHP按字符串长度分割成数组代码
2015/05/17 PHP
从JavaScript的函数重名看其初始化方式
2007/03/08 Javascript
javascript的onchange事件与jQuery的change()方法比较
2009/09/28 Javascript
JQuery跨Iframe选择实现代码
2010/08/19 Javascript
js中复制行和删除行的操作实例
2013/06/25 Javascript
用jQuery模拟select下拉框的简单示例代码
2014/01/26 Javascript
jQuery插件animateSlide制作多点滑动幻灯片
2015/06/11 Javascript
浅谈javascript获取元素transform参数
2015/07/24 Javascript
js判断空对象的实例(超简单)
2016/07/26 Javascript
a标签置灰不可点击的实现方法
2017/02/06 Javascript
深入理解vue $refs的基本用法
2017/07/13 Javascript
纯js实现画一棵树的示例
2017/09/05 Javascript
Vue2.0 slot分发内容与props验证的方法
2017/12/12 Javascript
vue父组件向子组件(props)传递数据的方法
2018/01/02 Javascript
微信小程序实现图片上传功能实例(前端+PHP后端)
2018/01/10 Javascript
vue使用swiper.js重叠轮播组建样式
2019/11/14 Javascript
vue项目在线上服务器访问失败原因分析
2020/08/14 Javascript
Bootstrap告警框(alert)实现弹出效果和短暂显示后上浮消失的示例代码
2020/08/27 Javascript
JS实现无限轮播无倒退效果
2020/09/21 Javascript
[02:36]DOTA2英雄基础教程 帕格纳
2014/01/20 DOTA
[43:41]VP vs RNG 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.21.mp4
2020/07/19 DOTA
python使用PIL模块实现给图片打水印的方法
2015/05/22 Python
anaconda3安装及jupyter环境配置全教程
2020/08/24 Python
纽约21世纪百货官网:Century 21
2016/08/27 全球购物
美国受信赖的教育产品供应商:Nest Learning
2018/06/14 全球购物
《小山羊和小灰兔》教学反思
2014/02/19 职场文书
毕业生欢送会主持词
2014/03/31 职场文书
爱情寄语大全
2014/04/09 职场文书
共产党员岗位承诺书
2014/05/29 职场文书
2014年师德师风自我剖析材料
2014/09/27 职场文书
交通处罚决定书
2015/06/24 职场文书