五星评分,让我告诉你半颗星星怎么做

  • • 发表于 1个月前
  • • 作者 小寨主
  • • 669 次浏览
  • • 2 条评论
  • • 最后编辑时间 1个月前
  • • 来自 [技 术]

原创声明:本文为作者原创,未经允许不得转载,经授权转载需注明作者和出处

概述

我们在学习微信小程序或者做项目时,应该会遇到五星评分效果情况,那么这个五星评分,半颗星星怎么做功能我们应该怎么编写呢?
今天我们说下微信小程序五星评分,半颗星星效果的实现,今天分享这样的小教程。希望对大家有所帮助。

不多说了,二当家要上图啦!

快去拿个小板凳,坐等跟多更新

wxml

<!--index.wxml-->
<block wx:for="{{stars}}" wx:key="">
  <image class="star-image" style="left: {{item*150}}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:75rpx" data-key="{{item+1}}" bindtap="selectRight"></view>
  </image>
</block>

js

//index.js
//获取应用实例
var app = getApp()
Page({
  data: {
    stars: [0, 1, 2, 3, 4],
    normalSrc: '../../images/normal.png',
    selectedSrc: '../../images/selected.png',
    halfSrc:'../../images/half.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;
    }
    console.log("得" + key + "分")
    this.setData({
      key: key
    })
  },
  //点击左边,整颗星
  selectRight: function (e) {
    var key = e.currentTarget.dataset.key
    console.log("得" + key + "分")
    this.setData({
      key: key
    }) 
  }
})

css

/**index.wxss**/
.star-image{
  position: absolute;
  top: 50rpx;
  width: 150rpx;
  height: 150rpx;
  src: "../../images/normal.png";
}
.item{
  position: absolute;
  top: 50rpx;
  width: 75rpx;
  height: 150rpx;
}

以上代码为效果一

分享到:
评论区(共2条评论)
2条评论
Ctrl+Enter
作者

小寨主

小寨主

APP:0 帖子:15 回复:27 积分:749

已加入社区[259]天

创业中的小青年,专业攻城狮,业余设计喵!

作者详情》
Top