微信小程序 五星評分(包括半顆星評分)實例代碼
更新時間：2016年12月14日 14:23:47 投稿：lqh
這篇文章主要介紹了微信小程序 五星評分(包括半顆星評分)實例代碼的相關(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)用實例
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) {
//只有一顆星的時候,再次點擊,變?yōu)?顆
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
})
}
})
代碼下載
感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！
相關(guān)文章
Dragonfly P2P 傳輸協(xié)議優(yōu)化代碼解析
這篇文章主要為大家介紹了Dragonfly P2P 傳輸協(xié)議優(yōu)化代碼解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
這篇文章主要為大家介紹了ECharts的三維可視化及在微信小程序中使用示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
這篇文章主要介紹了微信小程序url與token設(shè)置詳解的相關(guān)資料,希望通過本文能幫助到大家解決類似問題，需要的朋友可以參考下2017-09-09
這篇文章主要介紹了微信小程序 在線支付功能的實現(xiàn)的相關(guān)資料,需要的朋友可以參考下2017-03-03
這篇文章主要介紹了克隆 JavaScript,克隆又有淺克隆與深克隆，文章圍繞JavaScript淺克隆與深克隆的相關(guān)資料展開具體內(nèi)容,需要的朋友可以參考一下2021-10-10
這篇文章主要介紹了微信小程序 教程之wxapp視圖容器 swiper的相關(guān)資料,需要的朋友可以參考下2016-10-10
編寫微信小程序時，用到 wx.uploadFile，用來上傳圖片＋文本信息，本篇文章主要介紹了微信小程序 wx.uploadFile 的編碼坑，有興趣的可以了解一下。2017-01-01
這篇文章主要為大家介紹了TypeScript獲取二叉樹的鏡像實例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
lodash里to系列之將數(shù)據(jù)轉(zhuǎn)換成數(shù)字類型實現(xiàn)示例
這篇文章主要為大家介紹了lodash里to系列之將數(shù)據(jù)轉(zhuǎn)換成數(shù)字類型實現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
這篇文章主要為大家介紹了JS實用技巧實現(xiàn)loading加載示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03