微信小程序界面布局（微信小程序-常用视图容器类组件）

• 普通视图区域 块级元素 类似HTML的div

使用效果:

代码展示:

list.wxml

<view class="container1"> <view>A</view> <view>B</view> <view>C</view> </view>

list.wxss

/* pages/list/list.wxss */ .container1 { display: flex; justify-content: space-around; } .container1 view { width: 5rem; height: 5rem; text-align: center; line-height: 5rem; } .container1 view:nth-child(1){ background-color: pink; } .container1 view:nth-child(2){ background-color: skyblue; } .container1 view:nth-child(3){ background-color: yellow; }

• 可滚动的视图区域
• 常用来实现滚动列表的效果

使用效果:

代码展示:

list.wxml

<scroll-view class="container1 container2" scroll-y> <view>A</view> <view>B</view> <view>C</view> </scroll-view>

list.wxss

/* pages/list/list.wxss */ .container1 { display: flex; justify-content: space-around; } .container1 view { width: 5rem; height: 5rem; text-align: center; line-height: 5rem; } .container1 view:nth-child(1){ background-color: pink; } .container1 view:nth-child(2){ background-color: skyblue; } .container1 view:nth-child(3){ background-color: yellow; } .container2 { margin-top: 2rem; border: 1px solid red; // 必须给scroll-view 固定高度 height: 6rem; width: 5rem; }

• 轮播图容器组件 和 轮播图 item组件

更多了解属性:swiper | 微信开放文档 (qq.com)

使用效果:

代码展示:

list.wxml

<swiper class="swiper-container" indicator-dots autoplay> <swiper-item> <view class="item">A</view> </swiper-item> <swiper-item> <view class="item">B</view> </swiper-item> <swiper-item> <view class="item">C</view> </swiper-item> </swiper>

list.wxss

.swiper-container { height: 8rem; } .item { height: 100%; line-height: 8rem; text-align: center; } swiper-item:nth-child(1) .item{ background-color: pink; } swiper-item:nth-child(2) .item { background-color: skyblue; } swiper-item:nth-child(3) .item { background-color: yellow; }

使用效果:

代码展示:

<!--pages/list/list.wxml--> <view> <text user-select="true">2015年1月，微信第一条朋友圈广告</text> <view>不可拷贝</view> </view>

使用效果:

代码展示:

<!--pages/list/list.wxml--> <rich-text nodes="<h1 style='color:pink;'>hello world</h1>"></rich-text>

• 按钮组件
• 功能丰富
• 通过open-type属性可以调用微信提供的各种功能(获取用户授权,转发)

属性详情:button | 微信开放文档 (qq.com)

使用效果:

代码展示:

<!--pages/list/list.wxml--> <!-- type 指定按钮类型 --> <button> 默认按钮 </button> <button type="primary">主色调按钮</button> <button type="warn">警告</button> <view style="text-align: center;">=============</view> <!-- size="mini" 选择小尺寸 --> <button size="mini"> 默认按钮 </button> <button type="primary" size="mini">主色调按钮</button> <button type="warn" size="mini">警告</button> <view style="text-align: center;">=============</view> <!--plain 镂空按钮 --> <button plain> 默认按钮 </button> <button type="primary" plain>主色调按钮</button> <button type="warn" plain>警告</button>

mode属性 用来指定图片的裁剪和缩放模式

使用效果:

代码展示:

list.wxml

<!--pages/list/list.wxml--> <!-- 空图片 --> <image></image> <!-- 使用src指向图片路径 mode 指定图片裁剪和缩放模式--> <image mode="widthFix" src="/images/team.jpg"></image>

list.wxss

image { // 通过边框线证明image有默认的宽和高 border: 1px solid pink; }