微信小程序打造本地宝（1）—— 主页面

文章目录

微信小程序基础：思维导图

实现：

效果图

我们将模块分解，实际要实现轮播图、首页导航分区、模块间的小白条、首页入口分区，与底部tab导航栏

1. 添加轮播图

用列表渲染 wx:for 更高效，

<!-- 首页轮播图分区 -->
<view class='slider'>
    <swiper indicator-dots="true" autoplay="{{ true }}" interval="2500" duration="400" circular>
        <swiper-item wx:for="{{ sliderList }}" wx:key="id" >
            <image src="{{ item.image }}" width="375" height="150"  mode="aspectFill" lazy-load />
        </swiper-item>
    </swiper>
</view>

2. 首页导航分区

<!-- 首页导航分区 -->
<view class='index-nav bgw'>
    <navigator wx:for="{{ navList }}" wx:key="id" class='nav-item bdr' url='/pages/shopList/shopList?cat={{ item.id }}&title={{ item.name }}'>
        <image src='{{ item.icon }}' lazy-load></image>
        <text>{{ item.name }}</text>
    </navigator>
</view>

3. 模块间小白条

以为此模块用到的地方比较多，所以我们可以封装到app.wxss里作为共有样式使用

wxml里

<view class='divider'></view>

wxss里

/* 功能封装2：专门用于做间隔的类，设定高度，填充底色 */
.divider {
    height: 20rpx;
    background-color: #f1f1f1;
    box-shadow: 0 5rpx 5rpx rgba(0, 0, 0, 0.1) inset;
}

4. 首页入口分区

<!-- 首页入口分区 -->
<view class='index-enter bgw'>
    <navigator class='enter-item'>
        <image src='/assets/images/link-01.png'></image>
    </navigator>
    <navigator class='enter-item'>
        <image src='/assets/images/link-02.png'></image>
    </navigator>
</view>

5. tabBar

这个要到 app.json 里去改代码

在{ }里添加 “tabBar”及其属性

"tabBar": {
    "color": "#999",
    "selectedColor": "#333",
    "borderStyle": "black",
    "position": "bottom",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "assets/tabs/home.png",
        "selectedIconPath": "assets/tabs/home-active.png"
      },
      {
        "pagePath": "pages/message/message",
        "text": "消息",
        "iconPath": "assets/tabs/message.png",
        "selectedIconPath": "assets/tabs/message-active.png"
      },
      {
        "pagePath": "pages/profile/profile",
        "text": "个人中心",
        "iconPath": "assets/tabs/profile.png",
        "selectedIconPath": "assets/tabs/profile-active.png"
      },
      {
        "pagePath": "pages/contact/contact",
        "text": "大杂烩",
        "iconPath": "assets/tabs/contact.png",
        "selectedIconPath": "assets/tabs/contact-active.png"
      }
    ]
  },

源代码

index.js

上面的导航栏均是用的小程序接口接收的后台json数据，再用列表渲染 wx:for 循环输出的

index.wxss

/* ！！小程序的图片记得设置宽高 */

.slider, 
.slider image ,
.slider swiper{
    width: 100%;
    height: 390rpx;
}

.index-nav {
    /* 1.5. 给当前父元素设置成伸缩盒模式 */
    display: flex;
    /* 1.6. 设置子元素换行能排列 */
    flex-wrap: wrap;
}

.index-nav .nav-item {
    width: 33.33333%;
    height: 200rpx;
    /* 1.1. 给当前父元素设置成伸缩盒模式 */
    display: flex;
    /* 1.2. 设置垂直排列 */
    flex-direction: column;
    /* 1.3.设置主轴居中 */
    justify-content: center;
    /* 1.4.设置交叉轴居中 */
    align-items: center;
    /* 1.7微信小程序的字号大小官方推荐使用 px */
    font-size: 14px;
    /* 2.0.底部边框，直接通过border-bottom */
    border-bottom: 1rpx solid #ddd;
}



.index-nav .nav-item:nth-child(3n)::after {
    /* 2.4每隔第三个元素去除边框 */
    width: 0;
}

/* ！！小程序的图片记得设置宽高 */

.index-nav image {
    width: 80rpx;
    height: 80rpx;
    margin-bottom: 10rpx;
}

/* -------------
 * 模块3：首页入口分区 
 * -------------
*/

.index-enter {
    display: flex;
    padding: 20rpx 25rpx;
}

.index-enter .enter-item {
    width: 50%;
    display: flex;
    justify-content: center;
}

.index-enter image {
    width: 320rpx;
    height: 178rpx;
}

index.wxml

<!-- 首页轮播图分区 -->
<view class='slider'>
    <swiper indicator-dots="true" autoplay="{{ true }}" interval="2500" duration="400" circular>
        <swiper-item wx:for="{{ sliderList }}" wx:key="id" >
            <image src="{{ item.image }}" width="375" height="150"  mode="aspectFill" lazy-load />
        </swiper-item>
    </swiper>
</view>
<!-- 首页导航分区 -->
<view class='index-nav bgw'>
    <navigator wx:for="{{ navList }}" wx:key="id" class='nav-item bdr' url='/pages/shopList/shopList?cat={{ item.id }}&title={{ item.name }}'>
        <image src='{{ item.icon }}' lazy-load></image>
        <text>{{ item.name }}</text>
    </navigator>
</view>
<view class='divider'></view>
<!-- 首页入口分区 -->
<view class='index-enter bgw'>
    <navigator class='enter-item'>
        <image src='/assets/images/link-01.png'></image>
    </navigator>
    <navigator class='enter-item'>
        <image src='/assets/images/link-02.png'></image>
    </navigator>
</view>