iscroll

nuxt.config.js

@@ -1,6 +1,6 @@
 const path = require('path')
 const isProdMode = Object.is(process.env.NODE_ENV, 'production')
-const baseUrl = process.env.BASE_URL || (isProdMode ? 'http://10.10.100.107:8081/platform-b2c/' : 'http://192.168.253.60:9090/platform-b2c/')
+const baseUrl = process.env.BASE_URL || (isProdMode ? 'http://10.10.100.107:8081/platform-b2c/' : 'http://192.168.253.123:8888/homepage/')
 
 module.exports = {
   router: {
@@ -103,6 +103,9 @@ module.exports = {
   }, {
     src: '~plugins/jsonp.js',
     ssr: false
+  }, {
+    src: '~plugins/iscroll.js',
+    ssr: false
   }],
   /* TODO 暂时代理到商城测试版，之后再做出调整 */
   proxyTable: ['/api/**', '/search/**', '/user/**', '/login/**', '/register/**', '/logout/**', '/static/**', '/vendor**', '/user**', '/trade/**', '/recommendation/**', '/store-service/**', '/basic/**', '/logout**', '/operation/**', '/help**', '/product**', '/store**', '/order/proxy**', '/report/**', '/store/**#/**', '/kdn/**', '/product/**Submit', '/admin**', '/product/**Submit/**', '/release/**', '/auth/store/**', '/produce/**', '/file**', '/rate/**', '/log/**', '/help-service/**', '/keyword/**']

package.json

@@ -47,8 +47,10 @@
     "eslint-plugin-html": "^2.0.0",
     "eslint-plugin-promise": "^3.4.1",
     "eslint-plugin-standard": "^2.0.1",
+    "iscroll": "^5.2.0",
     "node-sass": "^4.5.3",
     "sass-loader": "^6.0.6",
+    "vue-iscroll-view": "^1.0.3",
     "vue-loader": "^13.3.0"
   }
 }

pages/mobile/search/_keycode.vue

@@ -1,50 +1,52 @@
 <template>
-  <div class="search-list">
-    <div class="search-item" v-if="productList.expose > 0 || productList.brands">
-      <span :class="activeType=='store'?'active':''" @click="clickType('store')">所有器件</span>
-      <span :class="activeType=='support'?'active':''" @click="clickType('support')">仅看有货</span>
-    </div>
-
-    <div class="brand-list-content" v-if="(!productList.brands && brandList && brandList.length > 0) && productList.expose > 0">
-      <div class="brand-list-top">
-        <span>品牌墙</span>
-        <span class="row-switch" @click="onclick()" v-if="brandList.length > 8">{{!isShow?'收起':'展开'}}<i :class="{'iconfont icon-arrow-down':isShow,'icon-icon-shang iconfont':!isShow}"></i></span>
+  <iscroll-view class="scroll-view" @pullUp="load">
+    <div class="search-list">
+      <div class="search-item" v-if="productList.expose > 0 || productList.brands">
+        <span :class="activeType=='store'?'active':''" @click="clickType('store')">所有器件</span>
+        <span :class="activeType=='support'?'active':''" @click="clickType('support')">仅看有货</span>
       </div>
-      <div class="brand-list-item" >
-        <div v-for="item in isShow?brandList.slice(0, 8):brandList">
-          <nuxt-link :to="'/mobile/brand/'+item.br_uuid">
-            <img :src="item.logoUrl ||'/images/component/default.png'"/>
-          </nuxt-link>
+
+      <div class="brand-list-content" v-if="(!productList.brands && brandList && brandList.length > 0) && productList.expose > 0">
+        <div class="brand-list-top">
+          <span>品牌墙</span>
+          <span class="row-switch" @click="onclick()" v-if="brandList.length > 8">{{!isShow?'收起':'展开'}}<i :class="{'iconfont icon-arrow-down':isShow,'icon-icon-shang iconfont':!isShow}"></i></span>
+        </div>
+        <div class="brand-list-item" >
+          <div v-for="item in isShow?brandList.slice(0, 8):brandList">
+            <nuxt-link :to="'/mobile/brand/'+item.br_uuid">
+              <img :src="item.logoUrl ||'/images/component/default.png'"/>
+            </nuxt-link>
+          </div>
         </div>
       </div>
-    </div>
 
-    <div class="detail-brand-content" v-if="productList.brands" @click="goBrand(list.uuid)">
-      <h4>主营产品</h4>
-      <div class="brand-list">
-        <div class="list-left">
-          <img :src="list.logoUrl || '/images/component/default.png'" :alt="list.nameEn"/>
-          <span>{{list.nameCn}}</span>
+      <div class="detail-brand-content" v-if="productList.brands" @click="goBrand(list.uuid)">
+        <h4>主营产品</h4>
+        <div class="brand-list">
+          <div class="list-left">
+            <img :src="list.logoUrl || '/images/component/default.png'" :alt="list.nameEn"/>
+            <span>{{list.nameCn}}</span>
+          </div>
+          <p>{{list.series | productDescFilter}}</p>
         </div>
