微信小程序实现星星评分组件(原生）

1.实现效果

2.组件介绍

3.部分代码

// components/rating/index.js
Component({/*** 组件的属性列表*/properties: {stars:{type:Array,value:[1,1,1,1,1]},// 是否只读readOnly:{type:Boolean,value:false,},// 星星大小starWidth:{type:Number,value:54,},// 显示分数showRating:{type:Boolean,value:false,},rating:{type:Number,value:'',}},/*** 组件的初始数据*/data: {},lifetimes:{// 页面创建时执行attached(){let rating=this.properties.ratingswitch (rating) {case 1:this.properties.stars=[2,1,1,1,1]break;case 2:this.properties.stars=[2,2,1,1,1]break;case 3:this.properties.stars=[2,2,2,1,1]break;case 4:this.properties.stars=[2,2,2,2,1]break;case 5:this.properties.stars=[2,2,2,2,2]break;}this.setData({stars:this.properties.stars})}},/*** 组件的方法列表*/methods: {/*** 选择星星* @param {*} e*/choseStar: function (e) {let {stars}=this.data;stars.forEach((item,index)=> {stars[index] = 1;this.setData({stars,})})var {index} = e.currentTarget.dataset;for (var i = 0; i <= index; i++) {var item = 'stars[' + i + ']';this.setData({[item]: 2})}let a = this.data.stars.filter(item => item == 2)this.setData({rating: a.length})this.triggerEvent('click',this.data.rating);},}
})

4.完整代码

https://gitee.com/susuhhhhhh/components

5.更多小程序案例

https://gitee.com/susuhhhhhh/wxmini_demo

微信小程序实现星星评分组件(原生）相关推荐

微信小程序实现星星评分效果
微信小程序实现星星评分效果思路很简单,小星星都是一张张独立的图片,点击的时候改变图片的路径就可以了. 我是用背景图片做的,先给盒子设置背景图片为灰色的小星星,盒子是根据js文件中的stars数组循环 ...
微信小程序制作五星评分组件
这是自己做的一个五星评分组件,直接放项目里用,没有抽取为一个单独的组件,因为本身就很小,下面是一个纯显示的五星评级,如果需要打分,可以在image上加上点击事件,动态改变值. index.wxml & ...
微信小程序实现星星评分-整颗星星评分、半颗星星评分、任意颗星星展示
一.实现整颗星星评分(默认一颗星) 1.效果图 2.准备图片 3.remark.wxml <view class="stars"><view wx:for=&qu ...
微信小程序实现星星评分
1.实现效果点击星星 =>文字相应选中点击文字=>星星相应的选中1-5个 2.实现原理 1.默认所有星星的选中值为1,1表示不选中,2表示选中. 2.获取当前星星的index值,假设此 ...
关于微信小程序如何使用Vant组件
微信小程序如何使用Vant组件前言一.微信小程序自动查找第二种前言今天闲着没事,兴趣来了,想写写微信小程序,用原生的敲,因为懒得原因,不想再去封装一些组件库,就想当Vant,引用Vant真的 ...
微信小程序自定义导航栏组件
效果图首先要先在 json文件里加上 "navigationStyle":"custom", 这句,去掉原生的自定义导航栏一.子组件-wxml <vi ...
微信小程序下拉框插件_微信小程序下拉框组件使用方法详解
本文实例为大家分享了微信小程序下拉框组件的使用方法,供大家参考,具体内容如下适用场景 1.省市三级联动 2.出生日期选择 3.性别选择 4.一般性的下拉选择等一.省市三级联动使用注意mode = ...
微信小程序引入骨架屏组件
微信小程序引入骨架屏组件参考地址:https://github.com/cytle/ma-skeleton.git 1.克隆项目 2.把项目里的组件skeleton文件复制到自己的项目里 3.复制& ...
微信小程序入门之常用组件(04)
常见组件重点讲解微信小程序中常见的布局组件 view,text,rich-text,button,image,navigator,icon,swiper, radio,checkbox 等一.vi ...

微信小程序实现星星评分组件(原生）

1.实现效果

2.组件介绍

3.部分代码

4.完整代码

5.更多小程序案例

微信小程序实现星星评分组件(原生）相关推荐

最新文章

热门文章