【微信小程序（黑马程序课程）案例实现——本地生活的首页基本布局】

🕗 发布于 2024-04-13 08:42 微信小程序 小程序

一. 新建一个项目

二. 添加页面和删除页面

（1）添加页面——app.json/pages中添加路径，并删除原有的路径
请添加图片描述
（2）删除页面——路径已经被删除，现在删除文件
在这里插入图片描述

三.设置导航栏效果——app.json/windows中更改
效果图：
请添加图片描述

代码如下：

"window": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "本地生活",
    "navigationBarBackgroundColor": "#70f3ff"
  },

四.设置tabBar效果——在app.json中创建tabBar（与windows同级）
效果图：
请添加图片描述
代码如下：——创建tabBar与windows同级
注：我没有使用黑马老师的图标，我用的自己的——写完文章后我会上传到资源，需要的自取。
在这里插入图片描述

 "tabBar": {
    "list": [{
      "pagePath": "pages/home/home",
      "text": "首页",
      "iconPath": "/images/tabBar_png/home.png",
      "selectedIconPath": "/images/tabBar_png/home-active.png"
    },{
      "pagePath": "pages/message/message",
      "text": "消息",
      "iconPath": "/images/tabBar_png/messages.png",
      "selectedIconPath": "/images/tabBar_png/messages-active.png"
    },{
      "pagePath": "pages/contact/contact",
      "text": "联系我们",
      "iconPath": "/images/tabBar_png/contact.png",
      "selectedIconPath": "/images/tabBar_png/contact-active.png"
    }
  ]
  },

五.实现轮播图效果——**注：**我使用的是自己本地的图片，所以没有发请求
而是将图片放入images文件中
请添加图片描述

代码：
在home.wxml中编写

<!-- 轮播图区域 -->
<swiper indicator-dots circular>
<swiper-item wx:for="{{swiperList}}">
  <image src="{{item}}"></image>
</swiper-item>
</swiper>

在home.js中编写

data:{ 
swiperList:[
      '/images/swiper_png/swiper_1.jpg',
      '/images/swiper_png/swiper_2.jpg',
      '/images/swiper_png/swiper_3.jpg'
  ]
  }

在home.wxss中编写

/* 轮播图样式设计 */
swiper{
  height: 350rpx;

}
swiper image{
  width: 100%;
  height: 100%;
}

效果如图：
在这里插入图片描述
六. 九宫格编写——注：依旧用的本地的图片没有发起网络申请——想去发起请求的去看原视频即可——（Day2的案例——本地生活）— 课程连接: link
请添加图片描述

在home.wxml中编写

<!-- 九宫格区域 -->
<view class="grid-list">
  <view class="gird-item" wx:for="{{gridlist}}">
    <image src="{{item.icon}}"></image>
    <text>{{item.name}}</text>
  </view>
</view>

在home.js中编写

data:{
gridlist:[
    {'name':'洗车','icon':'/images/jiugongge_png/car_service.png'},
    {'name':'便利店','icon':'/images/jiugongge_png/conv_store.png'},
    {'name':'美食','icon':'/images/jiugongge_png/food.png'},
    {'name':'美甲','icon':'/images/jiugongge_png/mannicure.png'},
    {'name':'辅导班','icon':'/images/jiugongge_png/auxi_class.png'},
    {'name':'超市','icon':'/images/jiugongge_png/shopping.png'},
    {'name':'买菜','icon':'/images/jiugongge_png/vegetable.png'},
    {'name':'装修','icon':'/images/jiugongge_png/renovation.png'},
    {'name':'二手市场','icon':'/images/jiugongge_png/s_h_market.png'}
  ]

  },

在home.wxss中编写

