微信小程序7新趋势_微信小程序完成星级评价

微信小程序实现星级评价       这篇文章主要为大家详细介绍了微信小程序实现星级评价,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了微信小程序星级评价的具体代码,供大家参考,具体内容如下

效果图

wxml

 view 
 view 
 view wx:for="{{stars}}" wx:key="" style='background:url("{{item.flag==1 item.lightImg:item.blackImg}}") no-repeat top;background-size:100%;' data-index="{{index}}" bindtap='starClick' /view 
 /view 
 view {{starDesc}} /view 
 /view 

wxss

.assess-star {
 margin-top: 20rpx;
.star-wrap {
 width: 50vw;
 margin: 10rpx auto 10rpx auto;
.star-item {
 display: inline-block;
 height: 60rpx;
 width: 60rpx;
 margin-right: 10rpx;
.star-desc {
 font-size: 30rpx;
 font-family: PingFangSC-Regular;
 font-weight: 400;
 color: rgba(243, 162, 0, 1);
 text-align: center;
}

js

Page({
 * 页面的初始数据
 data: {
 starDesc: '非常满意,无可挑剔',
 stars: [{
 lightImg: '../../../../images/xing.png',
 blackImg: '../../../../images/xing1.png',
 flag: 1,
 message: '非常不满意,各方面都很差'
 }, {
 lightImg: '../../../../images/xing.png',
 blackImg: '../../../../images/xing1.png',
 flag: 1,
 message: '不满意,比较差'
 }, {
 lightImg: '../../../../images/xing.png',
 blackImg: '../../../../images/xing1.png',
 flag: 1,
 message: '一般,还要改善'
 }, {
 lightImg: '../../../../images/xing.png',
 blackImg: '../../../../images/xing1.png',
 flag: 1,
 message: '比较满意,仍要改善'
 }, {
 lightImg: '../../../../images/xing.png',
 blackImg: '../../../../images/xing1.png',
 flag: 1,
 message: '非常完美,无可挑剔'
 // 选择评价星星
 starClick: function(e) {
 var that = this;
 for (var i = 0; i that.data.stars.length; i++) {
 var allItem = 'stars[' + i + '].flag';
 that.setData({
 [allItem]: 2
 var index = e.currentTarget.dataset.index;
 for (var i = 0; i = index; i++) {
 var item = 'stars[' + i + '].flag';
 that.setData({
 [item]: 1
 this.setData({
 starDesc: this.data.stars[index].message
 * 生命周期函数--监听页面加载
 onLoad: function(options) {
 * 生命周期函数--监听页面初次渲染完成
 onReady: function() {
 * 生命周期函数--监听页面显示
 onShow: function() {
 * 生命周期函数--监听页面隐藏
 onHide: function() {
 * 生命周期函数--监听页面卸载
 onUnload: function() {
 * 页面相关事件处理函数--监听用户下拉动作
 onPullDownRefresh: function() {
 * 页面上拉触底事件的处理函数
 onReachBottom: function() {
 * 用户点击右上角分享
 onShareAppMessage: function() {
})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。


相关阅读