微信小程序首页、界面布局、功能简洁（示例三）

最新推荐文章于 2025-04-12 23:40:47 发布

置顶

三脚猫的喵

最新推荐文章于 2025-04-12 23:40:47 发布

阅读量9.8k

点赞数 33

分类专栏：微信小程序文章标签：微信小程序 javascript 小程序

本文链接：https://blog.csdn.net/weixin_45465881/article/details/135768896

版权

微信小程序首页界面布局、页面简洁，功能简单

首页简洁布局示例
直接上具体代码：
1、js代码

Page({
   
  /**
   * 页面的初始数据
   */
  data: {
   
    imgList: ['../../images/demo.jpg', '../../images/demo.jpg', '../../images/demo.jpg'],
    navList: [{
   
        'src': '../../images/nav1.png',
        'title': '菜单一'
      },
      {
   
        'src': '../../images/nav2.png',
        'title': '菜单二'
      },
      {
   
        'src': '../../images/nav3.png',
        'title': '菜单三'
      },
      {
   
        'src': '../../images/nav4.png',
        'title': '菜单四'
      },
    ],
    dataList: [{
   
        'coverUrl': '../../images/demo.jpg',
        'label': '推荐',
        'title': '纯属示例数据呦~',
        'date': '2023年1月23日',
        'brand': '点赞',
        'price': '2.98'
      },
      {
   
        'coverUrl': '../../images/demo.jpg',
        'label': '经典',
        'title': '点赞收藏加关注，下次还能找到呦~',
        'date': '2023年1月23日',
        'brand': '收藏',
        'price': '1.98'
      },
      {
   
        'coverUrl': '../../images/demo.jpg',
        'label': '模板',
        'title': '不定期发布各种示例模板，进我主页，查看更多示例内容呦~',
        'date': '2023年1月23日',
        'brand': '关注',
        'price': '0.98'
      },
    ]
  },
  // 菜单
  navClick(e) {
   
    wx.showToast({
   
      title: '您点击了【' + e.currentTarget.dataset