Home >WeChat Applet >Mini Program Development >About the implementation of the five-star rating effect of the WeChat mini program

About the implementation of the five-star rating effect of the WeChat mini program

不言
不言Original
2018-06-27 17:56:002123browse

This article mainly introduces the relevant information on the implementation code of the five-star rating effect of the WeChat applet. Friends in need can refer to the code below

The implementation code of the five-star rating effect of the WeChat applet

Many friends who have done e-commerce projects will often use the rating function. I just wrote an example here and sent it to share:

What I wrote is a 5-point full-score system. First of all, Prepare 3 pictures,

, like this, representing the status when the scores are 0, 0.5, and 1 respectively.

Rendering: (based on 3.5 For example)

Then add the 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 }

WXML Code:

<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 code for the page using this function:

var pingxin=require("../../utils/pingxing.js");
Page({  data:{    tuangou:tuangou}//我这里是在页面加载的时候先从后台获取数据,把数据的值赋值给tuangou,然后遍历将数据里面的参数拿出来,然后再把相应的评分中的图片排列顺序放到这条数据中的pingfenpic中保存,然后在页面中渲染即可
onLoad:function(options){
  console.log(&#39;onLoad&#39;);
  var that=this;
  // 页面初始化 options为页面跳转所带来的参数
  wx.request({
   url: &#39;https://wxapp.com/tuangou&#39;,//这里是你请求数据的接口地址,自己填写
   data: {},
   method: &#39;GET&#39;,
   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
   }
  });  }
});

Above That’s the entire content of this article. I hope it will be helpful to everyone’s study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

Code for weather forecast development in WeChat mini program

WeChat mini program movie review mini program Production

Analysis of WeChat Mini Program Amap SDK

##

The above is the detailed content of About the implementation of the five-star rating effect of the WeChat mini program. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn