À propos de la mise en œuvre de l'effet de notation cinq étoiles du mini-programme WeChat

Cet article présente principalement les informations pertinentes sur le code de mise en œuvre de l'effet de notation cinq étoiles de l'applet WeChat. Les amis dans le besoin peuvent se référer au

Le code de mise en œuvre de l'effet cinq étoiles. effet d'évaluation de l'applet WeChat

De nombreux amis qui ont réalisé des projets de commerce électronique utiliseront souvent la fonction d'évaluation. Je viens d'écrire un exemple ici et de l'envoyer pour le partager :

Quoi. J'ai écrit est un système de scores complets à 5 points. Tout d'abord, préparez 3 images,

, comme ceci, représentant le statut lorsque les scores sont de 0, 0,5, et 1 respectivement

Rendu : (basé sur 3.5 Par exemple)

Ajoutez ensuite le code :

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 }

Code 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>

Code JS de la page utilisant cette fonction :

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
   }
  });　　}
});

Ce qui précède est l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention. au site Web PHP chinois !

Recommandations associées :

Code pour le développement des prévisions météorologiques dans l'applet WeChat

Applet de critique de film de l'applet WeChat Production

Analyse du SDK Amap du programme WeChat Mini

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!