微信小程序组件化实现歌单效果

需要实现的效果如下：

我们将歌单的每一项作为一个组件。

playlist组件

新建components目录，并在其目录下新建playlist目录，然后右键 - 新建Component，输入playlist，自动为我们创建了playlist组件。

playlist组件如下：

playlist.wxml:

<view class="playlist-container" bind:tap="goToMusiclist">
  <image src="{{playlist.picUrl}}" class="playlist-img"></image>
  <text class="playlist-playcount">{{playlist.playCount}}</text>
  <view class="playlist-name">{{playlist.name}}</view>
</view>

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.15);
  position: absolute;
  right: 10rpx;
  top: 4rpx;
  padding-left: 26rpx;
  background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMiAyMCI+PGcgb3BhY2l0eT0iLjE1Ij48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGZpbGw9IiMwNDAwMDAiIGQ9Im0yMiAxNi43NzdjMCAxLjIzMy0xLjEyMSAyLjIzMy0yLjUwNiAyLjIzMy0xLjM4NCAwLTIuNTA2LTEtMi41MDYtMi4yMzN2LTIuNTUzYzAtMS4yMzQgMS4xMjItMi4yMzMgMi41MDYtMi4yMzMuMTc0IDAgLjM0My4wMTcuNTA2LjA0NnYtMS4zN2gtLjAzM2MuMDE3LS4yMi4wMzMtLjQ0MS4wMzMtLjY2NiAwLTQuNDE4LTMuNTgyLTgtOC04LTQuNDE4IDAtOCAzLjU4Mi04IDggMCAuMjI1LjAxNi40NDYuMDM0LjY2NmgtLjAzNHYxLjM3Yy4xNjMtLjAyOS4zMzMtLjA0Ni41MDUtLjA0NiAxLjM4NCAwIDIuNTA2Ljk5OSAyLjUwNiAyLjIzM3YyLjU1M2MwIDEuMjMzLTEuMTIyIDIuMjMzLTIuNTA2IDIuMjMzcy0yLjUwNS0uOTk5LTIuNTA1LTIuMjMzdi0yLjU1M2MwLS4yNTguMDU5LS41MDEuMTQ4LS43My0uMDg1LS4xNDgtLjE0OC0uMzEtLjE0OC0uNDkzdi0yLjY2N2MwLS4wMjMuMDEyLS4wNDMuMDEzLS4wNjctLjAwNC0uMDg4LS4wMTMtLjE3Ni0uMDEzLS4yNjYgMC01LjUyMyA0LjQ3Ny0xMCAxMC0xMCA1LjUyMyAwIDEwIDQuNDc3IDEwIDEwIDAgLjA5LS4wMDkuMTc4LS4wMTQuMjY2LjAwMi4wMjQuMDE0LjA0NC4wMTQuMDY3djJjMCAuMzA2LS4xNDUuNTY5LS4zNi43NTMuMjI0LjMzNC4zNi43Mi4zNiAxLjEzOHYyLjU1MiIvPjwvZz48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGZpbGw9IiNmZmYiIGQ9Im0yMCAxNi43NzdjMCAxLjIzMy0xLjEyMSAyLjIzMy0yLjUwNiAyLjIzMy0xLjM4NCAwLTIuNTA2LTEtMi41MDYtMi4yMzN2LTIuNTUzYzAtMS4yMzQgMS4xMjItMi4yMzMgMi41MDYtMi4yMzMuMTc0IDAgLjM0My4wMTcuNTA2LjA0NnYtMS4zN2gtLjAzM2MuMDE3LS4yMi4wMzMtLjQ0MS4wMzMtLjY2NiAwLTQuNDE4LTMuNTgyLTgtOC04LTQuNDE4IDAtOCAzLjU4Mi04IDggMCAuMjI1LjAxNi40NDYuMDM0LjY2NmgtLjAzNHYxLjM3Yy4xNjMtLjAyOS4zMzMtLjA0Ni41MDUtLjA0NiAxLjM4NCAwIDIuNTA2Ljk5OSAyLjUwNiAyLjIzM3YyLjU1M2MwIDEuMjMzLTEuMTIyIDIuMjMzLTIuNTA2IDIuMjMzcy0yLjUwNS0uOTk5LTIuNTA1LTIuMjMzdi0yLjU1M2MwLS4yNTguMDU5LS41MDEuMTQ4LS43My0uMDg1LS4xNDgtLjE0OC0uMzEtLjE0OC0uNDkzdi0yLjY2N2MwLS4wMjMuMDEyLS4wNDMuMDEzLS4wNjctLjAwNC0uMDg4LS4wMTMtLjE3Ni0uMDEzLS4yNjYgMC01LjUyMyA0LjQ3Ny0xMCAxMC0xMCA1LjUyMyAwIDEwIDQuNDc3IDEwIDEwIDAgLjA5LS4wMDkuMTc4LS4wMTQuMjY2LjAwMi4wMjQuMDE0LjA0NC4wMTQuMDY3djJjMCAuMzA2LS4xNDUuNTY5LS4zNi43NTMuMjI0LjMzNC4zNi43Mi4zNiAxLjEzOHYyLjU1MiIvPjwvc3ZnPg==) no-repeat 0 8rpx/22rpx 20rpx;
}

