先編寫基本的頁面架構

<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>

?

轉載于:https://www.cnblogs.com/guangzhou11/p/11294064.html

總結

以上是生活随笔為你收集整理的学习旧岛小程序 （4） 电影组件的实现的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。