一位同学说要写五星评分.要有半颗星的评分.
于是我做了个玩具.有空了做模块化,这代码看不下去了.
gif:

代码:
1.index.wxml

<block wx:for="{ { stars}}"> <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>

2.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; }

3.index.js

//index.js
//CSDN微信小程序开发专栏:http://blog.csdn.net/column/details/13721.html
//获取应用实例
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
    })
  }
})

demo下载地址
CSDN微信小程序开发专栏,欢迎关注!
我的博客,欢迎交流批评!

原文链接：https://blog.csdn.net/qq_31383345/article/details/53619156

本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。