微信小程式元件化實作歌單效果

需要實作的效果如下：

我們将歌單的每一項作為一個元件。

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: