微信小程序中的常用布局方式（总结）

参照Android开发，总结了微信小程序的常用的两种布局方式：1、线性布局（横版、竖版）。2、网格布局。

效果图如下：

一、网格布局

（1）固定Item个数的网格布局，主要用于功能模块入口展示。

WXML：

</view>

WXSS：

.container_h {

display: flex;

flex-direction: row;

}

.wrap {

flex-wrap: wrap;

}

.block {

width: 25%;

height: 200rpx;

}

（2）随机Item个数的网格布局，主要用于产品多列效果展示。

WXML：

<scroll-view class="container_g_list m_t_50" scroll-x="true">

</view>

</block>

</scroll-view>

WXSS：

.container_g_list{

white-space: wrap;/*不放这个不能横排*/

}

.container_g_list .h_list_item{

width: 50%;

height: 270rpx;

display: inline-block;/*不放这个不能横排*/

}

.p_10 {

padding: 10rpx;

}

.container_v {

display: flex;

flex-direction: column;

}

.align_center {

align-items: center;

}

二、线性布局

（1）竖版列表效果，用于产品列表展示。（默认）

WXML：

</view>

</block>

</view>

WXSS：

.container_v {

display: flex;

flex-direction: column;

}

.align_center {

align-items: center;

}

（2）横版列表布局，用户产品列表展示。

WXML：

<scroll-view class="container_h_list m_t_50" scroll-x="true">

</view>

</block>

</scroll-view>

WXSS：

.container_h_list{

padding: 0 10rpx;

border-radius: 20rpx;

white-space: nowrap;/*不放这个不能横排*/

}

.container_h_list .h_list_item{

width: 200rpx;

height: 270rpx;

display: inline-block;/*不放这个不能横排*/

}

.container_v {

display: flex;

flex-direction: column;

}

.align_center {

align-items: center;

}

微信小程序中的常用布局方式（总结）相关推荐

《十四》微信小程序中的常用 API之登录、获取用户信息、支付、提现、跳转小程序、网络请求、弹框、导航、数据缓存、图片、查看文档、音频、拨打电话、剪贴板、滚动、WXML
微信小程序提供了 wx 这个全局变量,通过这个全局变量可以调用微信小程序的 API. 登录: wx.login():获取登录凭证 code.通过登录凭证 code 进而换取用户登录态信息,包括用户在当 ...
微信小程序中css常用属性
目录 ① flex ② display ③ box ④ position ① flex 容器的属性 flex-direction 决定主轴的方向(即项目的排列方向). flex-wrap 默认情况下, ...
微信小程序入门之常用组件(04)
常见组件重点讲解微信小程序中常见的布局组件 view,text,rich-text,button,image,navigator,icon,swiper, radio,checkbox 等一.vi ...
微信小程序中使用ECharts--折线图、柱状图、饼图等
微信小程序开发者的反馈,表示他们强烈需要像 ECharts 这样的可视化工具.但是微信小程序是不支持 DOM 操作的,Canvas 接口也和浏览器不尽相同. 因此,ECharts 团队和微信小程序官方 ...
微信小程序中通过flex实现网格布局(一)
这篇文章主要是通过flex布局实现网格布局. 准备知识: 数组的undefined的问题一般来说,网格布局是特殊的列表,后台返回的数据是一维数组.而我们通常使用wx:for的方式将数据填充进去.数据 ...
2022-01-13 微信小程序-简历小项目(一) 小程序中的flex布局,简历首页的制作,箭头区域的制作
文章目录一.准备 1.目标 2.小程序中的flex布局回顾flex布局小程序中要把div换成view标签,别的不变二.制作简历小程序-首页 1.利用小程序提供的独有的API来初始化高和宽小程 ...
Canvas绘图在微信小程序中的应用:生成个性化海报
Canvas绘图在微信小程序中的应用:生成个性化海报如极客时间的一些实现案例: 基础语法 Canvas本质是一个可以使用脚本(通常为JavaScript)来绘制图形的 HTML 元素,默认大小为30 ...
微信小程序 View：flex 布局
微信小程序 View 支持两种布局方式:Block 和 Flex 所有 View 默认都是 block 要使用 flex 布局的话需要显式的声明: display:flex; 下面就来介绍下微信小程序 ...
Canvas绘图在微信小程序中的应用:生成个性化海报 1
一.Canvas应用的背景(个人理解)及基础语法背景从2012年开始,微信那个时候用户的积累的量已经非常大了,推出公众号,当然大屏智能手机在那个时候也流行,传统的大众媒体逐步消亡,像微信公众号这样 ...
微信小程序_(组件)flex布局
小程序建议使用flex布局进行排版 flex是一个盒装弹性布局 flex是一个容器,所有子元素都是他的成员定义布局:display:flex flex容器的属性: 一.flex-direction: ...

微信小程序中的常用布局方式（总结）

微信小程序中的常用布局方式（总结）相关推荐

最新文章

热门文章