支付宝小程序

public/appmini/old/alipay/pages/goods-category/goods-category.acss

@@ -1,9 +1,45 @@
-.content {
-    border-left: 1px solid #eee;
-    box-sizing: border-box;
-    overflow: hidden;
-    padding-bottom: 120rpx;
-    min-height: 100vh;
+/**
+  左侧导航
+*/
+.left-nav {
+  height: 100vh;
+  background: #ececec;
+  width: 230rpx;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+.left-nav .items {
+  height: 120rpx;
+  line-height: 120rpx;
+  font-size: 34rpx;
+  padding: 0 10rpx;
+  text-align: center;
+  color: #666;
+  border-left: 3px solid #ececec;
+  border-right: 3px solid #ececec;
+}
+.left-nav .items:not(:last-child) {
+  border-bottom: 1px solid #e6e6e6;
+}
+.nav-active {
+  border-left: 3px solid #e23f36 !important;
+  border-right: 3px solid #fff !important;
+  color: #e23f36;
+  background: #fff;
+}
+
+
+/**
+  右侧内容
+*/
+.right-content {
+  height: 100vh;
+  width: calc( 100% - 230rpx );
+  overflow-x: hidden;
+  overflow-y: auto;
+  position: absolute;
+  top: 0;
+  right: 0;
 }
 .content-items {
     float: left;

public/appmini/old/alipay/pages/goods-category/goods-category.axml

@@ -1,25 +1,20 @@
-<vtabs
-  a:if="{{data_list.length > 0}}"
-  tabs="{{data_list}}"
-  onTabClick="handle_event"
-  onChange="change_event"
-  activeTab="{{tab_active}}"
-  tabBarActiveTextColor="{{tab_active_text_color}}"
-  tabBarlineColor="{{tab_active_line_color}}"
->
+<view class='left-nav'>
   <block a:for="{{data_list}}">
-    <vtab-content anchor="{{item.anchor}}">
-      <view class="content">
-        <block a:if="{{item.items.length > 0}}">
-          <view a:for="{{item.items}}" a:for-item="v" class="content-items" data-value="{{v.id}}" onTap="category_event">
-            <image a:if="{{(v.icon || null) != null}}" src="{{v.icon}}" mode="aspectFit" class="icon" />
-            <view class="text single-text">{{v.name}}</view>
-          </view>
-        </block>
-      </view>
-    </vtab-content>
+    <view class='items {{item.active || ""}}' data-index="{{index}}" onTap='nav_event'>
+      <text>{{item.name}}</text>
+    </view>
   </block>
-</vtabs>
+</view>
+<view class='right-content bg-white'>
+  <block a:if="{{data_content.length > 0}}">
+    <block a:for="{{data_content}}" a:for-item="v">
+      <view class="content-items" data-value="{{v.id}}" onTap="category_event">
+        <image a:if="{{(v.icon || null) != null}}" src="{{v.icon}}" mode="aspectFit" class="icon" />
+        <view class="text single-text">{{v.name}}</view>
+      </view>
+    </block>
+  </block>
+</view>
 
 <view a:if="{{data_list.length == 0 && data_list_loding_status != 0}}">
   <import src="/pages/common/nodata.axml" />

public/appmini/old/alipay/pages/goods-category/goods-category.js

@@ -32,15 +32,15 @@ Page({
         my.stopPullDownRefresh();
         if (res.data.code == 0) {
             var data = res.data.data;
-            
-            // tabs
-            for(var i in data) {
-              data[i]['title'] = data[i]['name'];
-              data[i]['anchor'] = data[i]['id'];
+            var data_content = [];
+            if (data.length > 0)
+            {
+              data[0]['active'] = 'nav-active';
+              data_content = data[0]['items'];
             }
-
             this.setData({
               data_list: data,
+              data_content: data_content,
               data_list_loding_status: data.length == 0 ? 0 : 3,
               data_bottom_line_status: true,
             });
@@ -76,17 +76,17 @@ Page({
     this.init();
   },
 
-  // 处理事件
-  handle_event(index) {
+  // 导航事件
+  nav_event(e) {
+    var index = e.currentTarget.dataset.index;
+    var temp_data = this.data.data_list;
+    for(var i in temp_data)
+    {
+      temp_data[i]['active'] = (index == i) ? 'nav-active' : '';
+    }
     this.setData({
-      tab_active: index,
-    });
-  },
-
-  // tab改变
-  change_event(index) {
-    this.setData({
-      tab_active: index,
+      data_list: temp_data,
+      data_content: temp_data[index]['items'],
     });
   },
 

public/appmini/old/alipay/pages/login/login.acss

@@ -56,4 +56,7 @@ page{
 }
 .user-login button {
   margin-top: 30rpx;
+  padding: 0 30rpx;
+  height: 65rpx;
+  line-height: 65rpx;
 }