微信小程式之元件的集合（三）

一、**music元件的開發

1、頁面以及頁面樣式的開發

1

// music元件頁面開發
2<
view 
hidden
="}"
class
="container"
>
3<
image 
class
="classic-img }"
src='}'
/>
4<
image 
class
="player-img"
bind:tap
="onplay"
src='}' 
/>
5<
image 
class
="tag"
src='images/[email protected]' 
/>
6<
text 
class
="content"
>}
text
>
7view
>89
// 樣式的開發 css**
10.container
1516
.classic-img
2223
.player-img
2930
.tag
37/* 旋轉的動畫效果css */
38.rotation 
4546
47@-webkit-keyframes rotation 
5152
to 55 }

2、頁面中邏輯**的開發

1

import from '../classic-beh.js';45
//6 const mmgr =wx.getbackgroundaudiomanager();78
component(,
1819/**
20* 元件的初始資料
21*/
22data: ,
2728
//在元件例項進入頁面節點樹時執行
29 attached:function
(event),
3334
//生命週期函式 當元件被移除時候觸發
35 detached:function
(event),
40/**41
* 元件的方法列表
42*/
43methods: )
50 mmgr.src = this
.properties.src;
51 }else)55
mmgr.pause();56}
57 mmgr.title = this
.properties.title;
58},
5960
//61 _recoverstatus:function
())67
return;68
}69//70
if(mmgr.src == this
.properties.src))74}
75},
7677
//監聽總控開關和元件聯動
78 _mointorswitch:function
())83
//暫停**
84 mmgr.onpause(()=>)
87//
關閉**總開關
88 mmgr.onstop(()=>)
9192
//93 mmgr.onended(()=>)96}
97}98 })

3、元件使用注意事項

元件在classic中使用的時候，需要考慮元件的顯示與隱藏使用hidden屬性還是wx:if來控制，至於這兩者的區別，官方的文件來看：

使用的**：

1

2<
v-music 
wx:if
='}' img
='}' 
content
='}' 
src='}' 
title
='}' 
/>

二、小程式中tab欄的開發

1

,12 "sitemaplocation": "sitemap.json",
13 "tabbar": ,24,
3036]37
}38 }

接下來就是另乙個大的模組的開發了，bool模組的開發，繼續繼續...

微信小程式元件

class屬性 可以設定樣式,如果與動態資料繫結結合,元件的class具有動態變化的能力 style 通過style設定元件的內聯樣式,style屬性值中可以設定css的各種屬性 hidden 預設為false,不隱藏 data 屬性 可以用來為元件設定任意的自定義的屬性值,當元件繫結的事件觸發時,...

微信小程式 元件

官方文件見 我們的封裝 var basecomponentoption require utils basecomponentoption var option basecomponentoption.init 最小值限制 min 最大值 max 當前值 value 傳參物件,和 官方文件一致,只是...

微信小程式開發元件的使用（三）

properties 相當於vue中的props接收屬性 triggerevent 相當於vue中的 emit slot 和vue是類似的slot 1.可以通過slot為自定義元件嵌入wxml結構 2.預設乙個自定義元件只能嵌入乙個slot，如果嵌入多個slot必須要開啟options中的multi...