-        <p>{{list.series | productDescFilter}}</p>
       </div>
-    </div>
 
-    <div class="detail-brand" v-for="(item, index) in productList.components" v-if="productList.components">
-      <div class="brand-item" @click="goComponent(item.uuid)">
-        <p>型号：<span>{{item.code}}</span></p>
-        <p>品牌：<span>{{item.brand.nameCn}}</span></p>
-        <p>产品描述：<span>{{item.kind.nameCn}}</span></p>
-        <i class="iconfont icon-shoucang" :style="(item.isFocus)?'color:#ff7800':'color:#bbb'" @click="collect(item, $event)"></i>
+      <div class="detail-brand" v-for="(item, index) in productList.components" v-if="productList.components">
+        <div class="brand-item" @click="goComponent(item.uuid)">
+          <p>型号：<span>{{item.code}}</span></p>
+          <p>品牌：<span>{{item.brand.nameCn}}</span></p>
+          <p>产品描述：<span>{{item.kind.nameCn}}</span></p>
+          <i class="iconfont icon-shoucang" :style="(item.isFocus)?'color:#ff7800':'color:#bbb'" @click="collect(item, $event)"></i>
+        </div>
       </div>
-    </div>
 
-    <div class="none-state" v-if="!productList.expose">
-      <img src="/images/mobile/@2x/sousuokongzhuangtai@2x.png">
-      <a @click="goLastPage">返回上一页</a>
+      <div class="none-state" v-if="!productList.expose">
+        <img src="/images/mobile/@2x/sousuokongzhuangtai@2x.png">
+        <a @click="goLastPage">返回上一页</a>
+      </div>
+      <remind-box :title="collectResult" :timeoutCount="timeoutCount"></remind-box>
     </div>
-    <remind-box :title="collectResult" :timeoutCount="timeoutCount"></remind-box>
-  </div>
+  </iscroll-view>
 </template>
 
 <script>
@@ -141,13 +143,17 @@
       },
       goLastPage: function () {
         window.history.back(-1)
+      },
+      load: function (iscroll) {
+        console.log(iscroll)
       }
     }
   }
 </script>
 
 <style scoped lang="scss">