.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;
}

Iconfont-阿里巴巴矢量图标库

在线图片转Base64编码

Component({
  /**
   * 组件的属性列表
   */
  properties: {
  	// 要接收的数据的名称
    // playlist:{
    //   // type  要接收的数据的类型 
    //   type:Object,
    //   // value  默认值
    //   value:""
    // }
    playlist: {
      type: Object,
    }
  },

...

这里接收从demo中传入给组件的歌单信息，type是Object类型。

---

使用组件

demo.json:

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

指定了组件的路径。

demo.js:

// pages/demo/demo.js
Page({

  /**
   * 页面的初始数据
   */
  data: {

    // openid: '',
    playlist: [{
        picUrl: "http://p4.music.126.net/hH30N-Lz_81-oSnjBI-Pxg==/109951164367373093.jpg?param=200y200",
      playCount: 990000000,
        name: "邓紫棋a"
      },
      {
        picUrl: "http://p4.music.126.net/hH30N-Lz_81-oSnjBI-Pxg==/109951164367373093.jpg?param=200y200",
        playCount: 99111111,
        name: "邓紫棋b"
      },
      {
        picUrl: "http://p4.music.126.net/hH30N-Lz_81-oSnjBI-Pxg==/109951164367373093.jpg?param=200y200",
        playCount: 992,
        name: "邓紫棋c"
      },
      {
        picUrl: "http://p4.music.126.net/hH30N-Lz_81-oSnjBI-Pxg==/109951164367373093.jpg?param=200y200",
        playCount: 993,
        name: "邓紫棋c"
      },
      {
        picUrl: "http://p4.music.126.net/hH30N-Lz_81-oSnjBI-Pxg==/109951164367373093.jpg?param=200y200",
        playCount: 994,
        name: "邓紫棋c"
      },
      {
        picUrl: "http://p4.music.126.net/hH30N-Lz_81-oSnjBI-Pxg==/109951164367373093.jpg?param=200y200",
        playCount: 995,
        name: "邓紫棋c"
      }
    ]
  },


  ...

demo.wxml:

<view class="playlist-container">
  <block wx:for="{{playlist}}">
    <!-- item数据会传入playlist组件中 -->
    <x-playlist playlist="{{item}}"></x-playlist>
  </block>
</view>

demo.wxss:

.playlist-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  margin-top: 10rpx;
  flex-direction: row;
}

.img {
  width: 100%;
  height: 100%;
}

数字格式化

observers数据监听器可以用于监听和响应任何属性和数据字段的变化，这里用于监听数字的变化。

_tranNumber方法用于数字格式化。

// components/playlist/playlist.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    playlist: {
      type: Object,
    }
  },
  
  observers: {
    ['playlist.playCount'](count){
      this.setData({
        _count: this._tranNumber(count, 2)
      })
    }
  },
  
  ...
  
  /**
   * 组件的方法列表
   */
  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) + '亿'
      }
    }
  }
})

在playlist.wxml中使用_count: