微信小程序之五星评分栏展示

话还是不多说了,还是直接上干货吧.

空心1.1.png;

半星1.2.png;

整星1.3.png 

wxml:

<view class="contain">
<view class="title"><text>评价该课程</text></view>
<view class="star">
<block wx:for="{{stars}}">

  <image class="star-image" style="left: {{item*80}}rpx" src="{{key > item ?(key-item == 0.5?halfSrc:selectedSrc) : normalSrc}}">

    <view class="item" style="left:0rpx" data-key="{{item+0.5}}" bindtap="selectLeft"></view>

    <view class="item" style="left:40rpx" data-key="{{item+1}}" bindtap="selectRight"></view>

  </image>

</block>
</view>
<view class="mark">{{key}}分</view> 
<view class="input">
<input placeholder-class='ph' placeholder="请输入您要评价的内容"></input>
</view>
<view class='btn'>
<button bindtap='tijiao' type='text'>提交</button>
</view>
</view>
js:
var app = getApp()

Page({

  data: {

    stars: [0, 1, 2, 3, 4],

    normalSrc: '../../image/1.1.png',

    selectedSrc: '../../image/1.3.png',

    halfSrc: '../../image/1.2.png',

    key: 0,//评分

  },

  onLoad: function () {

  },

  //点击右边,半颗星

  selectLeft: function (e) {

    var key = e.currentTarget.dataset.key

    if (this.data.key == 0.5 && e.currentTarget.dataset.key == 0.5) {

      //只有一颗星的时候,再次点击,变为0颗

      key = 0;

    }
    this.setData({

      key: key

    })



  },

  //点击左边,整颗星

  selectRight: function (e) {

    var key = e.currentTarget.dataset.key
    this.setData({

      key: key

    })

  },
  tijiao: function () {
    wx.navigateBack({

    })
  }

})
wxss:
.contain{
  background: white;
}
.title{
  text-align: center;
  margin-top:170rpx;
  font-size:16px;
}
.star{
  position: absolute;
  top:230rpx;
  left:120rpx;
}
.mark{
  position: absolute;
  top:268rpx;
  left:560rpx;
}
.star-image {

  position: absolute;

  top: 25rpx;

  width: 80rpx;

  height: 80rpx;
  
  src: "../../images/normal.png";

}



.item {

  position: absolute;

  top: 25rpx;

  width: 40rpx;

  height: 80rpx;

}
.input{
  margin: 40rpx;
  margin-top:170rpx;
  height: 350rpx;
  border: 1px solid rgb(245,245,245);
  border-radius: 10rpx;
  background: rgb(245,245,245);
  font-size:14px;
  color:black;
}
.ph{
  color:#aaa;
  font-weight:300;
}
.btn{
  margin: 40rpx;
  font-weight: 500;
}
.btn button{
  color: white;
  height: 80rpx;
  line-height: 80rpx;
  background-color: #3c3;
}

结尾:给为赏点币吧

阅读更多
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