improvement: 商品列表样式优化

src/app.wpy

+<style>
+  page {
+    font-family: 'PingFangSC-Regular';
+  }
+</style>
 <script>
 import wepy from '@wepy/core';
 import eventHub from './common/eventHub';

src/pages/index.wpy

@@ -72,64 +72,63 @@
   .footer {
     position: absolute;
     z-index: 9;
-    bottom: 50px;
+    bottom: 20rpx;
     width: 100%;
   }
+  .footswiper {
+    height: 360rpx;
+  }
   .list-item{
-    width:100%;
-    height: 120px;
+    width:220rpx;
+    /*height: 330rpx;*/
     background-color:#fff;
-    position: absolute;
-    bottom:5px;
-    box-sizing: border-box;
-    border-radius: 5rpx;
-    transform: scale(0.7,0.7) translateY(28px);
+    border-radius: 10rpx;
+    transform: scale(0.7,0.7) translateY(65rpx);
     transition: all 0.5s;
-    padding:10rpx;
+    padding:10rpx 10rpx 5rpx 10rpx;
+    margin:0 auto;
     margin-top: 2rpx;
+    position: relative;
   }
   .list-item image {
-    width: 95%;
+    width: 210rpx;
     display: block;
-    height: 85px;
+    height: 210rpx;
     margin:0 auto;
+    border-radius: 10rpx;
   }
   .list-item .text {
-    font-size: 10px;
+    font-size: 20rpx;
     text-overflow: ellipsis;
-    white-space: nowrap;
+    display: -webkit-box;
+    -webkit-line-clamp: 2; //行数
+    -webkit-box-orient: vertical;
     overflow: hidden;
+    line-height:24rpx;
+    margin-top:10rpx;
   }
