微信小程序开发-003-首页(轮播图,状态栏,导航栏)

哈喽小伙伴们大家好,我是程序媛小李,今天,我们继续来开发微信小程序.

在这里,先贴上首页的效果图:

整个页面大概可以分为顶部的状态栏区域,轮播图区域,公司信息区域,商品导航区域,商品推荐区域,以及最下面的导航栏区域.

一,底部导航栏

在这里,我们遵循从外到内的原则,我们先来做最底部的导航区域

先来给大家看下整个小程序的项目目录:

每个文件及其作用在这里就不解释了

因为底部的导航栏这块肯定是全局配置,因此,我们打开app.js,在其中编写就可以

首先,创建几个页面:

"pages/category/category",
    "pages/cart/cart",
    "pages/home/home",
    "pages/list/list"

创建好之后,于pages同级新增一个tabbar属性

它是一个对象,包一个List数组,数组中同样也是对象,每个对象有四个属性,分别是内容,路径,图标以及激活的图标,

  "tabBar": {
    
  "list" :
  [
    {
      "text" : "首页",
      "pagePath" : "pages/index/index",
      "iconPath": "/assets/index.png",
      "selectedIconPath": "/assets/indexSelected.png"
    },
    {
      "text":"分类",
      "pagePath": "pages/category/category",
      "iconPath": "/assets/category.png",
      "selectedIconPath": "/assets/categorySelected.png"
    },
    {
      "text":"购物车",
      "pagePath": "pages/cart/cart",
      "iconPath": "/assets/cart.png",
      "selectedIconPath": "/assets/cartSelected.png"
    },
    {
      "text":"我的",
      "pagePath": "pages/home/home",
      "iconPath": "/assets/home.png",
      "selectedIconPath": "/assets/homeSelected.png"
    }
  ]
  },

配置好之后打开预览工具即可查看效果

二,顶部状态栏

然后来看顶部的状态栏

这里因为每个页面对应的内容都不一样,所以我们直接在页面对应的文件中进行设置

找到每个页面对应的wxml文件

添加以下代码

<navigation-bar title="购物车" back="{{true}}" color="black" background="#f3514f"></navigation-bar>

三,轮播图区域

使用swiper组件,

  <view class="swiper">
  <swiper 
  autoplay
  circular
   interval="2000" 
   indicator-dots 
   indicator-color="#fff"
   indicator-active-color="#f3514f"
   >
      <swiper-item>
      <image src="/assets/banner1.jpg"></image>
      </swiper-item>
      <swiper-item>
        <image src="/assets/banner2.jpg"></image>
      </swiper-item>
      <swiper-item>
        <image src="/assets/banner3.jpg"></image>
      </swiper-item>
  </swiper>
   </view>

样式控制:

.swiper {

    height:360rpx;

    background-color:skyblue;

    border-radius: 20rpx;

}

四,公司信息区域:

这里就是几个简单的text  

<view class="message">

      <text>同城配送</text>

    <text>行业龙头</text>

    <text>快速便捷</text>

    <text>好评率高</text>

   </view>

五,商品导航区域

<view class="good-nav">
  <view >
        <navigator url="/pages/list/list">
          <image src="/assets/good-nav.png"></image>
          <text>辅导员说</text>
        </navigator>
  </view>
  <view >
        <navigator url="/pages/list/list">
          <image src="/assets/good-nav.png"></image>
          <text>辅导员说</text>
        </navigator>
  </view>
  <view >
        <navigator url="/pages/list/list">
          <image src="/assets/good-nav.png"></image>
          <text>辅导员说</text>
        </navigator>
  </view>
  <view >
        <navigator url="/pages/list/list">
          <image src="/assets/good-nav.png"></image>
          <text>辅导员说</text>
        </navigator>
  </view>
  <view >
        <navigator url="/pages/list/list">
          <image src="/assets/good-nav.png"></image>
          <text>辅导员说</text>
        </navigator>
  </view>
</view>

样式控制

.good-nav {
  display: flex;
  justify-content: space-between;
  view {
    navigator {
      display: flex;
      flex-direction: column;
      align-items: center;
      background-color:beige;
      border-radius: 10rpx;
     margin-right: 20rpx;
    }
   padding-top: 40rpx;
   width:200rpx;
   height:200rpx;

   border-radius: 10rpx;
    image {
      width:80rpx;
      height:80rpx;
    }
    text {
      font-size: 15rpx;
      padding-top: 20rpx;
    }
  }
}

六,商品推荐区域

<view class="recommend">
  <scroll-view scroll-x class="scroll-x"  >
      <view>
        <view class="good-item">
          <image src="/assets/flower.png"></image>
          <text>鲜花元素</text>
          <text>66</text>
        </view>
      </view>
      <view>
        <view class="good-item">
          <image src="/assets/flower.png"></image>
          <text>鲜花元素</text>
          <text>66</text>
        </view>
      </view>
      <view>
        <view class="good-item">
          <image src="/assets/flower.png"></image>
          <text>鲜花元素</text>
          <text>66</text>
        </view>
      </view>
      <view>
        <view class="good-item">
          <image src="/assets/flower.png"></image>
          <text>鲜花元素</text>
          <text>66</text>
        </view>
      </view>
      <view>
        <view class="good-item">
          <image src="/assets/flower.png"></image>
          <text>鲜花元素</text>
          <text>66</text>
        </view>
      </view>
  </scroll-view>

样式控制

.recommend {
  border-radius: 10rpx;
  background-color: wheat;
  font-size:24rpx;
  .scroll-x {
    width:100%;
    white-space: nowrap;
    view {
      display: inline-block;
      width:320rpx;
      height:400rpx;
      margin-right: 16rpx;
      .good-item {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        text {
          &:nth-of-type(1) {
            font-weight: bold;
          }
        }
      }
      image {
        width:100%;
        height:320rpx;
      }
    }

  }
 

}

好啦,以上就是首页的全部内容,下期见!