先编写基本的页面架构
<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
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。