首页样式新版（navs 部分）

pages/index/index.js

@@ -3,7 +3,11 @@ const product = require('../../utils/product.js')
 Page({
   data: {
     items: [],
-    slides: []
+    slides: [],
+    navs: [{icon: "../../images/1.png", name: "资产"},
+           {icon: "../../images/1.png", name: "直销"},
+           {icon: "../../images/1.png", name: "严选"},
+           {icon: "../../images/1.png", name: "包装"}]
   },
 
   bindShowProduct: function (e) {

pages/index/index.wxml

@@ -10,6 +10,15 @@
       </block>
     </swiper>
 
+    <view class="navs">
+      <block wx:for-items="{{navs}}">
+        <view class="nav-item" catchtap="catchTapCategory" data-type="{{item.name}}">
+          <image src="{{item.icon}}" class="nav-image"/>
+          <text>{{item.name}}</text>
+        </view>
+      </block>
+    </view>
+
     <block wx:for="{{items}}" wx:for-item="item">
       <view class="item" bindtap="bindShowProduct" data-id="{{item.id}}">
         <view class="image">

pages/index/index.wxss

@@ -2,6 +2,28 @@
   width: 100%;
 }
 
+.navs {
+  display: flex;
+}
+
+.nav-item {
+  width: 25%;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  padding: 20rpx;
+}
+
+.nav-item .nav-image {
+  width: 100rpx;
+  height: 100rpx;
+  border-radius: 50%;
+}
+
+.nav-item text {
+  padding-top: 20rpx;
+}
+
 .item {
   height: 270rpx;
   padding: 15rpx;