欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

微信小程序 五星評分(包括半顆星評分)實(shí)例代碼

 更新時間：2016年12月14日 14:23:47   投稿：lqh  
這篇文章主要介紹了微信小程序 五星評分(包括半顆星評分)實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下

微信小程序 五星評分

一位同學(xué)說要寫五星評分.要有半顆星的評分.

于是我做了個玩具.有空了做模塊化,這代碼看不下去了.

代碼:

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微信小程序開發(fā)專欄:http://blog.csdn.net/column/details/13721.html

//獲取應(yīng)用實(shí)例

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 () {

 },

 //點(diǎn)擊右邊,半顆星

 selectLeft: function (e) {

  var key = e.currentTarget.dataset.key

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

   //只有一顆星的時候,再次點(diǎn)擊,變?yōu)?顆

   key = 0;

  }

  console.log("得" + key + "分")

  this.setData({

   key: key

  })



 },

 //點(diǎn)擊左邊,整顆星

 selectRight: function (e) {

  var key = e.currentTarget.dataset.key

  console.log("得" + key + "分")

  this.setData({

   key: key

  })

 }

})

代碼下載

star.rar

感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！

相關(guān)文章

最新評論