Wechat---组件 Components book

目录

book

book.js

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    book:Object   // 有多个可以写一个对象
  },

  /**
   * 组件的初始数据
   */
  data: {

  },

  /**
   * 组件的方法列表
   */
  methods: {
    // 写在模板中的事件，降低通用性
    onTap(event){
      const id = this.properties.book.id
      wx.navigateTo({
        url: `/pages/book-detail/book-detail?id=${id}`
      })
    }
  }
})


book.wxml

<view bind:tap="onTap" class="container">
  <image  src="{{book.image||book.img}}"></image>
  <view class="description">
    <text class='title'>{{book.title}}</text>
    <text class='author'>{{book.author}}</text>
    <view wx:if="{{showLike}}" class='foot'>
      <text class="footer">{{book.fav_nums}}  喜欢</text> 
    </view>
  </view>
</view>


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

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

.title{
  margin-top:10rpx;
  text-overflow:ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

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

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

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

.footer{
  color:#666666;
}