首页 > 微信 > 详细

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

时间:2020-04-26 13:41:57      阅读:66      评论:0      收藏:0      [点我收藏+]

电影星星和评分处理

  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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!