-  .list-item .goods {
-    width: 100%;
-    margin-top: -8px;
-    position: relative;
-  }
-  .goods .price{
-    color:darkorange;
-    font-size: 10px;
+  .list-item .price{
+    color:#FF5D15;
+    font-size:22rpx;
+    margin-top:2rpx;
   }
-  .goods .buy{
-    text-align: right;
-    color: gainsboro;
-    font-size: 8px;
-    position: absolute;
-    right:0;
-    top:8px;
+  .list-item .buy{
+    font-size: 16rpx;
+    color:#AAA;
   }
   .list-item.subright {
-    transform: scale(0.85,0.85) translateY(12px) translateX(15rpx);
+    transform: scale(0.85,0.85) translateY(26rpx) translateX(25rpx);
   }
   .list-item.subleft {
-    transform: scale(0.85,0.85) translateY(12px) translateX(-15rpx);
+    transform: scale(0.85,0.85) translateY(26rpx) translateX(-25rpx);
   }
   .list-item.select{
     transform: scale(1,1);
-    border-radius: 5rpx;
+    bottom: 2rpx;
   }
   .list-item.delete {
     opacity:0;
-    transform:translateY(-100px)
+    transform:translateY(-220rpx)
   }
   .leftcont{
     position: absolute;
@@ -160,16 +159,20 @@
   }
 </style>
 <wxs module="tools">
+  // 无限循环当current为最后一个的时候，select就应该是0 例如长度为10，当current为9时，select就应该是0
+  // if(current+1==index || (current==length-1 && index==0) ) allclass = "select";
+  // 无限循环当current为最后一个/两个的时候的时候，例如长度为10，当current为8/9时，select就应该是1/0
+  //if(current+2 == index|| (current>=length-2 && index==current-length+2))
+  //allclass='subright';
+
   function computClass (current,index,length) {
     var allclass = "";
-    if(current==index)
+    if(current-1 == index||(current == 0&&index==length-1))
       allclass='subleft';
-    // 无限循环当current为最后一个的时候，select就应该是0 例如长度为10，当current为9时，select就应该是0
-    if(current+1==index || (current==length-1 && index==0) ) allclass = "select";
-    // 无限循环当current为最后一个/两个的时候的时候，例如长度为10，当current为8/9时，select就应该是1/0
-    if(current+2 == index|| (current>=length-2 && index==current-length+2))
-     allclass='subright';
-
+    if(current==index)
+      allclass='select';
+    if(current+1==index || (current==length-1 && index==0) )
+      allclass = "subright";
     return allclass;
   };
   module.exports = {
@@ -204,27 +207,29 @@
     </view>
     <view class="footer">
       <swiper
+        class="footswiper"
         display-multiple-items="{{swiperItem}}"
         current="{{current}}"
         bindchange="moveSwiper"
         bindanimationfinish="swipermoveDone"
         circular="{{circular}}"
-        next-margin="90rpx"
+        previous-margin="140rpx"
+        next-margin="120rpx"
         catch:touchmove
       >
+        <!--bindtouchstart="touchStart"-->
+        <!--bindtouchend="touchEnd"-->
         <swiper-item wx:for="{{list}}" wx:key="index">
           <view
             data-itemid="{{index}}"
             bindtap="toViewPage"
-            bindtouchstart="touchStart"
-            bindtouchend="touchEnd"
+            data-item="{{item}}"
             class="list-item {{item.select?'delete':''}} {{tools.computClass(currentIndex,index,list.length)}}"
           >
-            <image src="/static/images/test2.png"></image>
+            <image src="{{item.imgsrc}}"></image>
             <view class="text">{{item.text}}</view>
-            <view class="goods">
-              <text class="price">￥99.9</text><text class="buy">2200人购买</text>
-            </view>
+            <p class="price">{{item.price}}</p>
+            <p class="buy">{{item.people}}人购买</p>
           </view>
         </swiper-item>
       </swiper>
@@ -258,10 +263,10 @@
       adlist:[],
       current:5,
 //      userInfo: {},
-      swiperItem:3,
+      swiperItem:2,
       videoList:[],
       length: 4,
-      circular:false,
+      circular:true,
       topPage:0,
       lastPage:0,
       currentIndex:5,
@@ -291,14 +296,14 @@
 //            {value:2,text:'这是测试的文字-2'},
 //            {value:3,text:'这是测试的文字-3'},
 //            {value:4,text:'这是测试的文字-4'},
-            {value:5,text:'这是测试的文字-5'},
+            {value:-1,text: '白色条纹马克杯，马克吐温同款-1', imgsrc:'/static/images/test1.jpg', price:'￥912.89',people:2200,sku:'100004549235'},
           ];
           let nextlist=[
-            {value:11,text:'这是测试的文字11'},
-            {value:12,text:'这是测试的文字12'},
-            {value:13,text:'这是测试的文字13'},
-            {value:14,text:'这是测试的文字14'},
-            {value:15,text:'这是测试的文字15'},
+            {value:11,text: '白色条纹马克杯，马克吐温同款11', imgsrc:'/static/images/test1.jpg', price:'￥9.89',people:2200,sku:'100004549235'},
+            {value:12,text: '白色条纹马克杯，马克吐温同款12', imgsrc:'/static/images/test2.png', price:'￥19.20',people:'2200',sku:'100004549235'},
+            {value:13,text: '白色条纹马克杯，马克吐温同款13', imgsrc:'/static/images/peo1.jpg', price:'￥39.08',people:2200,sku:'100004549235'},
+            {value:14,text: '白色条纹马克杯，马克吐温同款14', imgsrc:'/static/images/peo2.jpg', price:'￥599.20',people:2200,sku:'100004549235'},
+            {value:15,text: '白色条纹马克杯，马克吐温同款15', imgsrc:'/static/images/peo3.jpg', price:'￥2399.01',people:2200,sku:'100004549235'},
           ];
           let that = this;
           function debounce(func,wait) {
@@ -336,11 +341,25 @@
           }
         }
       },
