小程序——布局示例

吴声子夜歌2026-02-26 14:16

布局示例

一、列表式

列表式布局是一种常见的排版方式，其排列方式为由上而下垂直排列，在每个列表元素当中存放内容，示例如图所示

html 复制代码 
<!-- 导航标题 -->
<view class="title">
  <view class="select">正在热映</view>
  <view class="default">即将上映</view>
</view>
<!-- 轮播图 -->
<view class="haibao">
  <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}">
    <block wx:for="{{imgUrls}}">
      <swiper-item>
        <image src="{{item}}"></image>
      </swiper-item>
    </block>
  </swiper>
</view>
<!-- 列表元素 -->
<block wx:for="{{movies}}">
  <view class="list">
    <view class="pic">
      <image src="{{item.image}}"></image>
    </view>
    <view class="movie">
      <view class="name">{{item.name}}</view>
      <view>{{item.type}}</view>
      <view>{{item.director}}</view>
      <view>{{item.actor}}</view>
      <view>{{tiem.showTime}}</view>
    </view>
    <view class="btn">
      <button>观看</button>
    </view>
  </view>
  <view class="hr"></view>
</block>
js 复制代码 
Page({
  data: {
    indicatorDots: true,
    autoplay: true,
    interval: 3000,
    imgUrls: [
      "/images/1.jpg",
      "/images/1.jpg"
    ],
    movies: [{
      image: "/images/1.jpg",
      name: "流浪地球",
      type: "类型：科幻/动作片",
      director: "导演：郭帆",
      actor: "主演：屈楚萧 李光杰",
      showTime: "上映：2019年"
    }, {
      image: "/images/1.jpg",
      name: "复仇者联盟4",
      type: "类型：悬疑/科幻片",
      director: "导演：安东尼罗素",
      actor: "主演：小罗特唐尼 克里斯埃文斯",
      showTime: "上映：2019年"
    }, {
      image: "/images/1.jpg",
      name: "波西米亚狂想曲",
      type: "类型：爱情/喜剧片",
      director: "导演：布莱恩辛格",
      actor: "主演：拉米马克雷 露西宝通",
      showTime: "上映：2019年"
    }]
  }
})
css 复制代码 
/* 导航样式 */
.title {
  display: flex;
  flex-direction: row;
}
/* 导航选中 */
.select {
  font-size: 30rpx;
  width: 50%;
  color:green;
  text-align: center;
  height: 100rpx;
  line-height: 100rpx;
  border-bottom: 2px solid green;
}
/* 导航未选中 */
.default {
  width: 40%;
  font-size: 30rpx;
  text-align: center;
  height: 100rpx;
  line-height: 100rpx;
}
/* 轮播图样式 */
swiper {
  height: 280rpx;
}
.haibao image {
  width: 100%;
  height: 280rpx;
}
/* 列表内部样式 */
.list {
  display: flex;
  flex-direction: row;
}
/* 图片样式 */
.pic image {
  width: 180rpx;
  height: 200rpx;
  padding: 10rpx;
}
/* 电影信息样式 */
.movie {
  font-size: 24rpx;
  padding-top: 20rpx;
  line-height: 40rpx;
  color: #000000;
}
/* 电影名称样式 */
.name {
  font-size: 26rpx;
  padding-top: 20rpx;
  line-height: 40rpx;
  color: #000000;
}
/* 按钮位置 */
.btn {
  position: absolute;
  right: 30rpx;
  margin-top: 140rpx;
}
/* 按钮样式 */
.btn button {
  width: 140rpx;
  height: 50rpx;
  font-size: 20rpx;
  color: green;
  border: 1px solid green;
}
/* 分割线样式 */
.hr {
  height: 1px;
  width: 100%;
  background-color: #000000;
  opacity: 0.5;
}

页面布局思路：首先设计页面上部的标题，利用<swiper>组件实现图片的切换效果；然后在轮播图下方放置容器，设置为flex布局，主轴在水平方向上从左向右，使得电影图片、影片介绍信息和"观看"按钮可以在水平方向上排列，再分别

设置内部的电影图片、电影信息以及按钮的样式；最后通过列表渲染实现3个电影的显示。

二、转盘式

对于转盘式中的内容，用户可以通过左右滑动预览每个元素，示例如图所示。

html 复制代码 
<view class="bg">
  <view class="movie">
    <!-- 电影图片 -->
    <image src="/images/1.jpg" style="width:300rpx;"></image>
  </view>
  <view class="outer">
    <!-- 电影标题 -->
    <view class="name">流浪地图</view>
    <view class="item">中国 | 2019</view>
    <view class="item">科幻 / 动作片</view>
    <view class="item">郭帆</view>
    <view class="item">屈楚萧 李光杰</view>
  </view>
</view>
<view class="detail">
  <!-- 电影详情 -->
  《流浪地球》根据刘慈欣同名小说改编，故事设定在2075年，讲述了太阳即将毁灭，已经不适合人类生存，而面对绝境，人类将开启"流浪地球"计划，试图带着地球一起逃离太阳系，寻找人类新家园的故事。
