微信小程序实现星星评分效果

思路很简单，小星星都是一张张独立的图片，点击的时候改变图片的路径就可以了。
我是用背景图片做的，先给盒子设置背景图片为灰色的小星星，盒子是根据js文件中的stars数组循环出来的，根据flag的值确定是灰色的小星星还是黄色的小星星，点击的时候获取当下这个盒子的index值，然后去更改stars数组中索引值小于等于index的每一项的flag就可以了。
当然，也可以用类名来控制灰色和黄色的小星星，在点击的时候操作类名也是可以实现的。

实现代码如下：

*.wxml文件
<view class="container"><view class='stars'><image src=''></image><view class='content'><view>评分</view><view><view wx:for="{{stars}}" wx:key="" style='background:url("{{item.flag==1?item.bgImg:item.bgfImg}}") no-repeat top; background-size:100%;' data-index="{{index}}" bindtap='score'></view></view></view></view><view class='reviews'><textarea placeholder='请写下购买体会或商品的相关信息，可以拉其他小伙伴提供参考~（评价在100字以内）'></textarea></view>
</view>

*.wxss文件
.stars{padding:85rpx 0 60rpx 273rpx;box-sizing: border-box;position: relative;border-bottom: 1rpx solid #ececec;background-color: #fff;
}
.stars image{width: 190rpx;height: 190rpx;border: 1rpx solid #000;position: absolute;top: 41rpx;left: 36rpx;
}
.stars .content view{font-size: 32rpx;color: #4a4a4a;
}
.stars .content>view:last-of-type{height: 40rpx;margin-top: 48rpx;
}
.stars .content>view:last-of-type view{float: left;width: 42rpx;height: 42rpx;margin-right: 25rpx;background-size: 100% 100%;
}

*.js文件data: {stars:[{flag:1,bgImg: "http://wximg.youtasc.com/star.png",bgfImg:"http://wximg.youtasc.com/f_star.png"},{flag: 1,bgImg: "http://wximg.youtasc.com/star.png",bgfImg: "http://wximg.youtasc.com/f_star.png"},{flag: 1,bgImg: "http://wximg.youtasc.com/star.png",bgfImg: "http://wximg.youtasc.com/f_star.png"},{flag: 1,bgImg: "http://wximg.youtasc.com/star.png",bgfImg: "http://wximg.youtasc.com/f_star.png"},{flag: 1,bgImg: "http://wximg.youtasc.com/star.png",bgfImg: "http://wximg.youtasc.com/f_star.png"}]},score:function(e){var that=this;for(var i=0;i<that.data.stars.length;i++){var allItem = 'stars['+i+'].flag';that.setData({[allItem]: 1})}var index=e.currentTarget.dataset.index;for(var i=0;i<=index;i++){var item = 'stars['+i+'].flag';that.setData({[item]:2})}},

代码分析：

效果图：

微信小程序实现星星评分效果相关推荐

微信小程序实现星星评价效果
这篇文章主要为大家详细介绍了微信小程序实现星星评价效果,支持多个条目评价,具有一定的参考价值,感兴趣的小伙伴们可以参考一下本文实例为大家分享了微信小程序实现星星评价效果的具体代码,供大家参考,具体内 ...
微信小程序实现五星评分效果
直接上代码比较简单 wxml <block wx:for="{{tiyan}}" wx:key="index"><block wx:for=& ...
微信小程序实现星星评分组件(原生）
1.实现效果 2.组件介绍 3.部分代码 // components/rating/index.js Component({/*** 组件的属性列表*/properties: {stars:{type ...
微信小程序实现星星评分-整颗星星评分、半颗星星评分、任意颗星星展示
一.实现整颗星星评分(默认一颗星) 1.效果图 2.准备图片 3.remark.wxml <view class="stars"><view wx:for=&qu ...
微信小程序实现星星评分
1.实现效果点击星星 =>文字相应选中点击文字=>星星相应的选中1-5个 2.实现原理 1.默认所有星星的选中值为1,1表示不选中,2表示选中. 2.获取当前星星的index值,假设此 ...
微信小程序之五星评分效果
自己写的Demo 数据是自己模拟的希望下面的内容能够对大家有所帮助,不喜勿喷! 下面上代码 date 数据格式: var dateList = [{userId: 0,name: '王隔壁',na ...
视频教程-微信小程序项目-豆瓣评分-微信开发
微信小程序项目-豆瓣评分北京八维研修学院技术工程师,5年大型项目实战开发经验,3年授课经验. 孟宪杰 ¥68.00 立即订阅扫码下载「CSDN程序员学院APP」,1000+技术好课免费看 APP订 ...
微信小程序轮播图中间变大_微信小程序实现带放大效果的轮播图
本文实例为大家分享了微信小程序实现带放大效果的轮播图,供大家参考,具体内容如下效果如图 WXML WXSS .Carousel{ margin-top: 49px; background-color ...
基于微信小程序的体育课评分系统小程序
文末联系获取源码开发语言:Java 框架:ssm JDK版本:JDK1.8 服务器:tomcat7 数据库:mysql 5.7/8.0 数据库工具:Navicat11 开发软件:eclipse/my ...

微信小程序实现星星评分效果

微信小程序实现星星评分效果

微信小程序实现星星评分效果相关推荐

最新文章

热门文章