-      toViewPage() {
+      toViewPage(e) {
+        let item = e.$wx.currentTarget.dataset.item
+//        console.log(sku,12)
         //解决长按触发tap事件的bug
-        wx.navigateTo({
+        wx.navigateToMiniProgram({
+          appId: 'wx91d27dbf599dff74',
+          path: 'pages/item/detail/detail?sku='+item.sku, // 跳转小程序的路径
+//          extraData: { // 需要带的的参数
+//            "__pid":'Pxk15xcmirwbn'
+//          },
+          // 有效值 develop（开发版），trial（体验版），release（正式版）
+          envVersion: 'release',
+          success(res) {
+            console.log('跳转成功');
+          }
+        })
+       /* wx.navigateTo({
           url: '/pages/auth'
-        });
+        });*/
       },
       touchStart (event) {
         touchDotX = event.touches[0].pageX; // 获取触摸时的原点
@@ -449,16 +468,16 @@
         });
       }
       this.list = [
-        {value: 1, text: '这是测试的文字1'},
-        {value: 2, text: '这是测试的文字2'},
-        {value: 3, text: '这是测试的文字3'},
-        {value: 4, text: '这是测试的文字4'},
-        {value: 5, text: '这是测试的文字5'},
-        {value: 6, text: '这是测试的文字6'},
-        {value: 7, text: '这是测试的文字7'},
-        {value: 8, text: '这是测试的文字8'},
-        {value: 9, text: '这是测试的文字9'},
-        {value: 10, text: '这是测试的文字10'}
+        {value: 1, text: '白色条纹马克杯，马克吐温同款1', imgsrc:'/static/images/test1.jpg', price:'￥399.00',people:2200,sku:'100004549235'},
+        {value: 2, text: '白色条纹马克杯，马克吐温同款2', imgsrc:'/static/images/test2.png', price:'￥1399.22',people:2200,sku:'2004203'},
+        {value: 3, text: '白色条纹马克杯，马克吐温同款3', imgsrc:'/static/images/peo1.jpg', price:'￥199.22',people:2200,sku:'17818909707'},
+        {value: 4, text: '白色条纹马克杯，马克吐温同款4', imgsrc:'/static/images/peo2.jpg', price:'￥134.12',people:2200,sku:'100004549235'},
+        {value: 5, text: '白色条纹马克杯，马克吐温同款5', imgsrc:'/static/images/peo3.jpg', price:'￥194.22',people:2200,sku:'100004549235'},
+        {value: 6, text: '白色条纹马克杯，马克吐温同款6', imgsrc:'/static/images/peo1.jpg', price:'￥292.22',people:2200,sku:'100004549235'},
+        {value: 7, text: '白色条纹马克杯，马克吐温同款7', imgsrc:'/static/images/test1.jpg', price:'￥1399.92',people:2200,sku:'100004549235'},
+        {value: 8, text: '白色条纹马克杯，马克吐温同款8', imgsrc:'/static/images/test2.png', price:'￥1399.98',people:2200,sku:'100004549235'},
+        {value: 9, text: '白色条纹马克杯，马克吐温同款9', imgsrc:'/static/images/peo3.jpg', price:'￥1399.78',people:2200,sku:'100004549235'},
+        {value: 10, text: '白色条纹马克杯，马克吐温同款10', imgsrc:'/static/images/peo2.jpg', price:'￥1399.67',people:2200,sku:'100004549235'}
       ];
       this.adlist = [
         {imgsrc: '/static/images/test1.jpg', text: '小明刚刚参与了抽奖'},
@@ -509,6 +528,10 @@
         }
       });
     },
+    onShow() {
+      //从其他小程序回来可以在当前生命周期检测到,但是这个方法，自己的小程序页面返回也会进入
+      console.log('页面show！！')
+    },
   });
 </script>
 <config>
@@ -524,6 +547,10 @@
       'star-animation': '~@/components/custom/starAnimation',
       'star-animation1': '~@/components/custom/starAnimation1',
       'open-animation': '~@/components/custom/openAnimation',
-    }
-}
+    },
+    "navigateToMiniProgramAppIdList":[
+      "wx91d27dbf599dff74"
+    ],
+
+  }
 </config>