'产品查询'

src/pages/productQuery/product-detailed.vue

@@ -2,7 +2,7 @@
  * @Descrip: 产品明细
  * @Author: your name
  * @Date: 2019-10-15 14:30:00
- * @LastEditTime: 2019-11-06 16:35:55
+ * @LastEditTime: 2019-11-06 19:12:51
  * @LastEditors: Please set LastEditors
    -->
 <template>
@@ -11,7 +11,7 @@
     title="产品查询">
     <h-header :proportion="[5,1,1]" class="bar-custom">
       <div slot="left" class="h-header-btn">
-        <img src="@/assets/userBind/arrow.png" @click="returnGo()">
+        <img src="@/assets/userBind/arrow.png" @click="$routeGo()">
         <span>产品明细</span>
       </div>
     </h-header>
@@ -22,8 +22,8 @@
     </div>
     <!-- <Tab v-if="slide" :tabNums="tabNum" @getTabNum="getTabNum"/> -->
     <!-- 基本信息 -->
-    <h-content v-swipeup="(e)=>vueTouch('上滑',e)" v-swipedown="(e)=>vueTouch('下滑',e)"  class="hcontent">
-      <scroll class="scrolls" ref="scrolls">
+    <h-content class="hcontent" v-swipeup="(e)=>vueTouch('上滑',e)" v-swipedown="(e)=>vueTouch('下滑',e)">
+      <scroll class="scrolls" ref="scrolls" :listenScroll="true" @scroll="startScroll">
       <!-- 基本信息 -->
        <div id="baseInfo" class="base">
         <swipe :interval="5000" class="hls-swipe">
@@ -160,44 +160,34 @@ export default {
   methods:
 
       {
+        startScroll (v) {
+          this.slide = true
+        },
         // tab切换
         tabCheck (num) {
           let scrollContent = document.getElementsByClassName('scrollContent')[0]
           if(num === 0){
             this.num = 0
-            console.log('基本信息',document.getElementsByClassName('base')[0].getBoundingClientRect().top)
-            this.height = document.getElementsByClassName('base')[0].getBoundingClientRect().top - 83
-            // console.log(height)
-            scrollContent.style.transition = 'all .3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s'
-            scrollContent.style.transform = 'translate(0px, -' + this.height + 'px) scale(1) translateZ(0px)'
+            this.$refs.scrolls.scrollToElement(document.getElementsByClassName('base')[0])
 
           }else if(num === 1){
             this.num = 1
-            console.log('详情信息',document.getElementsByClassName('prodetail')[0].getBoundingClientRect().top)
-            this.height = document.getElementsByClassName('prodetail')[0].getBoundingClientRect().top - 83
-            console.log(this.height)
-            scrollContent.style.transition = 'all .3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s'
-            scrollContent.style.transform = 'translate(0px, -' + this.height + 'px) scale(1) translateZ(0px)'
+            this.$refs.scrolls.scrollToElement(document.getElementsByClassName('prodetail')[0])
+
           }else{
             this.num = 2
-            console.log('配置信息',document.getElementsByClassName('procnf')[0].getBoundingClientRect().top)
-            this.height = document.getElementsByClassName('procnf')[0].getBoundingClientRect().top - 83
-            // console.log(height)
-            scrollContent.style.transition = 'all .3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s'
-            scrollContent.style.transform = 'translate(0px, -' + this.height + 'px) scale(1) translateZ(0px)'
+            this.$refs.scrolls.scrollToElement(document.getElementsByClassName('procnf')[0])
+
           }
         },
         returnGo () {
           this.$router.replace({
             name: 'ProductList',
           })
-          // this.$router.go(-1)
+
         },
         vueTouch: function (s, e) {
-          // console.log(s, e)
-          this.slide = true
-          // this.height = 0
-          // console.log(this.$refs.detail.style)
+
           let clientHeight = document.body.clientHeight // 屏幕可视高度
           let procnfGather = document.getElementsByClassName('procnf')[0].getBoundingClientRect() // 配置信息元素集合
           let detailGather = document.getElementsByClassName('prodetail')[0].getBoundingClientRect() // 详情信息元素集合
@@ -339,6 +329,13 @@ export default {
 </script>
 <style lang='less'>
   #detailed {
+    .hls-swipe {
+      height: 220px;
+      img {
+        width: 100%;
+        height: 100%;
+      }
+    }
   .tab-style{
     display:flex;
     justify-content: center;

src/pages/productQuery/product-list.vue

@@ -7,7 +7,7 @@
   <h-view id="prolist" class="public-style" title="产品查询">
     <h-header :proportion="[5,1,1]" class="bar-custom">
       <div slot="left" class="h-header-btn">
-        <img src="@/assets/userBind/arrow.png" @click="returnGo()">
+        <img src="@/assets/userBind/arrow.png" @click="$routeGo()">
         <span>产品信息</span>
       </div>
     </h-header>

src/pages/productQuery/query-home.vue

@@ -2,14 +2,14 @@
    * @Descrip: 查询首页
  * @Author: your name
  * @Date: 2019-10-15 14:30:00
- * @LastEditTime: 2019-11-04 19:08:13
+ * @LastEditTime: 2019-11-06 17:29:18
  * @LastEditors: Please set LastEditors
    -->
 <template>
   <h-view id="query" class="public-style" title="产品查询">
     <h-header :proportion="[5,1,1]" class="bar-custom">
       <div slot="left" class="h-header-btn">
-        <img src="@/assets/userBind/arrow.png" @click="returnGo()">
+        <img src="@/assets/userBind/arrow.png" @click="$routeGo()">
         <span>产品信息</span>
       </div>
     </h-header>