小程序開發-12-組件高級應用

圖書組件的實現

有一個知識點要注意，就是在container容器裏面的position要爲relative，不然在container裏的description設置爲absolute，bottom爲0時會位於整個頁面最底部

.container {
margin-top: 30rpx;
display: flex;
position: relative;
box-shadow: 2px 2px 3px #e3e3e3;
flex-direction: column;
width: 240rpx;
height: 360rpx;
}

.container image {
width: 100%;
height: 100%;
border-radius: 2px;
}

.container .description {
box-sizing: border-box;
width: 100%;
position: absolute;
bottom: 0;
background-color: #fff;
padding: 5rpx 10rpx 8rpx 15rpx;
font-size: 24rpx;
display: flex;
flex-direction: column;
border-bottom-left-radius: 2px;
border-bottom-right-radius: 2px;
}

.title {
margin-top: 10rpx;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.author {
font-size: 20rpx;
color: #999999;
margin-bottom: 10rpx;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}

.foot {
font-size: 20rpx;
display: flex;
flex-direction: row;
justify-content: flex-end;
}
.footer{
color: #666666;
}

列表渲染

使用wx:for

<block wx:for="{{books}}" wx:for-item="指定別名">
	<v-book book="{{item}}"/>
</block>

block組件不會在頁面進行顯示，只接受控制屬性，如wx:if，wx:for等

書籍頁面佈局

wxml代碼

<!-- for 循環 wx:for -->
<view wx:if="{{!searching}}" class="container">
 <view class="header">
     <view class='box' bind:tap="onSearching">
         <image src="/images/icon/search.png" />
         <text>搜索書籍</text>
     </view>
 </view>
 <view class="sub-container">
     <image class="head-img" src="/images/book/quality.png" />
     <view class="books-container">
         <block wx:key="{{id}}" wx:for="{{books}}">
             <wzh-book book="{{item}}" />
         </block>
     </view>
 </view>
</view>

<wzh-search more="{{more}}" bind:cancel="onCancel" wx:else/>

wxss代碼

.container {
 display: flex;
 flex-direction: column;
 align-items: center;
 width: 100%;
}

.sub-container {
 display: flex;
 flex-direction: column;
 align-items: center;
 background-color: #f5f5f5;
 margin-top: 100rpx;
}

.box {
 display: flex;
 flex-direction: row;
 justify-content: center;
 align-items: center;
 border-radius: 50px;
 background-color: #f5f5f5;
 height: 68rpx;
 width: 700rpx;
 color: #999999;
}

.header {
 position: fixed;
 background-color: #ffffff;
 height: 100rpx;
 width: 100%;
 border-top: 1px solid #f5f5f5;
 border-bottom: 1px solid #f5f5f5;
 display: flex;
 flex-direction: row;
 align-items: center;
 justify-content: center;
 box-shadow: 0 0 3px 0 #e3e3e3;
 z-index: 99;
}

.head-img {
 width: 106rpx;
 height: 34rpx;
 margin-top: 40rpx;
}

.box image {
 margin-right: 10px;
 width: 14px;
 height: 14px;
 margin-bottom: -2px;
}

.books-container {
 margin-top: 10rpx;
 display: flex;
 flex-direction: row;
 flex-wrap: wrap;
 justify-content: space-between;
 padding: 0 90rpx;
}

.books-container v-book{
 margin-bottom: 10rpx;
}

wx: key的用法和意義

當使用wx:for的時候微信會提示使用wx:key來提高性能

用法一，數據爲對象

• 當wx:for傳入的數據爲object對象時，key要知足兩個條件：不重複、數字和字符串

用法二，數據爲字符串或者數字

• wx:key="*this"

項目型組件與通用性

頁面如何從外部接收數據

onLoad(options){
 //id
 const id = options.id;
}

點擊單本圖書後跳轉

//組件內代碼
methods: {
 onTap: function(e){
     const id = this.properties.book.id;
     wx.navigateTo({
         url: `/pages/book-detail/book-detail?bid=${id}`,
     })
 }
}

組件跳轉的優缺點

​ 避免了要寫組件傳遞給頁面的triggerEvent事件，可是下降了組件通用性

如何取捨

​ 服務於當前的項目，即項目組件。通常的都是用triggerEvent事件通知頁面，使頁面進行跳轉。

書籍詳情頁面三組數據加載

獲取三部分數據，獲取書籍詳細信息、短評信息、點贊狀況

組件設計思想：slot插槽的應用

組件wxml內的代碼

<view bind:tap="onTap" class="container tag-class">
 <slot name="before"></slot>//定義插槽1
 <text >{{text}}</text>
 <slot name="after"></slot> //定義插槽2
</view>

page頁面引用組件，並放入插槽

<wzh-tag text="{{item.content}}">
 <text slot="after" class='num'>{{'+'+item.nums}}</text>
</wzh-tag>  //注意引用必定要要閉合

組件內啓用插槽

Component({
 options: {
     multipleSlots: true //此處爲多個solt啓用
 },
 properties:{
     ....
 }
 ....
})

當引用一個插槽的時候，組件內能夠不用開啓solt，同時不用寫插槽的name屬性

自定義組件樣式探討一：hack方式

子元素選擇器，但違反了組件的封裝原則

.comment-container > wzh-tag:nth-child(1) > view{
background-color: #fffbdd;
}
//奇數項着色
.comment-container > wzh-tag:nth-child(odd) > view{
background-color: #fffbdd;
}

自定義組件探討二：外部樣式的概念

樣式的傳遞，由小程序內部的機制實現，但不是全部的樣式均可以傳遞

//組件內js代碼
Component({
 externalClasses: ['tag-class'],//激活外部樣式傳遞
 properties: {
     ....
 },
 ...
})

//組件wxml代碼
<view bind:tap="onTap" class="container tag-class"> //普通樣式 外部樣式
 <!-- <slot name="before"></slot> -->
 <text >{{text}}</text>
 <slot></slot>
</view>

//page頁wxml引用
<v-tag tag-class="ex-tag"/>
	...
</v-tag>

//page頁wxss代碼
.ex-tag{
 ....
}

注意：tag-class不能覆蓋container中的樣式，必需要強制覆蓋普通樣式，能夠用!important

外部樣式類的使用技巧

組件wxml內的代碼
<v-tag wx:for="{{comments}}" tag-class="{{index===0?ex-tag1:''||index===1?ex-tag2:''}}">
	...
</v-tag>