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

微信小程序五星評分效果實現(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)文章

  • FF和IE之間7個JavaScript的差異

    FF和IE之間7個JavaScript的差異

    盡管 JavaScript 歷史上使用冗長而令人生厭的代碼塊來標的特定瀏覽器的時期已經(jīng)結(jié)束了,但是偶爾使用一些簡單的代碼塊和對象檢測來確保一些代碼在用戶機器上正常工作依然是必要的。
    2009-05-05
  • js 頁面元素的幾個用法總結(jié)

    js 頁面元素的幾個用法總結(jié)

    本文是對js中頁面元素的幾個用法進行了詳細的總結(jié)介紹,需要的朋友可以 過來參考下,希望對大家有所幫助
    2013-11-11
  • javascript 操作cookies及正確使用cookies的屬性

    javascript 操作cookies及正確使用cookies的屬性

    在 JS(JavaScript) 操作cookies比較復(fù)雜,在 ASP 里面我們只需要知道 cookie 的名稱、cookie 的值就行了,而 JS 里面,我們面對的是 cookie 的字符串,你自己編寫這個字符串寫入客戶端,然后自己解析這個字符串。
    2009-10-10
  • HTML+CSS+JavaScript實現(xiàn)放大鏡效果

    HTML+CSS+JavaScript實現(xiàn)放大鏡效果

    這篇文章主要為大家詳細介紹了HTML+CSS+JavaScript實現(xiàn)放大鏡效果,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2022-07-07
  • eslint 的三大通用規(guī)則詳解

    eslint 的三大通用規(guī)則詳解

    這篇文章主要介紹了eslint 的三大通用規(guī)則詳解,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2019-05-05
  • JS實現(xiàn)無縫循環(huán)marquee滾動效果

    JS實現(xiàn)無縫循環(huán)marquee滾動效果

    這篇文章主要為大家詳細介紹了JS實現(xiàn)無縫循環(huán)marquee滾動效果,兼容IE, FireFox, Chrome,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-05-05
  • javascript如何判斷輸入的url是否正確

    javascript如何判斷輸入的url是否正確

    這篇文章主要介紹了javascript如何判斷輸入的url是否正確,需要的朋友可以參考下
    2014-04-04
  • js 固定懸浮效果實現(xiàn)思路代碼

    js 固定懸浮效果實現(xiàn)思路代碼

    懸浮效果想必大家都不陌生吧,本文為大家介紹下使用js固定懸浮的實現(xiàn)思路及代碼,感興趣的朋友可以參考下
    2013-08-08
  • javascript封裝簡單實現(xiàn)方法

    javascript封裝簡單實現(xiàn)方法

    這篇文章主要介紹了javascript封裝簡單實現(xiàn)方法,涉及javascript中方法與屬性的相關(guān)設(shè)置與使用技巧,非常簡單實用,需要的朋友可以參考下
    2015-08-08
  • 使用JavaScript實現(xiàn)一個炫酷的羅盤時鐘

    使用JavaScript實現(xiàn)一個炫酷的羅盤時鐘

    在探究前端動畫時,想到之前在鎖屏壁紙看到的羅盤時鐘,看著很是炫酷,于是說干就干,下面就跟隨小編一起來學(xué)習(xí)一下如何使用JS實現(xiàn)一個炫酷的羅盤時鐘效果吧
    2024-02-02

最新評論