微信小程序制作五星评分组件

这是自己做的一个五星评分组件,直接放项目里用，没有抽取为一个单独的组件，因为本身就很小，下面是一个纯显示的五星评级，如果需要打分，可以在image上加上点击事件，动态改变值。

index.wxml

<block wx:for="{{imgs}}" wx:key="{{item.id}}"><image class="star" src="{{item.id>starId?src:src1}}"></image>
</block>

index.wxss

.star{width: 25px;height: 25px;margin: 0 5rpx;vertical-align: middle;}

index.js

data:{imgs:[{id:1},{id:2},{id:3},{id:4},{id:5}],src:'../../imgs/star.png',src1:'../../imgs/star_yellow.png'
},
onLoad:function () {this.setData({starId:3})
}

微信小程序制作五星评分组件相关推荐

微信小程序实现五星评分效果
直接上代码比较简单 wxml <block wx:for="{{tiyan}}" wx:key="index"><block wx:for=& ...
微信小程序实现星星评分组件(原生）
1.实现效果 2.组件介绍 3.部分代码 // components/rating/index.js Component({/*** 组件的属性列表*/properties: {stars:{type ...
微信小程序之五星评分效果
自己写的Demo 数据是自己模拟的希望下面的内容能够对大家有所帮助,不喜勿喷! 下面上代码 date 数据格式: var dateList = [{userId: 0,name: '王隔壁',na ...
微信小程序下拉框插件_微信小程序下拉框组件使用方法详解
本文实例为大家分享了微信小程序下拉框组件的使用方法,供大家参考,具体内容如下适用场景 1.省市三级联动 2.出生日期选择 3.性别选择 4.一般性的下拉选择等一.省市三级联动使用注意mode = ...
微信小程序引入骨架屏组件
微信小程序引入骨架屏组件参考地址:https://github.com/cytle/ma-skeleton.git 1.克隆项目 2.把项目里的组件skeleton文件复制到自己的项目里 3.复制& ...
关于微信小程序如何使用Vant组件
微信小程序如何使用Vant组件前言一.微信小程序自动查找第二种前言今天闲着没事,兴趣来了,想写写微信小程序,用原生的敲,因为懒得原因,不想再去封装一些组件库,就想当Vant,引用Vant真的 ...
微信小程序制作——获取用户信息
微信小程序制作--获取用户信息 1.获取用户信息方式一 wxml <view bindtap="getUserName">获取当前用户名</view> j ...
微信小程序入门之常用组件(04)
常见组件重点讲解微信小程序中常见的布局组件 view,text,rich-text,button,image,navigator,icon,swiper, radio,checkbox 等一.vi ...
基于微信小程序的体育课评分系统小程序
文末联系获取源码开发语言:Java 框架:ssm JDK版本:JDK1.8 服务器:tomcat7 数据库:mysql 5.7/8.0 数据库工具:Navicat11 开发软件:eclipse/my ...

微信小程序制作五星评分组件

微信小程序制作五星评分组件相关推荐

最新文章

热门文章

微信小程序 制作五星评分组件

微信小程序 制作五星评分组件相关推荐

最新文章

热门文章

微信小程序制作五星评分组件

微信小程序制作五星评分组件相关推荐