微信小程序案例实现-本地生活

Mi_2021

已于 2023-10-08 10:43:15 修改

阅读量166

点赞数

分类专栏： # 微信小程序文章标签：微信小程序生活小程序

于 2023-10-08 10:35:13 首次发布

本文链接：https://blog.csdn.net/m0_62786921/article/details/133671975

版权

微信小程序专栏收录该内容

3 篇文章 0 订阅

订阅专栏

文章目录

零、知识储备
一、案例实现
二、效果展示

零、知识储备

在这里插入图片描述

一、案例实现

注意操作前不要把局部的JS文件全删，会出现页面不显示情况

1、页面编写

（一）第一部分编写

准备前把照片拷入本地

在这里插入图片描述

使用swiper/swiper-item组件编写轮播图

在这里插入图片描述

代码如下：

<swiper indicator-dots="true" autoplay="true" interval="3000" circular>
  <swiper-item>
    <image src="/images/swiper01.jpg"/>
  </swiper-item>
  <swiper-item>
    <image src="/images/swiper02.jpg"/>
  </swiper-item>
</swiper>

（二）第二部分编写

编写九宫格页面

在这里插入图片描述

代码如下：

<view class="grids">
  <view class="item">
    <image src="/images/shi.png"/>
    <text>美食</text>
  </view>
  <view class="item">
    <image src="/images/xiu.png"/>
    <text>装修</text>
  </view>
  <view class="item">
    <image src="/images/yu.png"/>
    <text>洗浴</text>
  </view>
  <view class="item">
    <image src="/images/che.png"/>
    <text>汽车</text>
  </view>
  <view class="item">
    <image src="/images/chang.png"/>
    <text>唱歌</text>
  </view>
  <view class="item">
    <image src="/images/fang.png"/>
    <text>住宿</text>
  </view>
  <view class="item">
    <image src="/images/xue.png"/>
    <text>学习</text>
  </view>
  <view class="item">
    <image src="/images/gong.png"/>
    <text>工作</text>
  </view>
  <view class="item">
    <image src="/images/hun.png"/>
    <text>结婚</text>
  </view>
</view>

2、页面样式编写

（一）轮播图样式

在这里插入图片描述

代码如下

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

（二）九宫格样式

在这里插入图片描述

/* 九宫格样式编写 */
.grids{
  display: flex;
  flex-wrap: wrap;
}
.grids .item{
  width: 250rpx;
  height: 250rpx;
  border-right: 1rpx solid #eee;
  border-bottom:1rpx solid #eee ;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.grids .item:nth-child(3){
  border-right: 0;
}
.grids .item:nth-child(6){
  border-right: 0;
}
.grids .item:nth-child(9){
  border-right: 0;
}
/* 九宫格图标编写 */
.grids .item image{
  width: 70rpx;
  height: 70rpx;
}
/* 九宫格文字编写 */
.grids .item text{
  font-size: 28rpx;
  margin-top: 20rpx;
}