增加商品购买页导航icon

Author: shen100

main.go

@@ -63,4 +63,4 @@ func main() {
 	})
 
 	app.Listen(":" + strconv.Itoa(config.ServerConfig.Port))
-}
+}

wexin/pages/index/index.wxss

@@ -1,5 +1,5 @@
 page {
-    height:100%;
+    height: 100%;
 }
 
 .home-box {

wexin/pages/product/product.js

@@ -1,6 +1,7 @@
 Page({
     data: {
-        name: 'test'
+        name: 'test',
+        url: "../../images/1.jpg"
     },
     onLoad: function () {
         this.setData({

wexin/pages/product/product.wxml

@@ -1,10 +1,19 @@
 <!--商品详情页-->
 <view class="product-container">
-    <view></view>
-    <ul class="tabbar">
-        <li class="tabbar-item tabbar-home">x</li>
-        <li class="tabbar-item tabbar-cart">y</li>
-        <li class="tabbar-item tabbar-add-cart">加入购物车</li>
-        <li class="tabbar-item tabbar-buy-now">立即购买</li>
-    </ul>
+    <view class="tabbar">
+        <view class="tabbar-item tabbar-home">
+            <view>
+                <image class="home-icon" mode="aspectFit" src="../../icons/home.png"></image>
+            </view>
+            <text class="home-text">首页</text>
+        </view>
+        <view class="tabbar-item tabbar-cart">
+            <view>
+                <image class="cart-icon" mode="aspectFit" src="../../icons/cart.png"></image>
+            </view>
+            <text class="cart-text">购物车</text>
+        </view>
+        <view class="tabbar-item tabbar-add-cart"><text>加入购物车</text></view>
+        <view class="tabbar-item tabbar-buy-now"><text>立即购买</text></view>
+    </view>
 </view>

wexin/pages/product/product.wxss

@@ -1,40 +1,78 @@
+page {
+    width: 100%;
+    height: 100%;
+}
+
 .product-container {
     position: relative;
+    font-size: 0;
+    width: 100%;
+    height: 100%;
 }
 
 .tabbar {
     width: 100%;
     display: flex;
     position: fixed;
-    bottom: 0;
+    bottom: -1rpx;
+    font-size: 0;
 }
 
 .tabbar-item {
-    height: 100rpx;
+    height: 120rpx;
 }
 
 .tabbar-home {
-    width: 200rpx;
+    width: 200px;
+    text-align: center;
+    border-right: 1rpx #e6e6e6 solid;
+}
+
+.home-icon {
+    margin-top: 15rpx;
+    width: 50rpx;
+    height: 50rpx;
+}
+
+.home-text {
+    vertical-align: top;
+    font-size: 24rpx;
+    line-height: 40rpx;
+    color: #444;
 }
 
 .tabbar-cart {
-    width: 200rpx;
+    width: 200px;
+    text-align: center;
+}
+
+.cart-icon {
+    margin-top: 15rpx;
+    width: 50rpx;
+    height: 50rpx;
+}
+
+.cart-text {
+    vertical-align: top;
+    font-size: 24rpx;
+    line-height: 40rpx;
+    color: #444;
 }
 
 .tabbar-add-cart {
     color: #fff;
     background-color: #fd885b;
-    line-height: 100rpx;
+    line-height: 120rpx;
     width: 100%;
     text-align: center;
-    font-size: 36rpx;
+    font-size: 38rpx;
 }
 
 .tabbar-buy-now {
     color: #fff;
     background-color: #fc464a;
-    line-height: 100rpx;
+    line-height: 120rpx;
     width: 100%;
     text-align: center;
-    font-size: 36rpx;
+    font-size: 38rpx;
 }