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

先编写基本的页面架构

<view class="classic-container">  <image src="{{img}}" class="classic-img"></image><image class='tag' src="data: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）电影组件的实现相关推荐

学习旧岛小程序（3）组件的样式
(1)单位要用 rpx rpx(responsive pixel): 可以根据屏幕宽度进行自适应.规定屏幕宽为750rpx.如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则75 ...
学习旧岛小程序（2）自定义组件
(1) 新建组件新建组件目录下的文件名字可以与目录不一样 (2)引用组件在引用的组件的 .json 添加配置 { "usingComponents": { "like ...
学习旧岛小程序（5） observer 函数中修改属性的值
不要在一个属性的 observer 函数中修改属性的值不然会造成内存泄露错误代码: properties: {/* 期刊号 */index: {type: String,observer: fu ...
学习旧岛小程序（5）自定义组件的自定义事件
自定义组件的触发事件: 自定义组件触发事件时,需要使用 triggerEvent 方法,指定事件名.detail对象和事件选项: this.triggerEvent('like', { behavio ...
学习旧岛小程序（4）封装api 请求
1.配置基本的请求路径和 key config.js const config = {baseUrl: 'http://bl.7yue.pro/v1/',appkey: "" ...
学习旧岛小程序（1） flex 布局
css : view 相当于 div 块级元素 display 默认设置 block display:inline 设置后设置宽度高度是无效的要设置宽度高度又要设置为行内元素我们设置: (1) ...
微信旧岛小程序章节目录
索引第一章申请appkey ## 标题##我是标题第二章准备工作小程序开发工具介绍和第三方开发工具介绍第三章小程序基础知识与新特性 1.小程序的4种文件类型 2.小程序的组织结构 3 ...
学习前端-微信小程序
微信开放文档https://developers.weixin.qq.com/miniprogram/dev/framework/ 最近简单的学习了微信小程序的一些组件和路由API写法,学习过程中由于 ...
微信小程序_基础组件学习02
微信小程序_基础组件学习02 swiper组件 swiper是滑块容器,也就是手机端的轮播图. swiper组件有两部分组成swiper和swiper-item. swiper-item需要放在swi ...

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

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

最新文章

热门文章

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

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

最新文章

热门文章

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

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