微信小程序--10（首页制作）

阿巴阿巴啊啊啊

于 2024-07-21 20:02:01 发布

阅读量130

点赞数 5

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

本文链接：https://blog.csdn.net/qq_57464528/article/details/140578099

版权

小程序学习专栏收录该内容

31 篇文章 1 订阅

订阅专栏

一、新建项目并梳理项目结构

二、配置导航栏

三、配置tarBar

准备素材

四、实现轮播图

在home.js文件中

在home.wxml中

在home.wxss中

效果图：

五、实现九宫格

/* pages/home/home.wxss */
swiper{
  height: 350rpx;
}
swiper image{
  width:100%;
  height:100%;
}
.grid-list{
  display: flex;
  flex-wrap: wrap; /* 自动换行 */
  border-left: 1rpx solid #efefef;
  border-top: 1rpx solid #efefef;
}
.grid-item{
  /* 固定每一个item宽高 */
  width:33.33%;
  height:200rpx;
  /* 实现文字图片纵向布局 */
  display: flex;
  flex-direction: column;
  /* 设置文字图片居中 */
  align-items: center;
  justify-content: center;
  /* 加边框 */
  border-right: 1rpx solid #efefef;
  border-bottom: 1rpx solid #efefef;
  /* 设置为 border-box 时，元素的宽度和高度包括了边框和内边距，而不受到内容区域大小的影响。 */
  box-sizing: border-box;
}
/* 设置图片宽度 */
.grid-item image{
  width:60rpx;
  height:60rpx;
}
/* 设置文本大小 */
.grid-item text{
  font-size: 24rpx;
  margin-top:10rpx ;
}