尝试实现九宫格布局
实现目标：
- 实现一个等宽等高的九宫格布局。
- 每行有三个元素，共三行。
- 子元素内容可以是按钮、图片或文本。
WXML 文件（九宫格布局）
html
<view class="grid-container">
<view class="grid-item" wx:for="{{gridData}}" wx:key="id">
<text>{{item.text}}</text>
</view>
</view>JS 文件
cpp
Page({
data: {
gridData: [
{ id: 1, text: '1' },
{ id: 2, text: '2' },
{ id: 3, text: '3' },
{ id: 4, text: '4' },
{ id: 5, text: '5' },
{ id: 6, text: '6' },
{ id: 7, text: '7' },
{ id: 8, text: '8' },
{ id: 9, text: '9' },
]
}
});WXSS 文件
css
.grid-container {
display: flex;
flex-wrap: wrap; /* 子元素换行 */
gap: 8px; /* 元素之间的间距 */
justify-content: space-between; /* 子元素均匀分布 */
background-color: #f5f5f5; /* 背景色 */
padding: 16px; /* 内边距 */
}
.grid-item {
width: calc(33.33% - 8px); /* 每行三列，减去间距 */
height: 100px; /* 固定高度，确保等高 */
text-align: center;
line-height: 100px; /* 文本垂直居中 */
background-color: #007aff; /* 元素背景色 */
color: white; /* 文本颜色 */
border-radius: 8px; /* 圆角 */
font-size: 16px; /* 字体大小 */
}创建瀑布流效果的产品列表
WXML 文件
html
<view class="waterfall">
<!-- 左列 -->
<view class="column">
<view class="product" wx:for="{{col1}}" wx:key="id">
<image src="{{item.img}}" mode="widthFix"></image>
<view class="name">{{item.name}}</view>
<view class="price">￥{{item.price}}</view>
</view>
</view>
<!-- 右列 -->
<view class="column">
<view class="product" wx:for="{{col2}}" wx:key="id">
<image src="{{item.img}}" mode="widthFix"></image>
<view class="name">{{item.name}}</view>
<view class="price">￥{{item.price}}</view>
</view>
</view>
</view>JS文件
javascript
Page({
data: {
col1: [],
col2: [],
col1Height: 0,
col2Height: 0,
products: [
{ id: 1, name: '商品1', price: 99, img: 'https://ts1.tc.mm.bing.net/th/id/OIP-C.RzU5hR-mzlIYuMuEGi-RpQHaJE?w=156&h=211&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2' },
{ id: 2, name: '商品2', price: 199, img: 'https://ts1.tc.mm.bing.net/th/id/OIP-C.pRVKlm5kgzxD2GbMXdE5YAHaGu?w=203&h=211&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2' },
{ id: 3, name: '商品3', price: 299, img: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.Jbm1xujyMshAY49FIOVEBgHaIH?w=199&h=218&c=7&r=0&o=7&pid=1.7&rm=3' },
{ id: 5, name: '商品3', price: 41, img: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.KyVzHnnAMW7FEuP4X3ICNQHaNJ?w=187&h=333&c=7&r=0&o=7&pid=1.7&rm=3' },
{ id: 4, name: '商品3', price: 55, img: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.M2stilLkI2iUYcIdEGV34AHaL8?w=196&h=317&c=7&r=0&o=5&pid=1.7' },
{ id: 6, name: '商品3', price: 2969, img: 'https://ts1.tc.mm.bing.net/th/id/OIP-C.RzU5hR-mzlIYuMuEGi-RpQHaJE?w=156&h=211&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2' },
{ id: 7, name: '商品3', price: 75, img: 'https://ts1.tc.mm.bing.net/th/id/OIP-C.RzU5hR-mzlIYuMuEGi-RpQHaJE?w=156&h=211&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2' },
// 后续可以用接口动态加载
]
},
onLoad() {
this.loadProducts();
},
// 加载产品并分列
loadProducts() {
const products = this.data.products;
products.forEach(item => {
wx.getImageInfo({
src: item.img,
success: res => {
const windowWidth = wx.getWindowInfo().windowWidth;
const imgHeight = res.height * (windowWidth * 0.48 / res.width);
if (this.data.col1Height <= this.data.col2Height) {
this.data.col1.push(item);
this.data.col1Height += imgHeight;
} else {
this.data.col2.push(item);
this.data.col2Height += imgHeight;
}
this.setData({
col1: this.data.col1,
col2: this.data.col2
});
}
});
});
}
});WXSS文件
css
.waterfall {
display: flex;
justify-content: space-between;
padding: 10px;
}
.column {
width: 48%;
}
.product {
margin-bottom: 10px;
background: #fff;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.product image {
width: 100%;
display: block;
}
.name {
font-size: 14px;
padding: 5px;
}
.price {
font-size: 16px;
font-weight: bold;
color: red;
padding: 5px;
}如遇到这种问题，
这时候需要在微信平台，进入：开发 → 开发管理 → 开发设置，找到 服务器域名 配置区域：downloadFile合法域名。然后刷新。
效果如图：
设计多层级导航菜单
WXML 文件
html
<view class="menu-container">
<!-- 一级菜单 -->
<block wx:for="{{menuData}}" wx:key="id" wx:for-item="menu">
<view class="menu-parent" bindtap="toggleMenu" data-id="{{menu.id}}" data-level="1" data-item="{{menu}}">
<text>{{menu.name}}</text>
<text class="arrow" wx:if="{{menu.children}}">{{menu.open ? '▲' : '▼'}}</text>
</view>
<!-- 二级菜单 -->
<view class="menu-child" wx:if="{{menu.open}}">
<block wx:for="{{menu.children}}" wx:key="id" wx:for-item="sub1">
<view class="menu-second" bindtap="toggleMenu" data-id="{{sub1.id}}" data-level="2" data-parent="{{menu.id}}" data-item="{{menu}}">
<text>{{sub1.name}}</text>
<text class="arrow" wx:if="{{sub1.children}}">{{sub1.open ? '▲' : '▼'}}</text>
</view>
<!-- 三级菜单 -->
<view class="menu-third" wx:if="{{sub1.open}}">
<block wx:for="{{sub1.children}}" wx:key="id" wx:for-item="sub2">
<view class="menu-leaf">
<text>{{sub2.name}}</text>
</view>
</block>
</view>
</block>
</view>
</block>
</view>JS 文件
cpp
Page({
data: {
menuData: [
{
id: 1,
name: '分类 A',
open: false,
children: [
{
id: 11,
name: '子分类 A1',
open: false,
children: [
{ id: 111, name: '子分类 A1-1' },
{ id: 112, name: '子分类 A1-2' }
]
},
{ id: 12, name: '子分类 A2' }
]
},
{
id: 2,
name: '分类 B',
open: false,
children: [
{ id: 21, name: '子分类 B1' }
]
}
]
},
toggleMenu(e) {
const id = e.currentTarget.dataset.id;
let menuData = [...this.data.menuData];
this.toggleOpenById(menuData, id);
this.setData({ menuData });
},
// 递归查找并切换 open
toggleOpenById(list, id) {
list.forEach(item => {
if (item.id === id) {
item.open = !item.open;
} else if (item.children) {
this.toggleOpenById(item.children, id);
}
});
}
});WXSS 文件
css
.menu-container {
padding: 10px;
background-color: #f8f8f8;
}
.menu-parent, .menu-second {
display: flex;
justify-content: space-between;
align-items: center;
background: #fff;
padding: 10px;
margin-bottom: 2px;
border-radius: 4px;
}
.menu-second {
padding-left: 20px;
background-color: #fafafa;
}
.menu-third {
padding-left: 40px;
background-color: #f0f0f0;
}
.menu-leaf {
padding: 8px 10px;
border-bottom: 1px solid #ddd;
}
.arrow {
color: #666;
}效果：