-  .search-list{
+  .scroll-view {
+    .search-list{
       width:100%;
       padding-bottom: 1rem;
       .none-state{
@@ -182,144 +188,145 @@
           font-size:.32rem;
           color:#666;
         }
-      span.active{
-        color:#3976f4;
-        border-bottom:.02rem solid #3976f4;
-      }
-    }
-
-    .brand-list-content{
-      margin:0 auto;
-      border-top:.02rem solid #dedfdf;
-      border-bottom:.02rem solid #dedfdf;
-      width:7.1rem;
-      min-height:1.51rem;
-      overflow: hidden;
-      text-align: left;
-      padding-top:.33rem;
-      padding-bottom:.33rem;
-      .brand-list-top{
-        span:first-child{
-          font-size:.32rem;
-          margin-right:4.98rem;
-          margin-left: .2rem;
-        }
-        span.row-switch{
-          font-size:.28rem;
-          color:#53a0f7;
+        span.active{
+          color:#3976f4;
+          border-bottom:.02rem solid #3976f4;
         }
       }
-      .brand-list-item{
-        flex-wrap: wrap;
-        display:inline-flex;
+
+      .brand-list-content{
+        margin:0 auto;
+        border-top:.02rem solid #dedfdf;
+        border-bottom:.02rem solid #dedfdf;
+        width:7.1rem;
+        min-height:1.51rem;
         overflow: hidden;
-        margin:0 .2rem;
-        text-align: center;
-        >div {
-          display: inline-block;
-          margin-right: .14rem;
-          &:nth-child(4n) {
-            margin-right: 0;
+        text-align: left;
+        padding-top:.33rem;
+        padding-bottom:.33rem;
+        .brand-list-top{
+          span:first-child{
+            font-size:.32rem;
+            margin-right:4.98rem;
+            margin-left: .2rem;
           }
-          a {
-            width: 1.57rem;
-            height: .77rem;
+          span.row-switch{
+            font-size:.28rem;
+            color:#53a0f7;
+          }
+        }
+        .brand-list-item{
+          flex-wrap: wrap;
+          display:inline-flex;
+          overflow: hidden;
+          margin:0 .2rem;
+          text-align: center;
+          >div {
             display: inline-block;
-            margin-top: .2rem;
-            border: .02rem solid #53a0f7;
-            border-radius: .1rem;
-            line-height: .77rem;
-            img{
-              max-width:1.07rem;
-              max-height:.57rem;
+            margin-right: .14rem;
+            &:nth-child(4n) {
+              margin-right: 0;
+            }
+            a {
+              width: 1.57rem;
+              height: .77rem;
+              display: inline-block;
+              margin-top: .2rem;
+              border: .02rem solid #53a0f7;
+              border-radius: .1rem;
+              line-height: .77rem;
+              img{
+                max-width:1.07rem;
+                max-height:.57rem;
+              }
             }
           }
         }
       }
-    }
 
-    .detail-brand-content{
-      margin:0 auto;
-      border-top:.02rem solid #dedfdf;
-      border-bottom:.02rem solid #dedfdf;
-      width:7.1rem;
-      height:3.02rem;
-      padding-top:.18rem;
-      h4{
-        font-size:.32rem;
-        line-height: .6rem;
-        margin:0;
-        margin-left:3.97rem;
-      }
-      .brand-list{
-        display:flex;
-        justify-content: space-between;
-        align-items: center;
-        margin:0 .15rem;
-        .list-left{
-          border:.02rem solid #418ef7;
-          border-radius: .05rem;
-          width:2.03rem;
-          height:1.73rem;
-          img{
-            display:block;
-            width:100%;
-            height:1.25rem;
+      .detail-brand-content{
+        margin:0 auto;
+        border-top:.02rem solid #dedfdf;
+        border-bottom:.02rem solid #dedfdf;
+        width:7.1rem;
+        height:3.02rem;
+        padding-top:.18rem;
+        h4{
+          font-size:.32rem;
+          line-height: .6rem;
+          margin:0;
+          margin-left:3.97rem;
+        }
+        .brand-list{
+          display:flex;
+          justify-content: space-between;
+          align-items: center;
+          margin:0 .15rem;
+          .list-left{
+            border:.02rem solid #418ef7;
+            border-radius: .05rem;
+            width:2.03rem;
+            height:1.73rem;
+            img{
+              display:block;
+              width:100%;
+              height:1.25rem;
+            }
+            span{
+              display: block;
+              font-size: .24rem;
+              color:#fff;
+              text-align: center;
+              width:100%;
+              background: #418ef7;
+              line-height: .45rem;
+            }
           }
-          span{
-            display: block;
-            font-size: .24rem;
-            color:#fff;
-            text-align: center;
-            width:100%;
-            background: #418ef7;
-            line-height: .45rem;
+          p{
+            width:4.3rem;
+            font-size:.28rem;
+            line-height: .4rem;
+            padding:.12rem .46rem 0 .05rem;
           }
         }
-        p{
-          width:4.3rem;
-          font-size:.28rem;
-          line-height: .4rem;
-          padding:.12rem .46rem 0 .05rem;
-        }
       }
-    }
 
-    .detail-brand{
-      background: #f8fcff;
-      width:100%;
-      min-height:1.5rem;
-      padding-top:.2rem;
-      .brand-item{
-        width:7rem;
-        margin:0 auto;
-        border-radius:.1rem;
-        background: #fff;
-        padding:.2rem;
-        position:relative;
-        box-shadow: 0 0 0 .02rem #ddd;
-        &:active{
-           background: #e1e1e1;
-         }
-        p{
-          font-size:.28rem;
-          line-height:.4rem;
-          color:#333;
-          margin:0;
-          span{}
+      .detail-brand{
+        background: #f8fcff;
+        width:100%;
+        min-height:1.5rem;
+        padding-top:.2rem;
+        .brand-item{
+          width:7rem;
+          margin:0 auto;
+          border-radius:.1rem;
+          background: #fff;
+          padding:.2rem;
+          position:relative;
+          box-shadow: 0 0 0 .02rem #ddd;
+          &:active{
+            background: #e1e1e1;
+          }
+          p{
+            font-size:.28rem;
+            line-height:.4rem;
+            color:#333;
+            margin:0;
+            span{}
+          }
+          i{
+            display:block;
+            position:absolute;
+            top:.1rem;
+            right:.34rem;
+            font-size:.4rem;
+            color:#ff7800;
+          }
         }
-        i{
-          display:block;
-          position:absolute;
-          top:.1rem;
-          right:.34rem;
-          font-size:.4rem;
-          color:#ff7800;
+        div.active{
+          background: #d4d;
         }
       }
-      div.active{
-        background: #d4d;
-      }
     }
   }
 

plugins/iscroll.js

@@ -0,0 +1,5 @@
+import Vue from 'vue'
+import IScrollView from 'vue-iscroll-view'
+import IScroll from 'iscroll'
+
+Vue.use(IScrollView, IScroll)