微信小程序五星評分效果實現(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比較復(fù)雜,在 ASP 里面我們只需要知道 cookie 的名稱、cookie 的值就行了,而 JS 里面,我們面對的是 cookie 的字符串,你自己編寫這個字符串寫入客戶端,然后自己解析這個字符串。2009-10-10HTML+CSS+JavaScript實現(xiàn)放大鏡效果
這篇文章主要為大家詳細介紹了HTML+CSS+JavaScript實現(xiàn)放大鏡效果,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2022-07-07JS實現(xiàn)無縫循環(huán)marquee滾動效果
這篇文章主要為大家詳細介紹了JS實現(xiàn)無縫循環(huán)marquee滾動效果,兼容IE, FireFox, Chrome,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-05-05