学习旧岛小程序 （4） 电影组件的实现

先编写基本的页面架构

<view class="classic-container">  
        <image src="{{img}}" class="classic-img"></image>
        <image class='tag' src="images/movie@tag.png" />
       <text class="content">{{content}}</text>
</view>

编写css  

/* component/movie/index.wxss */
.classic-container {
display:flex;
flex-direction:column;
align-items:center;
}
.classic-img{
  width:750rpx;
  height:500rpx;
 
  /* margin-bottom:120rpx; */
}
.tag {
     width:46rpx;
  height:142rpx;
  position: relative;
  bottom: 50rpx;
 right:310rpx;
 
}

.content{
  display:block;
  /* width:275px; */
  /* margin:0 auto; */
  max-width:550rpx;
  font-size:36rpx;
}

这里有3个地方注意：

1.组件的整体样式采用flex 布局

display:flex;
flex-direction:column;
align-items:center;

2. 电影这个图片的处理

一开始电影图片处于这样的位置

 

我们可以使用相对定位  改变它的位置显示 

相对定位就是 相对于它原来的位置改变  需要设置  left  right  top  botttom  才有效果

3.  文字换行显示  这里我们可以设置  块级元素   设置最大宽度

.content{
  display:block;
  /* width:275px; */
  /* margin:0 auto; */
  max-width:550rpx;
  font-size:36rpx;
}

编写js   设置  html  页面中 的  img   content 的属性 

// component/movie/index.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    img: {
      type: String
    },
    content:{
      type: String
    }
  },

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

  },

  /**
   * 组件的方法列表
   */
  methods: {

  }
})

在使用到的组件内引入

classic.json

{
  "usingComponents": {
    "v-like": "/component/like/index",
    "v-epsoide":"/component/epsoide/index",
    "v-movie": "/component/movie/index"
  }
}

classic.wxml

 <v-movie  class=""  img="{{classic.image}}"   content="{{classic.content}}"></v-movie>