网页前端实现五星好评效果【这里以钉钉小程序开发为例】
在做钉钉开发中,遇到的展示星级好评【需求是带有一味小数的】
这里是自己的解决方法。
index.axml
<!-- index.axml --> <view class="block"> <view a:for="{{ width }}" a:for-index="index" a:for-item="item"> <view class="starBlock" style="width: {{ '30rpx' }}; height: {{ '30rpx' }};"> <image src="../../image/noFollow.png" style="width: {{'30rpx' }}; height: {{ '30rpx' }};"> </image> <view class="star" style="width: {{width[index] + 'rpx' }}; height: {{ size + 'rpx' }};overflow:hidden;" > <image class="star" src="{{stars[index]}}" style="width: {{size + 'rpx' }}; height: {{ size + 'rpx' }};"> </image> </view> </view> </view> </view>
index.acss
/* index.acss */ .block view { display: inline-block; margin-right: 4rpx; } .starBlock { position: relative; } .star{ position: absolute; top:0; left: 0; }
index.js
Page({ data: { stars: ['../../image/noFollow.png', '../../image/noFollow.png','../../image/noFollow.png', '../../image/noFollow.png', '../../image/noFollow.png'], width: ['30','30','30','30','30'], value:0, active:'../../image/follow.png', margin: 2, size: '30' }, onShow() { var newwidth=this.data.width; var newstars=this.data.stars var value= 3.3; this.setData({ value:value }) for(var i=0;i<value-1;i++){ newwidth[i] = this.data.size newstars[i] = this.data.active } newwidth[i] = (value-i)*this.data.size newstars[i] = this.data.active this.setData({ width:newwidth, stars:newstars }) this.setData({ fff: 'show' }) }, })
这里的解决方案是用上层评分图片按照比例去覆盖原来的未得评分的图片,在上层评分图片加了一个父元素,整数的部分全部覆盖,另外多余的小数的父元素设置其宽度为小数的占比,用overflow:hidden; 来隐藏多出的部分。实现的方法还在优化中, 有待更新。