歌单组件不显示也不报错

来源：3-4 播放数量细节处理

慕姐7077867

2022-01-03

老师好，我遇到了一个问题，在没有把playlist.playcount改成_count之前，小程序能够正常显示歌单组件，但是更改后电脑端的小程序就不显示歌单组件了，可在手机上是能够显示歌单组件（但不显示_count的值）
图片描述 `// components/playlist/playlist.js
Component({
/**

组件的属性列表
*/
properties: {
playlist:{
type:Object,
}
},
observers: {
‘playlist-playcount’ {
console.log(count)
console.log(this._tranNumber(count,2))
this.setData({
_count:this._tranNumber(count,2)
})
}

/**

组件的初始数据
*/
data: {
_count: 0

/**

组件的方法列表
*/
methods: {
_tranNumber(num,point){
let numStr = num.toString().split(’.’)[0]
if(numStr.length < 6){
return numStr;
}else if(numStr.length >= 6 && numStr.length <= 8){
let decimal = numStr.substring(numStr.length - 4,numStr.length - 4 + point)
return parseFloat(parseInt(num / 10000) + ‘.’ + decimal) + ‘万’
}else if(numStr.length > 8){
let decimal = numStr.substring(numStr.length - 8,numStr.length - 8 + point)
return parseFloat(parseInt(num / 100000000) + ‘.’ + decimal) + ‘亿’
}

}
})
`

<!--components/playlist/playlist.wxml-->
<view class="playlist-container">
  <image src="{{playlist.picUrl}}" class="playlist-img"></image>
  <text class="playlist-playcount">{{_count}}</text>
  <view class="playlist-name">{{playlist.name}}</view>
</view>

/* components/playlist/playlist.wxss */
.playlist-container{
  width: 220rpx;
  position: relative;
  padding-bottom: 20rpx;
}
.playlist-img{
  width: 100%;
  height: 220rpx;
  border-radius: 6rpx;
}
.playlist-playcount{
  font-size: 24rpx;
  color: #fff;
  text-shadow: 1px 0 0 rgba(0, 0, 0, 0.5);
  position: absolute;
  right: 10rpx;
  top: 4rpx;
  padding-left: 26rpx;
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNjQxMTM0OTU5NDYzIiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjczMTgiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMTYiIGhlaWdodD0iMTYiPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PC9zdHlsZT48L2RlZnM+PHBhdGggZD0iTTgzOS4xNjQ5MDggNTU3LjU3ODA1OCAyNDAuNTAyMTYgOTQxLjY5NDQ1OWMtMzIuNTU5ODY3IDIxLjA0ODM4NS03Ni4xOTg1MDIgMTEuNjkzMzItNzYuMTk4NTAyLTE5LjI2NDc2MkwxNjQuMzAzNjU5IDEwMi4wMDYyMzJjMC0zNS44OTc1ODEgNDAuNjg0MjI4LTM4LjI4MjkwOCA3Ni4xOTg1MDItMTkuMjMzMDRMODM5LjE2NDkwOCA0NjYuODQyNTIxQzg2My44MTUzMTggNDkxLjkwNzM4MyA4NjMuODE1MzE4IDUzMi41Mjg1NDYgODM5LjE2NDkwOCA1NTcuNTc4MDU4ek0yMjcuNDIyNzQ4IDg2NS4xNjAzNjVsNTY4LjA0MjEyNS0zNTIuOTQyNDAxTDIyNy40MjI3NDggMTU5LjI5MDkxM0MyMjcuNDIyNzQ4IDIxNS42MjE4NzIgMjI3LjQyMjc0OCA4NTAuMzg4OTQgMjI3LjQyMjc0OCA4NjUuMTYwMzY1eiIgcC1pZD0iNzMxOSIgZmlsbD0iI2ZmZmZmZiI+PC9wYXRoPjwvc3ZnPg==);
  background-size: 25rpx;
  background-repeat: no-repeat;
  background-position-y: 4rpx;
}
.playlist-name{
  font-size: 26rpx;
  line-height: 1.2;
  padding: 2px 0 0 6px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}

{
  "usingComponents": {
    "x-playlist":"/components/playlist/playlist"
  }
}

<!-- 歌单组件 -->
<view class="playlist-container">
  <block wx:for="{{playlist}}">
    <x-playlist playlist="{{item}}"></x-playlist>
  </block>
</view>

// 存放歌单数据
    playlist:[
      {"_id":"08560c9e5d042a5c0174f1ca26f1d7b2","copywri天气转热er":"热门推荐","playCount":1.4641238e+06,"highQuality":false,"type":0.0,"canDislike":true,"name":"天气转热了，适合听点凉爽的歌。","alg":"cityLevel_unknow","createTime":{"$date":"2019-06-14T23:14:36.746Z"},"id":2.780381322e+09,"picUrl":"https://p2.music.126.net/Biky7TE4CtW6NjGuqoUKZg==/109951164041827987.jpg","trackCount":53.0},
      {"_id":"08560c9e5d042a5c0174f1da7aa357aa","highQuality":false,"copywriter":"热门推荐","canDislike":true,"playCount":622822.6,"id":2.740107647e+09,"name":"「时空潜行」囿于昼夜的空想主义者","type":0.0,"alg":"cityLevel_unknow","createTime":{"$date":"2019-06-14T23:14:36.955Z"},"picUrl":"https://p2.music.126.net/Q0eS0avwGK04LufWM7qJug==/109951164116217181.jpg","trackCount":20.0},
      {"_id":"08560c9e5d042a5c0174f1de21c7e79e","id":2.828842343e+09,"type":0.0,"name":"粤语情诗：与你听风声，观赏过夜星","picUrl":"https://p2.music.126.net/K9IcG8cU6v4_SwuQ_x2xMA==/109951164124604652.jpg","highQuality":false,"alg":"cityLevel_unknow","playCount":1.785097e+06,"trackCount":52.0,"copywriter":"热门推荐","canDislike":true,"createTime":{"$date":"2019-06-14T23:14:36.982Z"}},
      {"_id":"08560c9e5d042a5d0174f1e67d1bb16f","playCount":7.719329e+06,"highQuality":false,"trackCount":950.0,"alg":"cityLevel_unknow","id":9.17794768e+08,"type":0.0,"name":"翻唱简史：日本四百首","canDislike":true,"createTime":{"$date":"2019-06-14T23:14:37.037Z"},"copywriter":"热门推荐","picUrl":"https://p2.music.126.net/NczCuurE5eVvObUjssoGjQ==/109951163788653124.jpg"},
      {"_id":"08560c9e5d042a5d0174f1ea32c4c288","type":0.0,"copywriter":"热门推荐","highQuality":false,"createTime":{"$date":"2019-06-14T23:14:37.097Z"},"id":2.201879658e+09,"alg":"cityLevel_unknow","playCount":1.06749088e+08,"name":"你的青春里有没有属于你的一首歌？","picUrl":"https://p2.music.126.net/wpahk9cQCDtdzJPE52EzJQ==/109951163271025942.jpg","canDislike":true,"trackCount":169.0},
      {"_id":"08560c9e5d0829820362a79f4b049d2d","alg":"cityLevel_unknow","name":"「乐队的夏天」参赛歌曲合集丨EP04更新","highQuality":false,"picUrl":"http://p2.music.126.net/2WE5C2EypEwLJd2qXFd4cw==/109951164086686815.jpg","trackCount":158.0,"createTime":{"$date":"2019-06-18T00:00:02.553Z"},"copywriter":"热门推荐","playCount":1.5742008e+06,"canDislike":true,"id":2.79477263e+09,"type":0.0}  
    ]

写回答

2回答