列表布局小程序

 

页面容器：<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:'扫一扫',
          icon:'/images/scan.png'
        },
        {
          text:'摇一摇',
          icon:'/images/shake.png'
        }
      ],
      //第3组
      [
        {
          text:'看一看',
          icon:'/images/topStories.png'
        },
        {
          text:'搜一搜',
          icon:'/images/search.png'
        }
      ],
      //第4组
      [
        {
          text:'购物',
          icon:'/images/shopping.png'
        },
        {
          text:'游戏',
          icon:'/images/games.png'
        }
      ],
      [
        {
          text:'小程序',
          icon:'/images/miniProgram.png'
        }
      ]

    ]
  },
  // 事件处理函数
  bindViewTap() {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  onLoad() {
    if (wx.getUserProfile) {
      this.setData({
        canIUseGetUserProfile: true
      })
    }
  },
  getUserProfile(e) {
    // 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认，开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
    wx.getUserProfile({
      desc: '展示用户信息', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
      success: (res) => {
        console.log(res)
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })
      }
    })
  },
  getUserInfo(e) {
    // 不推荐使用getUserInfo获取用户信息，预计自2021年4月13日起，getUserInfo将不再弹出弹窗，并直接返回匿名的用户个人信息
    console.log(e)
    this.setData({
      userInfo: e.detail.userInfo,
      hasUserInfo: true
    })
  }
})

/**index.wxss**/
/*背景容器样式*/
.container{
height: 100vh; /*高度为100视窗*/
background-color: silver;
display: flex; /*flex布局模式*/
flex-direction: column; /*垂直布局*/
}

/*列表组样式*/
.listGroup{
  background-color: white;
  margin: 20rpx 0; /*上下边距20rpx 左右 0 */
}

/*列表组单行样式*/
.listItem{
display: flex;
flex-direction: row; /*水平布局*/
align-items: center; /*垂直方向居中*/
border: 1rpx solid silver; /*1rpx宽的银色实线边框*/
padding: 10rpx;
}

/*图标尺寸*/
image{
  width:80rpx;
  height: 80rpx;
  margin: 0 15rpx; /*上下边距0 左右外边距15rpx*/
}
/*文本样式*/
text{
  font-size: 40rpx;
  flex-grow:1; /*扩张多余空间宽度*/
}

逻辑实现

使用动态数据展示列表

由于所有列表项的内容布局都是统一的，可以使用wx:for属性配合动态数组渲染全部列表项

<!--index.wxml-->
<view class='container' >
<view class='listGroup' wx:for="{{list}}" wx:key="group{{index}}" wx:for-item="group">
<view class='listItem' wx:for="{{group}}" wx:key="row{{index}}" wx:for-item="row">
<image src="{{row.icon}}"></image>
<text>{{row.text}}</text>
<image src='/images/arrow.png'></image>
</view>
</view>
</view>

将使用双重wx:for属性循环显示全部列表项，其中{{list}}数组用于表示5个列表组，并为每个列表组起了别名group,每个列表项也起了别名row,列表项的图标和文本分别命名为icon,text.均为自定义命名

// index.js

Page({
  data: {
    list:[
      //第1组
      [
        {
          text:'朋友圈',
          icon:'/images/moments.png'
        }
      ],
      //第2组
      [
        {
          text:'扫一扫',
          icon:'/images/scan.png'
        },
        {
          text:'摇一摇',
          icon:'/images/shake.png'
        }
      ],
      //第3组
      [
        {
          text:'看一看',
          icon:'/images/topStories.png'
        },
        {
          text:'搜一搜',
          icon:'/images/search.png'
        }
      ],
      //第4组
      [
        {
          text:'购物',
          icon:'/images/shopping.png'
        },
        {
          text:'游戏',
          icon:'/images/games.png'
        }
      ],
      [
        {
          text:'小程序',
          icon:'/images/miniProgram.png'
        }
      ]

    ]
  },

app.json代码

{
  "pages":[
    "pages/index/index"
  ]
}

 pages/index/index.json 

{
 "navigationBarTitleText":"发现"
}