小程序星星评价发布

效果预览图

图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 = this
    var 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
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。