（十二）微信小程序：星星处理

时间：2020-04-26 13:41:57 收藏：0 阅读：67

电影星星和评分处理

　　1.明确获取到的评分和星星的换算关系

/**
 * 星星：
 *    评分：0,40,30,20,0,50
 *    评分与星星换算:40-->4
 *    star=[]
 *    针对4星:[1,1,1,1,0]
 */

逻辑解释

　　　　最终传入的星星数据是由数据进行存储的

　　2.utils.js中对于“将获取到的数据存储至数组中”定义函数star（评分）

function star(starNum){
   var num = starNum.substring(0,1);
   var starArr = [];
   for(var i=0;i<5;i++){
      if(i<num){
        starArr.push(1);
      }else{
        starArr.push(0);
      }
   }
   return starArr;
 }

module.exports = {
  http:http,
  star:star
}

utils.js

　　　　　　代码解析：因为获取到的是评分（50、40）,所以利用substring进行字符串截取以获得星星个数

　　3.在movie.js中调用star函数获“星星数组”

　　　　　　技术分享图片

　　4.在movie.wxml中调用星星模板时，传递数据

　　　　　　技术分享图片

　　5.stars-template.wxml中取得星星和评分值

<template name="starTemplate">
  <view class="stars-container">
    <view class="stars">
      <block wx:for="{{ star }}" wx:for-index="index" wx:key="{{ index }}">
         <image wx:if="{{ item }}" src="../../image/star.png"></image>
         <image wx:else src="../../image/chat.png"></image>
      </block>
      <view class="star-score">{{ average }}</view>
    </view>
  </view>
</template>

stars-template.wxml

实现的动态效果：　　

　　　　　　　　技术分享图片

本节完成对星星和评分的处理，但是我们发现 “更多”按钮还不能点

　所以下一节制作更多电影页面~

原文：https://www.cnblogs.com/happy-prince/p/12778589.html