.grid-list{
  /* 布局flex */
display: flex;
/* 允许换行 */
flex-wrap:wrap;
/* 添加左侧和上册边框 */
border-left: 1rpx solid #edefef;
border-top: 1rpx solid #edefef;
}
.gird-item{
  width: 33.33%;
  height: 200rpx;
  display: flex;
  /* 纵向布局 */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* 添加右侧和下册边框 */
  border-right: 1rpx solid #edefef;
  border-bottom: 1rpx solid #edefef;
  /* 改变box方式 */
  box-sizing: border-box;
}
.gird-item image{
  width: 60rpx;
  height: 60rpx;
}
.gird-item text{
  font-size: 24rpx;
  /* 文本和图片有距离 */
  margin-top: 10rpx;
}

效果图如下：
在这里插入图片描述

七.图片排布——图片位置如下：
请添加图片描述

在home.wxml中编写：

<!-- 任务区和售卖区 -->
<view class="img-box">
<image src="/images/task_2/send_tasks.png" mode="widthFix"></image>
<image src="/images/task_2/senc_sales.png" mode="widthFix"></image>
</view>

不用在home.js中编写

在home.wxss中编写：

.img-box{
  /* 先横过来 */
  display:flex;
  padding: 20rpx 10rpx;
  justify-content: space-around;
}
.img-box image{
  width: 45%;
}

效果图如下：
在这里插入图片描述

——————本地生活案列完成！！！

全部代码如下：

app.json代码：

{
  "pages": [
    "pages/home/home",
    "pages/message/message",
    "pages/contact/contact"
  ],
  "window": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "本地生活",
    "navigationBarBackgroundColor": "#70f3ff"
  },
  "tabBar": {
    "list": [{
      "pagePath": "pages/home/home",
      "text": "首页",
      "iconPath": "/images/tabBar_png/home.png",
      "selectedIconPath": "/images/tabBar_png/home-active.png"
    },{
      "pagePath": "pages/message/message",
      "text": "消息",
      "iconPath": "/images/tabBar_png/messages.png",
      "selectedIconPath": "/images/tabBar_png/messages-active.png"
    },{
      "pagePath": "pages/contact/contact",
      "text": "联系我们",
      "iconPath": "/images/tabBar_png/contact.png",
      "selectedIconPath": "/images/tabBar_png/contact-active.png"
    }
  ]
  },
  "style": "v2",
  "componentFramework": "glass-easel",
  "sitemapLocation": "sitemap.json",
  "lazyCodeLoading": "requiredComponents"
}

home.wxml代码：

<!--pages/home/home.wxml-->

<!-- 轮播图区域 -->
<swiper indicator-dots circular>
<swiper-item wx:for="{{swiperList}}">
  <image src="{{item}}"></image>
</swiper-item>
</swiper>

<!-- 九宫格区域 -->
<view class="grid-list">
  <view class="gird-item" wx:for="{{gridlist}}">
    <image src="{{item.icon}}"></image>
    <text>{{item.name}}</text>
  </view>
</view>

<!-- 任务区和售卖区 -->
<view class="img-box">
<image src="/images/task_2/send_tasks.png" mode="widthFix"></image>
<image src="/images/task_2/senc_sales.png" mode="widthFix"></image>
</view>

home.js代码：

// pages/home/home.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    //存放轮播图数据
    swiperList:[
      '/images/swiper_png/swiper_1.jpg',
      '/images/swiper_png/swiper_2.jpg',
      '/images/swiper_png/swiper_3.jpg'
  ],
   gridlist:[
    {'name':'洗车','icon':'/images/jiugongge_png/car_service.png'},
    {'name':'便利店','icon':'/images/jiugongge_png/conv_store.png'},
    {'name':'美食','icon':'/images/jiugongge_png/food.png'},
    {'name':'美甲','icon':'/images/jiugongge_png/mannicure.png'},
    {'name':'辅导班','icon':'/images/jiugongge_png/auxi_class.png'},
    {'name':'超市','icon':'/images/jiugongge_png/shopping.png'},
    {'name':'买菜','icon':'/images/jiugongge_png/vegetable.png'},
    {'name':'装修','icon':'/images/jiugongge_png/renovation.png'},
    {'name':'二手市场','icon':'/images/jiugongge_png/s_h_market.png'}
  ]

  },
  //获取轮播图数据函数——未编写，而使用本地图片
  


  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
   
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

