商品

mallApp/src/pages/home/category.vue

@@ -1,33 +1,33 @@
 <template>
-  <div class="app-main app-content">
+  <view class="app-main app-content">
     <scroll-view scroll-y scroll-with-animation class="tab-view" :scroll-top="scrollTop">
-      <div v-for="(item,index) in tabbar" :key="index" class="tab-bar-item" :class="[currentTab==index ? 'active' : '']" :data-current="index" @tap.stop="swichNav($event ,item)" >
+      <view v-for="(item,index) in tabbar" :key="index" class="tab-bar-item" :class="[currentTab==index ? 'active' : '']" :data-current="index" @tap.stop="swichNav($event ,item)" >
         <text>{{item.categoryName}}</text>
-      </div>
+      </view>
     </scroll-view>
     <block v-for="(item,index) in tabbar" :key="index" >
       <scroll-view scroll-y class="right-box" @scrolltolower="onReachBottoms" v-if="currentTab==index" >
-        <div class="page-view" v-if="!$util.isEmpty(list.data)" >
-          <div class="goods-list" v-for="(items) in list.data" :key="items.id" @click="pageTo(`/pages/goods/detail?id=${items.id}`)" >
-            <div class="img-blo">
+        <view class="page-view" v-if="!$util.isEmpty(list.data)" >
+          <view class="goods-list" v-for="(items) in list.data" :key="items.id" @click="pageTo(`/pages/goods/detail?id=${items.id}`)" >
+            <view class="img-blo">
               <app-img :src="items.smallImgList[0]" alt="商品图" mode="aspectFit" :height="200" />
-            </div>
-            <div class="goods-det">
-              <div class="goods-det-top">
-                <div class="goods-name">{{ items.name }}</div>
-                <div class="goods-sales">已售{{ items.sold }}</div>
-              </div>
-              <div class="goods-price">￥{{ items.price?parseFloat(items.price):0 }}</div>
-            </div>
-          </div>
-        </div>
+            </view>
+            <view class="goods-det">
+              <view class="goods-det-top">
+                <view class="goods-name">{{ items.name }}</view>
+                <view class="goods-sales"></view>
+              </view>
+              <view class="goods-price">￥{{ items.price?parseFloat(items.price):0 }}</view>
+            </view>
+          </view>
+        </view>
         <block v-else>
           <app-wrapper-empty title="暂无数据" :is-empty="$util.isEmpty(list.data)" />
         </block>
       </scroll-view>
     </block>
     <tab-bar :current="1"></tab-bar>
-  </div>
+  </view>
 </template>
 <script>
 import AppImg from '@/components/app-img'
@@ -140,13 +140,12 @@ page {
 }
 
 .tab-view {
-  /* height: 100%; */
   width: 200upx;
   position: fixed;
   left: 0;
   z-index: 10;
+  height: 100vh;
   background-color: #f0f2f6;
-
   .tab-bar-item {
     width: 200upx;
     height: 110upx;
@@ -158,7 +157,6 @@ page {
     color: #444;
     font-weight: 400;
   }
-
   .active {
     position: relative;
     color: $mainColor;
@@ -176,15 +174,13 @@ page {
 }
 .right-box {
   width: 100%;
-  position: fixed;
   padding-left: 220upx;
   box-sizing: border-box;
-  left: 0;
   .page-view {
     width: 100%;
     overflow: hidden;
     box-sizing: border-box;
-    padding-bottom: env(safe-area-inset-bottom);
+    margin-bottom:60upx;
     .goods-list {
       @include disFlex(flex-start, flex-start);
       margin: 40upx 0;