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


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中的window.open返回object的错误的解决方法
Aug 15 Javascript
jQuery源码中的chunker 正则过滤符分析
Jul 31 Javascript
jQuery.query.js 取参数的两点问题分析
Aug 06 Javascript
javascript利用控件对windows的操作实现原理与应用
Dec 23 Javascript
简单学习JavaScript中的for语句循环结构
Nov 10 Javascript
js中开关变量使用实例
Feb 24 Javascript
微信小程序上传图片到php服务器的方法
May 23 Javascript
javascript面向对象三大特征之封装实例详解
Jul 24 Javascript
Vue项目页面跳转时浏览器窗口上方显示进度条功能
Mar 26 Javascript
javascript+Canvas实现画板功能
Jun 23 Javascript
在react项目中使用antd的form组件,动态设置input框的值
Oct 24 Javascript
vue使用vant中的checkbox实现全选功能
Nov 17 Vue.js
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实现数组筛选奇数和偶数示例
2014/04/11 PHP
浅谈php+phpStorm+xdebug配置方法
2015/09/17 PHP
基于PHP技术开发客服工单系统
2016/01/06 PHP
用javascript实现自定义标签
2007/05/08 Javascript
JavaScript获取onclick、onchange等事件值的代码
2013/07/22 Javascript
Tab切换组件(选项卡功能)实例代码
2013/11/21 Javascript
基于jquery的simpleValidate简易验证插件
2014/01/31 Javascript
JS+CSS实现美化的下拉列表框效果
2015/08/11 Javascript
jQuery实现的Tab滑动选项卡及图片切换(多种效果)小结
2015/09/14 Javascript
限制复选框最多选择项的实现代码
2016/05/30 Javascript
微信小程序之购物车功能
2020/09/23 Javascript
vue组件watch属性实例讲解
2017/11/07 Javascript
JavaScript常用截取字符串的三种方式用法区别实例解析
2018/05/15 Javascript
微信小程序异步API为Promise简化异步编程的操作方法
2018/08/14 Javascript
Vue实现图片与文字混输效果
2019/12/04 Javascript
如何通过JS实现转码与解码
2020/02/21 Javascript
[04:23]DOTA2上海特锦赛小组赛第一日 TOP10精彩集锦
2016/02/27 DOTA
Python实现发送email的几种常用方法
2014/08/18 Python
python实现在无须过多援引的情况下创建字典的方法
2014/09/25 Python
python中readline判断文件读取结束的方法
2014/11/08 Python
Linux下为不同版本python安装第三方库
2016/08/31 Python
使用python实现接口的方法
2017/07/07 Python
在交互式环境中执行Python程序过程详解
2019/07/12 Python
python tornado修改log输出方式
2019/11/18 Python
python小项目之五子棋游戏
2019/12/26 Python
css3动画效果小结(推荐)
2016/07/25 HTML / CSS
Shop Apotheke瑞士:您的健康与美容网上商店
2019/10/09 全球购物
Android面试题及答案
2015/09/04 面试题
几个Shell Script面试题
2012/08/31 面试题
秋季婚礼证婚词
2014/01/11 职场文书
校本教研工作制度
2014/01/22 职场文书
会计学自我鉴定
2014/02/06 职场文书
个人贷款承诺书
2014/03/28 职场文书
详解Python小数据池和代码块缓存机制
2021/04/07 Python
MySQL表的增删改查基础教程
2021/04/07 MySQL
浅析Python OpenCV三种滤镜效果
2022/04/11 Python