微信小程序学习（三）补充

尘似鹤2025-10-02 21:23

尝试实现九宫格布局

实现目标：

  • 实现一个等宽等高的九宫格布局。
  • 每行有三个元素，共三行。
  • 子元素内容可以是按钮、图片或文本。

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;
}

效果：

相关推荐
hello kitty w16 分钟前
Python学习(11) ----- Python的泛型
windows·python·学习
讽刺人生Yan24 分钟前
RFSOC学习记录（五）带通采样定理
学习·fpga·rfsoc
stark张宇32 分钟前
超越 Hello World：深入小程序 Hybrid 初衷、安全配置与上线全链路
nginx·微信小程序·php
报错小能手1 小时前
linux学习笔记（49）Redis详解（1）
linux·笔记·学习
QT 小鲜肉1 小时前
【个人成长笔记】在本地Windows系统中如何正确使用adb pull命令，把Linux系统中的文件或文件夹复制到本地中（亲测有效）
linux·windows·笔记·学习·adb
菜鸟una3 小时前
【瀑布流大全】分析原理及实现方式(微信小程序和网页都适用)
前端·css·vue.js·微信小程序·小程序·typescript
_李小白3 小时前
【OPENGL ES 3.0 学习笔记】第九天：缓存、顶点和顶点数组
笔记·学习·elasticsearch
洛白白4 小时前
Word文档中打勾和打叉的三种方法
经验分享·学习·word·生活·学习方法
楼田莉子6 小时前
C++学习：C++11关于类型的处理
开发语言·c++·后端·学习
酷讯网络_2408701606 小时前
PHP双轨直销企业会员管理系统/购物直推系统/支持人脉网络分销系统源码
学习·开源
热门推荐
01GitHub 镜像站点02BongoCat - 跨平台键盘猫动画工具03UV安装并设置国内源04GitLab 零基础入门指南：从安装到项目管理全流程05Linux下V2Ray安装配置指南06NVIDIA显卡驱动、CUDA、cuDNN 和 TensorRT 版本匹配指南07在VSCode配置Java开发环境的保姆级教程（适配各类AI编程IDE）08Labelme从安装到标注：零基础完整指南092025软件测试面试八股文（含答案+文档）10一文了解国产算子编程语言 TileLang，TileLang 对国产开源生态的影响与启示