home.wxss代码：

/* pages/home/home.wxss */
/* 轮播图样式设计 */
swiper{
  height: 350rpx;

}
swiper image{
  width: 100%;
  height: 100%;
}

.grid-list{
  /* 布局flex */
display: flex;
/* 允许换行 */
flex-wrap:wrap;
/* 添加左侧和上册边框 */
border-left: 1rpx solid #edefef;
border-top: 1rpx solid #edefef;
}
.gird-item{
  width: 33.33%;
  height: 200rpx;
  display: flex;
  /* 纵向布局 */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* 添加右侧和下册边框 */
  border-right: 1rpx solid #edefef;
  border-bottom: 1rpx solid #edefef;
  /* 改变box方式 */
  box-sizing: border-box;
}
.gird-item image{
  width: 60rpx;
  height: 60rpx;
}
.gird-item text{
  font-size: 24rpx;
  /* 文本和图片有距离 */
  margin-top: 10rpx;
}


.img-box{
  /* 先横过来 */
  display:flex;
  padding: 20rpx 10rpx;
  justify-content: space-around;
}
.img-box image{
  width: 45%;
}

**注：**如果图片资料到我的资源里免费下载就行！！！——其实自己找点自己喜欢的图标也挺好的

原文地址：https://blog.csdn.net/weixin_45753504/article/details/137603618

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

前端vue-子组件对于父组件的传值的约束
如果子组件对于父组件传来的值进行校验，那么我们把子组件中的props中的数据写成{}的形式，在里面进行数据的约束 required：是必须要传值，不传值就会报错。default：是默认值，如果父组件
阅读更多2024-09-21
使用madExcept检测内存泄漏
代码异常堆栈跟踪：Mad Except。
阅读更多2024-09-21
C++学习笔记（29）
3</bh><name>西施</name><sex>女</sex><age>18</age><yz>漂亮
阅读更多2024-09-21
基于Python与K-Means的自动化视频分类方法
1. extract_video_features：从每个视频中提取帧，使用 InceptionV3 模型提取每个帧的特征，并最终取所有帧特征的平均值作为该视频的代表特征。K-Means 是一种常用的
阅读更多2024-09-21
mysql等保数据库命令
询问备份情况，查看数据库中的数据是否采取加密和完整性校验，询问加密方式。
阅读更多2024-09-21
数据结构之顺序表
本文概述了什么是线性表，并实现了线性表之一的顺序表。
阅读更多2024-09-21
【2020工业图像异常检测文献】SPADE
Sub-Image Anomaly Detection with Deep Pyramid Correspondences
阅读更多2024-09-21
如何打造高效的远程开发团队：最佳实践与挑战
远程开发团队为IT行业带来了新的机遇，但也面临着独特的挑战。通过建立有效的沟通机制、使用合适的项目管理工具、加强团队文化建设，以及提升团队成员的自我管理能力，企业可以充分发挥远程团队的优势，实现高效的
阅读更多2024-09-21
软件设计师——操作系统
其中iaddr[0]~iaddr[4]采用直接地址索引，iaddr[5]和iaddr[6]采用一级间接地址索引，iaddr[7]采用二级间接地址索引。在这个前驱图中，容易位置开始结果都是一样的，假设从
阅读更多2024-09-21
lte sss加扰序列c产生 MATLAB和c语言实现
今日给大家介绍一下LTE SSS信号产生过程中加扰序列c的产生过程以及用MATLAB 和 c语言给大家实现一下,欢迎感兴趣的同学交流
阅读更多2024-09-21

【微信小程序（黑马程序课程）案例实现——本地生活的首页基本布局】

——————本地生活案列完成！！！

全部代码如下：

相关文章