微信小程序学习笔记之星级组件封装

微信小程序学习笔记之星级组件封装
首先是用template标签创建一个星级组件

<template name="starsTemplate">
  <view class="stars-container">
    <view class="stars">
      <block wx:for="{{stars}}" wx:for-item="i">
        <image wx:if="{{i}}" src="/images/icon/star.png"></image>
        <image wx:else src="/images/icon/none-star.png"></image>
      </block>
    </view>
    <text class="star-score" data="{{score}}">{{score}}</text>
  </view>
</template>

在创建一个公共文件夹用来存放星星组件的方法

function SetStarArr(stars,setstarkey){
  var arr = []
  var newStarArr=[]
  stars.map((ele,index)=>{
    var num = ele.toString().substring(0, 1);
    for (var i = 1; i <= 5; i++) {
      if (i <= num) {
        arr.push(1)
      } else if (i == num) {
        arr.push(0)
      } else {
        arr.push(0)
      }
    }
  })
  // 将数组平均分割
  for (var i = 0, len = arr.length; i < len; i += 5) {
    newStarArr.push(arr.slice(i, i + 5)) 
  }
  return newStarArr
}

export default SetStarArr

然后在数据渲染处调用此方法方法

getJSON:function(url, setKey,setStars,titlename,titlevalue){
    wx.request({
      url: url,
      header: {
        'content-type': 'json'
      },
      method: "get",
      success: (res) => {
        let obj = {};
        let arr=[];
        let newStarArr=[]
        obj[setKey] = res.data.subjects
        obj[titlename] = titlevalue
        for (let i = 0;i<res.data.subjects.length; i++){
          arr.push(res.data.subjects[i].rating.stars)
          if (res.data.subjects[i].title.length >= 6) {
            // console.log(res.data.subjects[i].title.Substring(0, 5)+"...")
            var str = res.data.subjects[i].title
            str = str.substring(0, 7) + "..."
            res.data.subjects[i].title = str
          }
        }
       //调用上面那个方法
        obj[setStars] = SetStarArr(arr, setStars)
        this.setData(obj)
      }
    })
  }