</view>
<!-- 电影海报 -->
<view class="zhinan">电影海报</view>
<scroll-view scroll-x="true">
  <view class="haibaoitem">
    <image src="/images/1.jpg" style="height:180rpx;width: 250rpx;"></image>
  </view>
  <view class="haibaoitem">
    <image src="/images/1.jpg" style="height:180rpx;width: 250rpx;"></image>
  </view>
  <view class="haibaoitem">
    <image src="/images/1.jpg" style="height:180rpx;width: 250rpx;"></image>
  </view>
</scroll-view>
css 复制代码 
/* 背景颜色 */
.bg{
  width: 100%;
  background-color: #36648b;
  display: flex;
}
/* 头部布局 */
.movie {
  display: flex;
  flex-direction: row;
  padding: 20rpx;
}
.pic image {
  width: 200rpx;
  height: 300rpx;
}
/* 电影信息样式 */
.outer {
  margin: 10rpx 20rpx;
}
.name {
  color: #ffffff;
  margin-top: 60rpx;
}
.item {
  font-size: 24rpx;
  color: #ffffff;
  line-height: 70rpx;
}
/* 电影简介样式 */
.detail {
  font-size: 26rpx;
  line-height: 50rpx;
  margin: 20rpx;
  text-indent: 1em;
}
/* 分割线样式 */
.hr {
  height: 20rpx;
  width: 100%;
  background-color: #cccccc;
  opacity: 0.2;
}
.zhinan {
  font-size: 40rpx;
  padding: 16rpx;
}
scroll-view {
  height: 350rpx;
  width: 100%;
  white-space: nowrap;
}
/* 电影海报样式 */
.haibaoitem {
  padding: 10rpx;
  display: inline-block;
}

本例中的电影海报部分包含多幅图片，<scroll-view>组件设置属性scroll-x="true"实现水平方向的滑动区域；<image>组件通过父组件<view>设置属性display取值inline-block,把默认是块级元素的<view>组件修改成内联块级元素，最终电影海报图片能够实现左右滑动的效果。

三、多面板

在微信小程序的界面中，多面板常用于信息的分类，示例如图所示。

html 复制代码 
<!-- 分割线 -->
<view class="hr"></view>
<!-- 输入框 -->
<input placeholder="请输入商品名称"/>
<view class="hr"></view>
<view class="content">
  <view class="left">
    <!-- 左侧部分 -->
    <scroll-view scroll-y="true">
      <block wx:for="{{list}}">
        <view>{{item}}</view>
      </block>
    </scroll-view>
  </view>
  <view class="right">
    <!-- 右侧部分 -->
    <view class="order">
      <!-- 分类部分 -->
      <view>热门推荐</view>
      <view>胜国热搜</view>
      <view>专场推荐</view>
    </view>
  </view>
</view>
js 复制代码 
Page({
  data: {
    list: ["手机数码", "男装推荐", "女装推荐", "优选水果", "家用电器", "户外运动", "电脑办公", "体育用品", "美妆护肤"]
  }
})
css 复制代码 
/* 分割线样式 */
.hr {
  border: 1px solid #EEE9E9;
  width: 100%;
  opacity: 0.6;
}
/* 输入框样式 */
input {
  margin: 15rpx 30rpx;
  border: 1px solid #cccccc;
  border-radius: 50rpx;
  text-align: center;
  font-size: 32rpx;
}
/* 布局样式 */
.content {
  display: flex;
  flex-direction: row;
}
/* 左边样式 */
.left {
  width: 25%;
  font-size: 30rpx;
}
scroll-view {
  height: 90%;
}
/* 左边元素样式 */
.left view {
  text-align: center;
  height: 100rpx;
  line-height: 100rpx;
}
/* 右边样式 */
.right {
  width: 75%;
}
/* 分类样式 */
.order {
  display: flex;
  flex-direction: row;
  text-align: center;
  padding: 20rpx;
}
.order view {
  width: 33%;
  font-size: 32rpx;
}

页面布局思路：页面上部放置<iput>组件，为其设置相关属性完成搜索框的设计；下方分别为左右两个部分，放置<view>容器，设置为flex布局，主轴在水平方向上从左向右，左边部分宽度设置为25%，利用<scroll-view>组件及列表渲染完成左边的布局，右边部分宽度设置为75%，内部放置3个<viw>容器，宽度均设置为33%；最后完成样式的设置。

四、标签式

在微信小程序的界面中，通常在搜索框下方会有相关的标签，标签示例如图所示。

html 复制代码 
<!-- 搜索框 -->
<view class="search">
  <view class="searchBg">
    <!-- 搜索图标 -->
    <image src="/images/1.png" style="width:50rpx;height:50rpx"></image>
    <input placeholder="搜索宝贝"/>
  </view>
  <!-- 取消按钮 -->
  <view class="btn">取消</view>
