小程序开发-12-组件高级应用

Posted 2021-02-14 甜珊贝奇

图书组件的实现

有一个知识点要注意，就是在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>