效果预览图

图1.jpeg

图2.jpeg

图三.jpeg

wxml代码

<!--星星评价-->
<view class="container"><view class="comment1-description"><view class="star-pos" style="display:flex;flex-direction:row;"><view class="stars  {{flag>=1? 'on': ''}}" bindtap="changeColor1"></view><view class="stars  {{flag>=2? 'on': ''}}" bindtap="changeColor2"></view><view class="stars  {{flag>=3? 'on': ''}}" bindtap="changeColor3"></view><view class="stars  {{flag>=4? 'on': ''}}" bindtap="changeColor4"></view><view class="stars  {{flag>=5? 'on': ''}}" bindtap="changeColor5"></view></view></view>
<!--文本域  --><view class="weui-cells_after-title"><view class="weui-cell"><view class="weui-cell__bd"><textarea class="weui-textarea" bindinput="bindTextAreaChange" placeholder="我要提出建议..." style="height: 8em" value="{{info}}" maxlength="{{noteMaxLen}}" focus /><view class="weui-textarea-counter">{{noteNowLen}}/{{noteMaxLen}}</view></view></view></view>
<!--发布按钮  -->
<view class="btnSf">
<button bindtap="bindSubmit">发布</button>
</view>
</view>

wxss代码

.comment1-description{padding:30rpx 0;display:flex;flex-direction:row;
}
.stars{background:url("http://外链图片地址/Xing.png（灰色）");width: 50rpx;height: 50rpx;background-size: 50rpx 50rpx;margin-left: 30rpx;transition: 600ms;
}
.on{background:url("http://外链图片地址/Xin.png（正常）");width: 50rpx;height: 50rpx;background-size: 50rpx 50rpx;transition: 1s;transform: scale(1,1)
}
.weui-cells_after-title{width: 92%;margin:0 auto;border:1px solid #ddd;
}.btnSf{width: 92%;margin:30rpx auto;}
.btnSf button{background: #57B6BA;color: #fff;
}.btnSf button:active{background: #5BC2C6;color: #fff;
}

js代码

// pages/evaluation/evaluation.js
Page({data: {flag: 0,noteMaxLen: 300, // 最多放多少字info: "",noteNowLen: 0,//备注当前字数},// 监听字数bindTextAreaChange: function (e) {var that = thisvar value = e.detail.value,len = parseInt(value.length);if (len > that.data.noteMaxLen)return;that.setData({ info: value, noteNowLen: len })},// 提交清空当前值bindSubmit: function () {var that = this;wx.showToast({title: '发布成功',icon: 'success',duration: 1500,mask: false,success: function () {that.setData({ info: '', noteNowLen: 0, flag: 0 })}})},changeColor1: function () {var that = this;that.setData({flag: 1});},changeColor2: function () {var that = this;that.setData({flag: 2});},changeColor3: function () {var that = this;that.setData({flag: 3});},changeColor4: function () {var that = this;that.setData({flag: 4});},changeColor5: function () {var that = this;that.setData({flag: 5});},})

作者：耿晓军
链接：https://www.jianshu.com/p/4d7359dfa040
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。