小程序--template多层嵌套

本文介绍了一个用于展示电影列表的小程序组件设计方案,包括星星评分、电影封面及标题等元素的样式定义与布局。通过模板化的方式实现了组件的复用,提高了开发效率。

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

template:

wxml:stars-movie-movie-list

stars-template.wxml

<template name="starsTemplate">
  <view class="stars-container">
     <view class="stars">
        <image src='/images/icon/star.png'></image>
        <image src='/images/icon/star.png'></image>
        <image src='/images/icon/star.png'></image>
        <image src='/images/icon/star.png'></image>
     </view>
     <text class="star-score">8.9</text>   
  </view>
</template>

movie-template.wxml

<import src="../stars/stars-template.wxml" />
<template name="movieTemplate">
    <view class="movie-container">
        <image class="movie-img" src="/images/yourname.jpg"></image>
        <text class="movie-title">gaggagag</text>
        <template is="starsTemplate"/>
    </view>
</template>

movie-list-template.wxml

<import src="../movie/movie-template.wxml" />
<template name="movieListTemplate">
  <view class="movie-list-container">
    <view class="inner-container">
      <view class="movie-head">
        <text class="slogan">正在热映</text>
        <view catchtap="onMoreTap" class="more">
          <text class="more-text">更多</text>
          <image class="more-img" src="/images/icon/arrow-right.png"></image>
        </view>
      </view>
      <view class="movies-container">
        <template is="movieTemplate"/>
        <template is="movieTemplate"/>
        <template is="movieTemplate"/>
      </view>
    </view>
  </view>
</template>

wxss:

 stars-template.wxss

.stars-container {
  display: flex;
  flex-direction: row;
}

.stars {
  display: flex;
  flex-direction: row;
  height: 17rpx;
  margin-right: 24rpx;
  margin-top: 6rpx;
}

.stars image {
  padding-left: 3rpx;
  height: 17rpx;
  width: 17rpx;
}

.star-score{
   color: #1f3463;
}

movie-template.wxss

@import "../stars/stars-template.wxss";
.movie-container {
display: flex;
flex-direction: column;
padding: 0 22rpx;
}
.movie-img {
width: 200rpx;
height: 270rpx;
padding-bottom: 20rpx;
}
.movie-title{
margin-bottom: 16rpx;
font-size: 24rpx;
}

movie-list-template.wxss

@import "../movie/movie-template.wxss";
.movie-list-container {
background-color: #fff;
display: flex;
flex-direction: column;
}
.inner-container{
margin: 0 auto 20rpx;
}
.movie-head {
padding: 30rpx 20rpx 22rpx;
/*display:flex;
flex-direction: row;
justify-content:space-between;*/
}
.slogan {
font-size: 24rpx;
}
.more {
float: right;
}
.more-text {
vertical-align: middle;
margin-right: 10rpx;
color: #1f4ba5;
}
.more-img {
width: 9rpx;
height: 16rpx;
vertical-align: middle;
}
.movies-container{
display:flex;
flex-direction: row;
}

页面使用:

movies.wxml

<import src="movie-list/movie-list-template.wxml" />
<view class="container">
  <view class="movies-template">
    <template is="movieListTemplate" data="{{...inTheaters}}" />
  </view>
  <view class="movies-template">
    <template is="movieListTemplate" data="{{...comingSoon}}" />
  </view>
  <view class="movies-template">
    <template is="movieListTemplate" data="{{...top250}}"/>
  </view>
</view>

movies.wxss

@import "movie-list/movie-list-template.wxss";






评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值