tabbar

1.app.json

{

  "pages":[

    "pages/index/index",

    "pages/logs/logs",

    "pages/search/search",

    "pages/user/user",

    "pages/category/category"

  ],

  "window":{

    "backgroundTextStyle":"light",

    "navigationBarBackgroundColor": "#f00",

    "navigationBarTitleText": "Weixin",

    "navigationBarTextStyle":"black"

  },

  "tabBar": {

    "selectedColor": "#f00",

    "backgroundColor": "#eee",

    "borderStyle": "black",

    "color": "#8a8a8a",

    "list": [

      {

        "pagePath": "pages/index/index",

        "iconPath": "images/home.png",

        "selectedIconPath": "/images/homeRed.png",

        "text": "首页"

      },

      {

        "pagePath": "pages/category/category",

        "iconPath": "images/category.png",

        "selectedIconPath": "/images/categoryRed.png",

        "text": "分类"

      },

      {

        "pagePath": "pages/search/search",

        "iconPath": "images/shopping.png",

        "selectedIconPath": "/images/shoppingRed.png",

        "text": "购物车"

      },

      {

        "pagePath": "pages/user/user",

        "iconPath": "images/my.png",

        "selectedIconPath": "/images/myRed.png",

        "text": "我的"

      }

    ]

  },

  "style": "v2",

  "sitemapLocation": "sitemap.json"

}

2.app.wxss(iconfont的引用)

@import '/styles/iconfont.wxss'

3.icon font链接

iconfont-阿里巴巴矢量图标库

4.vantweapp链接

Cell 单元格 - Vant Weapp (youzan.github.io)

5.index.wxml

<searchInfo class="search"></searchInfo>

<swiper autoplay indicator-dots indicator-color="#fff" indicator-active-color="#ddd" interval="2000" class="swiper">

  <swiper-item wx:for="{{swiper}}">

    <navigator url="/pages/category/category">

      <image class="pic" src="{{item.image_src}}" mode="widthFix"></image>

    </navigator>

  </swiper-item>

</swiper>

<!-- scroll-view -->

<view class="cates">

  <!-- leftMenu -->

  <scroll-view class="leftMenu" scroll-y>

    <view class="leftItem {{sindex==index?'active':''}}" wx:for="{{leftMenu}}" bindtap="handleLeft" data-index="{{index}}">{{item}}</view>

  </scroll-view>

  <!-- rightMenu -->

  <scroll-view class="rightMenu" scroll-y>

    <view wx:for="{{rightMenu}}" wx:for-item="item1" wx:for-index="index1">

      <view class="title">

        / {{item1.cat_name}} /

      </view>

      <van-grid column-num="3" icon-size="50px">

        <van-grid-item wx:for="{{item1.children}}" wx:for-item="item2" wx:for-index="index2" icon="{{item2.cat_icon}}" text="{{item2.cat_name}}" />

      </van-grid>

    </view>

  </scroll-view>

</view>

6.index.js

// index.js

// 获取应用实例

const app = getApp()

Page({

  data: {

    swiper:[],

    sindex:0,

    leftMenu:[],

    rightMenu:[]

  },

  cates:[],

  onLoad() {

    let that = this

    wx.request({

      url: 'https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata',

      success(res){

        // console.log(res)

        that.setData({

          swiper:res.data.message

        })

      }

    }),

    wx.request({

      url: 'https://api-hmugo-web.itheima.net/api/public/v1/categories',

      success(res){

        console.log(res)

        that.cates = res.data.message

        that.setData({

          leftMenu:that.cates.map(v=>v.cat_name),

          rightMenu:that.cates[0].children  

        })

      }

    })

  },

  handleLeft(e){

    console.log(e)

    let index = e.currentTarget.dataset.index

    this.setData({

      sindex:index,

      rightMenu:this.cates[index].children

    })

  }

})

7.index.json

{

  "usingComponents": {

    "searchInfo":"/components/searchInfo/searchInfo",

    "van-grid": "@vant/weapp/grid/index",

    "van-grid-item": "@vant/weapp/grid-item/index"

  }

}

8.index.wxss

.search{

  position: fixed;

  width: 100%;

  left: 0;

  top: 0;

  z-index: 999;

}

.swiper{

  margin-top: 100rpx;

  height: 300rpx;

  /* position: fixed;

  width: 100%;

  left: 0;

  top: 0;

  z-index: 999; */

}

.pic{

  width: 100%;

}

.cates{

  /* margin-top: 415rpx; */

  display: flex;

  height: calc(100vh - 100rpx);

}

.leftMenu{

  flex: 1.6;

}

.leftItem{

  height: 50rpx;

  text-align: center;

  line-height: 60rpx;

  font-size: 30rpx;

}

.active{

  color: red;

  border-left: 5rpx solid red;

}

.rightMenu{

  flex: 5;

}

.title{

  display: flex;

  justify-content: center;

  align-items: center;

  font-size: 30rpx;

}

9.searchInfo.wxml

<view class="search">

  <navigator url="/pages/search/search">

    <!-- <text class="iconfont icon-sousuo"></text> -->

    <icon type="search" size="40rpx"></icon>

    <text>搜索</text>

  </navigator>

</view>

10.searchInfo.wxss

.search{

  background-color: #f00;

  height: 100rpx;

  display: flex;

  justify-content: center;

  align-items: center;

}

.search navigator{

  background-color: #fff;

  border-radius: 13rpx;

  height: 70rpx;

  display: flex;

  justify-content: center;

  align-items: center;

  width: 97%;

}

.search navigator text{

  color: rgb(145, 143, 143);

}