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

先编写基本的页面架构

<view class="classic-container">  
        <image src="{{img}}" class="classic-img"></image>
        <image class='tag' src="images/[email protected]" />
       <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>

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

猜你喜欢

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