微信小程序星星评分代码片段（含半星）

代码思路
完整代码
代码片段
图片资源

写代码时需要一个点击星星评分的功能
安卓直接用RatingBar非常轻松的解决了
到了小程序，没有现成的封装方法可以用了，只能自己敲一个
(太难了，连图都是自己用PS切)

成果图:

代码思路

先从简单的分析，我们先不考虑半颗星星的情况，
那这样就是 总共5分 5颗星星

新建数组[0,0,0,0,0]作为为没有评分时的初始状态
（我们规定0为没有选中，1为选中状态）

假设我们现在点击了第一颗星星，那么数组就对应变化为[1,0,0,0,0]

再点击其他星星，数组变化也就一目了然了,就是对应元素0->1的变化
思路很清晰了，代码也就很简单啦

接下来我们分析复杂的情况，也就是有半颗星星的情况

首先，我们来看一张示例图

图片我们能看到四种不同的半颗星星

我们规定它们分别为1，2，3，4（和图片顺序相同）

那么我们的初始状态就应该是
[3,4,3,4,3,4,3,4,3,4]

很好！我们再看一张示意图(下图)来观察规律

相信屏幕前的你可以很简单的写出对应的数组了
没错！就是[1,2,1,4,3,4,3,4,3,4]

思路已经逐渐清晰起来，假设我们点击了第m个"半颗星星"，那么m后面依然是3,4,3,4…的循环，而m前面则是1,2,1,2…的循环

这里我们已经可以把对应代码写出来了

var s = new Array();
for (var i = 0; i < 10; i++) {if (i <= m) {//选中高亮的星星if (i % 2 == 1) {//奇数s[i] = 2} else if (i % 2 == 0) {//偶数s[i] = 1}} else {//没有选中的星星if (i % 2 == 1) {//奇数s[i] = 4} else if (i % 2 == 0) {//偶数s[i] = 3}}}

这里楼主是通过判断奇偶来判断它是前半颗星星，还是后半颗星星

好了，代码就分析到这里了，不卖关子了，完整的代码奉上：

完整代码

index.js

Page({data: {score: [3, 4, 3, 4, 3, 4, 3, 4, 3, 4],grade:0},log: function (e) {var index = e.currentTarget.dataset.index;console.log(index)var s = new Array();for (var i = 0; i < 10; i++) {if (i <= index) {if (i % 2 == 1) {s[i] = 2} else if (i % 2 == 0) {s[i] = 1}} else {if (i % 2 == 1) {s[i] = 4} else if (i % 2 == 0) {s[i] = 3}}}this.setData({score: s,grade: index + 1})},})

index.wxml

<view class="A"><view  wx:for='{{score}}' wx:for-item="item" style='{{(item==1||item==2)?"color:blue;":"color:red"}}' data-index='{{index}}' bindtap="log">{{item}}</view>
</view><view class="A"><view  wx:for='{{score}}' wx:for-item="item" style='{{"item==1||item==2"?"color:blue;":"color:red"}}' data-index='{{index}}' bindtap="log"><image wx:if="{{item==1}}" src="../../img/s1.png" class="small_pic" ></image><image wx:if="{{item==2}}" src="../../img/s2.png" class="small_pic" ></image><image wx:if="{{item==3}}" src="../../img/s3.png" class="small_pic" ></image><image wx:if="{{item==4}}" src="../../img/s4.png" class="small_pic" ></image></view>
</view><view>当前分数：{{grade}}</view>

index.wxss

.A{display: flex;flex-direction: row;
}
.small_pic{height: 69rpx;width: 36rpx;
}

代码片段

启动微信小程序开发工具，点击代码片段可查看
CSDN源码下载链接

图片资源

大家需要的话，点击鼠标右键，图片另存为就可以了

微信小程序星星评分代码片段（含半星）相关推荐

微信小程序-星星评分组件（支持半星/自定义尺寸）
由于从网上直接copy的评分组件虽然能用,但是我找到的组件渲染做得稍差,于是准备自己改进一下. 先放一个效果图: 一.准备准备类似的四张图片,图片一定要根据像素点精准对半切开,否则在小程序中会出现重 ...
微信小程序动态评分展示/五角星展示/半颗星展示/自定义长度展示
一.前言项目中遇到的评分相关的需求其实还挺多.之前也写过网页中关于评分功能实现的文档.这次,是基于微信小程序开发而提炼出一个简单方便使用的方法,网页开发中同样可用.这次使用的还是字体,主要是字体这个 ...
微信小程序网络请求代码片段
在微信小程序根目录建立/static/js/lsk.js.输入以下代码 function dopost(api,params,callback){var webhost="http://ne ...
php 做后端开发微信小程序实时语音代码片段
确认小程序后台已经开通实时语音视频聊天功能小程序端代码 //向后台请求签名 wx.login({complete: (res) => {if(res.code){wx.request({met ...
微信小程序星星评分组件
最近接了一个评分的功能,大概是这样的点击星星进行评分,类似淘宝的星星评分自己琢磨写了一个组件,记录一下,如果有优化的后期再优化先新建一个score组件文件夹 2.score.wxml <v ...
微信小程序星星评分展示、半颗星星展示
数据结构如图右侧,展示效果如图左侧这里的星星规则是小数点后一位 , 小于2 不变 ,大于2 小于8 是半颗星 , 大于8 进1 第一种写法先把星星的规则方法写了 starFn:fun ...
微信小程序实现评分，包含满星、半星，模仿豆瓣电影评分显示
微信小程序实现评分功能前言本人在用原生小程序开发时,需要用到评分功能,于是自己动手撸了一个评分显示组件.包含满星.半星功能. 废话少说,上才艺: 1.先任意创建组件,index.wxml代码如下: ...
石头剪刀布php源码,微信小程序石头剪刀布实例代码
搜索热词微信小程序石头剪刀布昨天看有个石头剪刀布的练习,就拿出来做了一下,布局的代码浪费了很多时间,果然CSS这块的还不是很熟练,下面直接上图上代码了. .js: //获取数组中用户的,石头剪刀 ...
微信小程序—微信小程序端支付代码
只有微信小程序端的代码,如下 Page({data: {},onLoad: function (options) {// 页面初始化 options为页面跳转所带来的参数var that = this ...

微信小程序星星评分代码片段（含半星）

微信小程序星星评分代码片段（含半星）

代码思路

完整代码

代码片段

图片资源

微信小程序星星评分代码片段（含半星）相关推荐

最新文章

热门文章