Micro-credit Program five-star score (including Half star scoring) instance code _javascript

Mini-letter Program five-star rating

A classmate said he wanted to write a five-star score. A score of half stars.

So I made a toy. There is time to do the modular, the code can not look down.

Code:

1.index.wxml

<!--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 Micro-Letter Applet Development column: http://blog.csdn.net/column/details/13721.html

//Get application instance

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,//rating

 },

 onload:function () {

 },

 //Click on the right, half star

 Selectleft: Function (e) {

  var key = E.currenttarget.dataset.key

  if (This.data.key = = 0.5 && E.currenttarget.dataset.key = = 0.5) {

   ///Only one star, click again, change to 0

   key = 0;

  }

  Console.log ("get" + key + "min")

  this.setdata ({

   key:key

  })



 },

 //Click on the left, the whole star

 Selectright: Function (e) {

  var key = E.currenttarget.dataset.key

  Console.log ("get" + key + "min")

  this.setdata ({

   Key:key

  })

 }

)

Code download

Star.rar

Thank you for reading, I hope to help you, thank you for your support for this site!