图书组件的实现

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