微信小程序五星評分效果實現(xiàn)代碼
更新時間:2017年04月06日 16:03:23 投稿:lqh
這篇文章主要介紹了微信小程序五星評分效果實現(xiàn)代碼的相關(guān)資料,需要的朋友可以參考下
微信小程序五星評分效果實現(xiàn)代碼
很多做過電商項目的朋友會經(jīng)常用到評分的功能,我這里正好寫了一個例子,發(fā)出來分享一下:
我寫的是5分滿分制的,首先,準備3個圖片,

,像這樣的,分別代表分數(shù)為0,0.5,1 時的狀態(tài),
效果圖:(以3.5為例)

然后上代碼:
js:
function pingfenxing(pingfen){
var that=this, //這里是圖片的路徑,自己需要改
data={
ling:"img/pingfen0.png",
zheng:"img/pingfen2.png",
ban:"img/pingfen1.png" },
nums=[];//這里是返回圖片排列的順序的數(shù)組,這里要注意在頁面使用的時候圖片的路徑,不過使用網(wǎng)絡(luò)圖片無所謂 if((pingfen/0.5)%2==0){//如果評分為整數(shù),如4.0、5.0
for(var i=0;i<5;i++){
if(i<pingfen){
nums.push(data.zheng);
}else{
nums.push(data.ling);
}
}
}else{//評分不為整數(shù),如3.5、2.5
for(var i=0;i<5;i++){
if(i<pingfen-0.5){
nums.push(data.zheng);//先把整數(shù)分離出來,如:3.5,這里就是先把3分離出來,把代表1的圖片放進去
}else if(i==(pingfen-0.5)){
nums.push(data.ban);//把小數(shù)的部分分離出來,如:3.5里的0.5,把代表0.5的圖片放進去
}else{
nums.push(data.ling);//然后剩下的就是沒有滿的用代表0的圖片放進去,如:3.5,里面放進去了3個代表1的圖片,然后放入了1個代表0.5的圖片,最后還剩一個圖片的位置,這時候就放代表0的圖片
}
}
}
return num; } module.exports = { pingfen:pingfenxing }
WXML代碼:
<view class="pingfen">
<block wx:for="{{item.pingfenpic}}" wx:key="{{item.id}}" wx:for-item="pingfen">
<image class="img" src="{{pingfen}}"></image>
</block>
<text data-pingfen="{{item.pingfen}}" >{{item.pingfen}}</text>
</view>
使用這個功能的頁面的JS代碼:
var pingxin=require("../../utils/pingxing.js");
Page({ data:{ tuangou:tuangou}//我這里是在頁面加載的時候先從后臺獲取數(shù)據(jù),把數(shù)據(jù)的值賦值給tuangou,然后遍歷將數(shù)據(jù)里面的參數(shù)拿出來,然后再把相應(yīng)的評分中的圖片排列順序放到這條數(shù)據(jù)中的pingfenpic中保存,然后在頁面中渲染即可
onLoad:function(options){
console.log('onLoad');
var that=this;
// 頁面初始化 options為頁面跳轉(zhuǎn)所帶來的參數(shù)
wx.request({
url: 'https://wxapp.com/tuangou',//這里是你請求數(shù)據(jù)的接口地址,自己填寫
data: {},
method: 'GET',
success: function(res){
// success
console.log(res.data.tuangou);
let tuangou=res.data.tuangou;
for(let i=0;i<tuangou.length;i++){
tuangou[i].pingfenpic=pingxin.pingfen(parseFloat(tuangou[i].pingfen));//使用函數(shù)將評分變?yōu)閳D片排列的數(shù)組,這里要注意,如果評分傳過來的是字符串 需要將它變?yōu)閿?shù)字
}
that.setData({
tuangou:tuangou
});
console.log(that.data.tuangou);
},
fail: function() {
// fail
},
complete: function() {
// complete
}
}); }
});
感謝閱讀,希望能幫助到大家,謝謝大家對本站的支持!
相關(guān)文章
javascript 操作cookies及正確使用cookies的屬性
在 JS(JavaScript) 操作cookies比較復雜,在 ASP 里面我們只需要知道 cookie 的名稱、cookie 的值就行了,而 JS 里面,我們面對的是 cookie 的字符串,你自己編寫這個字符串寫入客戶端,然后自己解析這個字符串。2009-10-10
HTML+CSS+JavaScript實現(xiàn)放大鏡效果
這篇文章主要為大家詳細介紹了HTML+CSS+JavaScript實現(xiàn)放大鏡效果,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2022-07-07
JS實現(xiàn)無縫循環(huán)marquee滾動效果
這篇文章主要為大家詳細介紹了JS實現(xiàn)無縫循環(huán)marquee滾動效果,兼容IE, FireFox, Chrome,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-05-05

