小程序 小星星评分功能，支持微信小程序以及抖音小程序！

小程序 小星星打分

用Uni开发的，公司这边的项目是字节小程序加微信小程序，这种写法非常简单，而且这两个小程序肯定是可以用的，实现思路也很简单，就是两种五角星图片的切换，循环生成你所需要的数量，根据点击获取到对应的索引，然后循环判断，索引小于等于的直接替换图片路径就可以，下面是功能图片。

接下来就贴代码了，首先是html部分,有一些写法是用的背景图插入图片，我嫌麻烦直接用的图片。

<view class="scoI">
	  <view v-for="(item,index) in stars" @click="score(index)" class="Scoring">
			<img :src="item.flag == 1 ? item.bgImg:item.bgfImg" alt="" srcset="" class="ScoringI">
	  </view>
</view>

样式没有过多的设置，我们还只有原型图，下面是Js部分

import bgImg from "@/static/1-.png"
import bgfImg from "@/static/1.png" //这里是把两张图片先引入，不然data内写图片路径上面会不显示

stars: [{ //声明的数据 需要几颗星星就写几个，flag是做判断用的
    flag: 1,
	bgImg: bgImg,
	bgfImg: bgfImg
	},
	{
	flag: 1,
	bgImg: bgImg,
	bgfImg: bgfImg
	},
	{
	flag: 1,
	bgImg: bgImg,
	bgfImg: bgfImg
	},
	{
	flag: 1,
	bgImg: bgImg,
	bgfImg: bgfImg
	},
	{
	flag: 1,
	bgImg: bgImg,
	bgfImg: bgfImg
	}
]

score(index) { //核心js方法，拿到点击索引，做判断切换图片路径
	this.stars.forEach((item,ind) =>{
	if (ind <= index) {
		item.flag = 2
	}else {
		item.flag = 1
	}
	})
}

这个就是写法了，非常简单，而且还好用，唯一不足就是打分后就最低得给一颗星星了，需要注意。