(十二)微信小程序:星星处理

电影星星和评分处理

  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

实现的动态效果:  

        (十二)微信小程序:星星处理

 

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

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

    

(十二)微信小程序:星星处理

上一篇:《从问题到程序:用Python学编程和计算》——1.2 Python语言简介


下一篇:微信小程序学习-样式