微信小程序入门与实战(8)——使用嵌套自定义组件创建电影页面

最新推荐文章于 2024-06-11 17:34:17 发布

原创最新推荐文章于 2024-06-11 17:34:17 发布 · 821 阅读

1 ·

CC 4.0 BY-SA版权

微信小程序入门与实战专栏收录该内容

11 篇文章

订阅专栏

本文介绍了一个用于展示电影列表的小程序组件设计，包括电影海报、标题、评分等元素的布局和样式实现。通过使用自定义组件的方式，实现了电影信息的模块化展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

components/movie/index

index.wxml

<!--components/moive/index.wxml-->
<view class="container">
  <image class="poster" src="/img/iqiyi.png"></image>
    <text class="title">盗梦空间</text>
    <view class="rate-container">
    <l-rate disabled="{{true}}" size="22" score="3" />

    <text class="score">3</text>
    </view>
</view>

index.wxss

/* components/moive/index.wxss */
.container{
  display: flex;
  flex-direction: column;
  width: 200rpx;
}

.poster{
  width: 100%;
  height: 270rpx;
  margin-bottom: 22rpx;
}

.title{
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-all;
}

.rate-container{
  margin-top:6rpx;
  display: flex;
  flex-direction: row;
  align-items: baseline;
}

.score{
  margin-left:20rpx;
  font-size:24rpx;
}

index.json

{
  "component": true,
  "usingComponents": {
    "l-rate":"/miniprogram_npm/lin-ui/rate/index"
  }
}

components/movie-list/index

index.wxml

<!--components/movie-list/index.wxml-->
<view class="container f-class">
  <view class="title-container">
    <text>正在热映</text>
    <text class="more-text">更多 ></text>
  </view>
  <view class="movie-container">
    <movie />
    <movie />
    <movie />
  </view>
</view>

index.wxss

/* components/movie-list/index.wxss */
.container{
  padding: 36rpx 36rpx;
  background-color: #ffffff;
}

.title-container{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-bottom: 28rpx;
}

.movie-container{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.more-text{
  color: #1f4ba5;
}

index.json

{
  "component": true,
  "usingComponents": {
    "movie":"/components/movie/index"
  }
}

pages/movie

movie.wxml

<!--pages/movies/movies.wxml-->
<movie-list f-class="movie-list" />
<movie-list f-class="movie-list" />
<movie-list f-class="movie-list" />

movie.wxss

/* pages/movies/movies.wxss */
.movie-list{
  margin-bottom: 30rpx;
}

page{
  background-color: #f2f2f2;
  /* background-color: teal; */
}