国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 編程 > JavaScript > 正文

微信小程序五星評分效果實現代碼

2019-11-19 16:54:37
字體:
來源:轉載
供稿:網友

微信小程序五星評分效果實現代碼

很多做過電商項目的朋友會經常用到評分的功能,我這里正好寫了一個例子,發出來分享一下:

我寫的是5分滿分制的,首先,準備3個圖片,

,像這樣的,分別代表分數為0,0.5,1 時的狀態,

效果圖:(以3.5為例)

然后上代碼:

js:

function pingfenxing(pingfen){   var that=this,  //這里是圖片的路徑,自己需要改     data={     ling:"img/pingfen0.png",     zheng:"img/pingfen2.png",     ban:"img/pingfen1.png"    },     nums=[];//這里是返回圖片排列的順序的數組,這里要注意在頁面使用的時候圖片的路徑,不過使用網絡圖片無所謂    if((pingfen/0.5)%2==0){//如果評分為整數,如4.0、5.0     for(var i=0;i<5;i++){      if(i<pingfen){       nums.push(data.zheng);      }else{       nums.push(data.ling);      }     }   }else{//評分不為整數,如3.5、2.5     for(var i=0;i<5;i++){      if(i<pingfen-0.5){       nums.push(data.zheng);//先把整數分離出來,如:3.5,這里就是先把3分離出來,把代表1的圖片放進去      }else if(i==(pingfen-0.5)){       nums.push(data.ban);//把小數的部分分離出來,如: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}//我這里是在頁面加載的時候先從后臺獲取數據,把數據的值賦值給tuangou,然后遍歷將數據里面的參數拿出來,然后再把相應的評分中的圖片排列順序放到這條數據中的pingfenpic中保存,然后在頁面中渲染即可onLoad:function(options){  console.log('onLoad');  var that=this;  // 頁面初始化 options為頁面跳轉所帶來的參數  wx.request({   url: 'https://wxapp.com/tuangou',//這里是你請求數據的接口地址,自己填寫   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));//使用函數將評分變為圖片排列的數組,這里要注意,如果評分傳過來的是字符串 需要將它變為數字    }    that.setData({     tuangou:tuangou    });    console.log(that.data.tuangou);   },   fail: function() {    // fail   },   complete: function() {    // complete   }  });  }});

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

發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 濉溪县| 漳浦县| 通辽市| 八宿县| 四川省| 阜新| 岢岚县| 亚东县| 壶关县| 防城港市| 托克托县| 陆丰市| 望城县| 平和县| 嵊州市| 湘乡市| 桃园县| 上犹县| 吕梁市| 垫江县| 稻城县| 屏南县| 琼海市| 美姑县| 剑河县| 五家渠市| 德清县| 清水县| 新源县| 肥乡县| 宁武县| 清苑县| 石渠县| 平乡县| 高要市| 尚义县| 吐鲁番市| 苏尼特左旗| 独山县| 慈利县| 新田县|