小程序框架-列表布局小程序

最新推荐文章于 2025-03-20 10:42:24 发布

顺其自然lll

最新推荐文章于 2025-03-20 10:42:24 发布

阅读量1.2k

点赞数 1

分类专栏：微信小程序开发文章标签：小程序 css css3

本文链接：https://blog.youkuaiyun.com/m0_46965984/article/details/123468782

版权

本文介绍了如何在小程序中构建列表布局。通过删除不必要的样式和逻辑代码，然后使用wx:for属性结合动态数组来渲染列表项，实现了列表的动态展示。在逻辑实现部分，文章详细解释了如何使用双重循环来显示多个列表组和其内部的列表项，同时指定了图标和文本的自定义命名。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

列表布局小程序

页面容器：<view class='container'></view>

删除app.wxss全部代码

删除utils文件夹及其内部所有内容

删除pages文件夹下的logs目录及其内部全部代码

<!--index.wxml-->
<view class='container'>
<view class='listGroup'> /*列表组*/
<view class='listItem'>  /*列表项单行*/
<image src='/images/moments.png'></image>
<text>朋友圈</text>
<image src='/images/arrow.png'></image>
</view>
</view>
</view>

// index.js
// 获取应用实例
const app = getApp()

Page({
  data: {
    list:[
      //第1组
      [
        {
          text:'朋友圈',
          icon:'/images/moments.png'
        }
      ],
      //第2组
      [
        {
          text:'扫一扫',

最低0.47元/天解锁文章