</view>
<!-- 分割线 -->
<view class="hr"></view>
<view class="title">
  <view class="left">热门搜索</view>
  <view class="right">换一批</view>
</view>
<!-- 标签内容 -->
<view class="tag">
  <block wx:for="{{label1}}">
    <view>{{item}}</view>
  </block>
</view>
<!-- 标题内容 -->
<view>
  <view class="title">
    <view class="left">历史搜索</view>
  </view>
</view>
<!-- 标签内容 -->
<view class="tag">
  <block wx:for="{{label2}}">
    <view>{{item}}</view>
  </block>
</view>
js 复制代码 
Page({
  data: {
    label1: ["手机", "女鞋", "果冻", "手套", "连衣裙", "手表", "高清电脑屏幕", "篮球服"],
    label2: ["衣柜", "电饭煲", "洗衣机", "家具", "连衣裙", "小米", "华为荣耀", "咖啡"]
  }
})
css 复制代码 
/* 搜索框样式 */
.search {
  display: flex;
  flex-direction: row;
  padding: 10rpx;
}
/* 搜索框背景样式 */
.searchBg {
  background-color: #e8e8ed;
  width: 80%;
  display: flex;
  flex-direction: row;
  height: 60rpx;
}
/* 搜索图标样式 */
.searchBg image {
  margin: 10rpx;
}
/* 输入框样式 */
.searchBg input {
  height: 60rpx;
  font-size: 30rpx;
}
/* 取消按钮样式 */
.btn {
  font-size: 26rpx;
  font-weight: bold;
  line-height: 60rpx;
  margin-left: 24rpx;
  border: 1px solid #cccccc;
  width: 100rpx;
  text-align: center;
  background-color: #e8e8ed;
  border-radius: 6rpx;
}
/* 分割线样式 */
.hr {
  border: 1px solid #eee9e9;
  opacity: 0.6;
}
/* 标题样式 */
.title {
  display: flex;
  flex-direction: row;
  padding: 20rpx;
}
/* 热门搜索样式 */
.left {
  width: 80%;
  font-size: 30rpx;
}
/* 换一批样式 */
.right {
  width: 20%;
  font-size: 25rpx;
  color: #ec3131;
  text-align: right;
}
/* 标签布局样式 */
.tag {
  padding-left: 20rpx;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
/* 标签样式 */
.tag view {
  background-color: #e8e8ed;
  padding-left: 24rpx;
  padding-right: 24rpx;
  height: 50rpx;
  line-height: 50rpx;
  border-radius: 10rpx;
  text-align: center;
  font-size: 26rpx;
  margin-right: 20rpx;
  margin-bottom: 20rpx;
}

页面布局思路：页面的上部放置<view>容器，设置为lex布局主轴在水平方向上从左向右，左边放置<viw>容器，用于增加背景色以及设置布局样式，将搜索图标、<iput>组件以及"取消"按钮放置其中；搜索框下方的"热门搜索"和"换一批"也采用flex布局方式，标题下方的标签每个元素水平向右排列并且换行，因此在外面的<view>设置为1x布局，主轴在水平方向上从左向右，并且设置允许换行显示，再利用列表渲染完成数据的显示，最终根据不同元素之间的位置关系，编写标签内部的样式代码。

相关推荐
luffy54592 小时前
微信小程序页面使用类似filter函数的wxs语法
微信小程序·小程序
Slow菜鸟2 小时前
微信小程序开发（二）目录结构完全指南
微信小程序·小程序
小小王app小程序开发4 小时前
海外盲盒小程序抽赏玩法分析（附跨境技术落地要点）
小程序
一叶星殇4 小时前
微信小程序请求拦截器踩坑：避免重复刷新 token
微信小程序·小程序
hello kitty w5 小时前
4. 基本语法
小程序
CHU7290355 小时前
探索淘宝扭蛋机小程序：创意互动与趣味体验的融合
小程序
头发还在的女程序员7 小时前
【免费下载】企业能源管理系统
小程序·策略模式·能源管理
吴声子夜歌20 小时前
小程序——样式与布局
小程序
hello kitty w1 天前
3.小程序方法的封装
javascript·小程序
热门推荐
01GitHub 镜像站点02【OpenClaw 本地实战 Ep.3】突破瓶颈：强制修改 openclaw.json 解锁 32k 上下文记忆03Claude Code + GLM4.7 避坑指南：解决 Unable to connect to Anthropic services04AI Agent 平台横评：ZeroClaw vs OpenClaw vs Nanobot05OpenClaw 使用和管理 MCP 完全指南06Clawdbot部署教程：解决‘gateway token missing’授权问题的完整步骤07AI 规范驱动开发“三剑客”深度对比：Spec-Kit、Kiro 与 OpenSpec 实战指南08OpenClaw 安装之（三）DeepSeek模型接入配置和详细配置参数09AI agent：介绍 ZeroClaw 安装，使用10让 Trae IDE 智能体 “读懂”文档 Excel+PDF+DOCX ：mcp-documents-reader 工具使用指南