详情页头部固定

src/components/Detail.vue

@@ -9,63 +9,67 @@
       <span @click="handleClear" :class="{'check':checkF}">清空</span>
       <i>{{tips}}</i>
     </div>
-    <div class="preQuestion" v-for="(item,index) in checkDatas.questionMapping">
-      <div class="quest" @click="slideToggle(index)">
-        <img class="sign" v-if="item.required==1" src="../images/important.svg" alt="">
-        <p class="title clearfix">{{index + 1 +'.'+(item.description || item.name)}}{{item.controlType==1?'(单选)':item.controlType==2?'(多选)':''}}</p>
-        <p class="result" v-if="item.valueP&&item.slide!=1">{{item.valueP}}</p>
-        <i :class="[{'slideT':item.slide}]"></i>
+    <div class="preDetail">
+      <div class="content">
+        <div class="preQuestion" v-for="(item,index) in checkDatas.questionMapping">
+          <div class="quest" @click="slideToggle(index)">
+            <img class="sign" v-if="item.required==1" src="../images/important.svg" alt="">
+            <p class="title clearfix">{{index + 1 +'.'+(item.description || item.name)}}{{item.controlType==1?'(单选)':item.controlType==2?'(多选)':''}}</p>
+            <p class="result" v-if="item.valueP&&item.slide!=1">{{item.valueP}}</p>
+            <i :class="[{'slideT':item.slide}]"></i>
+          </div>
+          <img class="questionImg" :src="item.url.replace('{imageUrlPrefix}',imgUrl)" v-if="item.url&&!!item.slide">
+          <Radio v-if="item.controlType==1" 
+                :item="item"
+                :key="item.id"
+                :slide="!!item.slide"
+                :detail="1"
+                @updata="updataData"/>
+          <RadioSelect v-if="item.controlType==8" 
+                :item="item"
+                :slide="!!item.slide"
+                :detail="1"
+                :key="item.id"
+                @updata="updataData"/>
+          <CheckBox v-if="item.controlType==2"
+                :item="item"
+                :key="item.id"
+                :slide="!!item.slide"
+                :detail="1"
+                @updata="updataData"/>
+          <!-- 文本域 -->
+          <ComTextArea v-if="item.controlType == 5"
+                :item="item"
+                :slide="!!item.slide"
+                :detail="1"
+                @updata="updataData"/>
+          <!-- 输入框 -->
+          <Input v-if="item.controlType==6 || item.controlType==7"
+                :item="item"
+                :key="item.id"
+                :slide="!!item.slide"
+                :detail="1"
+                @updata="updataData"/>
+          <div class="multiWrap" :style="{'display':!!item.slide?'block':'none'}" v-if="item.controlType == 3">
+            <template
+              v-for="(part,index) in item.questionDetailList"
+            >
+              <MultiLineInput
+                v-if="item.controlType == 3"
+                :msg="part.description||part.name"
+                :part="part"
+                :isLast="item.questionDetailList.length-1 == index"
+                @updata="updataData($event,item)"
+              ></MultiLineInput>
+            </template>
+          </div>
+          <PickTime v-if="item.controlType == 9" 
+                  @updata="updataData"
+                  :slide="!!item.slide"
+                  :detail="1"
+                  :item="item"/>
+        </div>
       </div>
-      <img class="questionImg" :src="item.url.replace('{imageUrlPrefix}',imgUrl)" v-if="item.url&&!!item.slide">
-      <Radio v-if="item.controlType==1" 
-            :item="item"
-            :key="item.id"
-            :slide="!!item.slide"
-            :detail="1"
-            @updata="updataData"/>
-      <RadioSelect v-if="item.controlType==8" 
-            :item="item"
-            :slide="!!item.slide"
-            :detail="1"
-            :key="item.id"
-            @updata="updataData"/>
-      <CheckBox v-if="item.controlType==2"
-            :item="item"
-            :key="item.id"
-            :slide="!!item.slide"
-            :detail="1"
-            @updata="updataData"/>
-      <!-- 文本域 -->
-      <ComTextArea v-if="item.controlType == 5"
-            :item="item"
-            :slide="!!item.slide"
-            :detail="1"
-            @updata="updataData"/>
-      <!-- 输入框 -->
-      <Input v-if="item.controlType==6 || item.controlType==7"
-            :item="item"
-            :key="item.id"
-            :slide="!!item.slide"
-            :detail="1"
-            @updata="updataData"/>
-      <div class="multiWrap" :style="{'display':!!item.slide?'block':'none'}" v-if="item.controlType == 3">
-        <template
-          v-for="(part,index) in item.questionDetailList"
-        >
-          <MultiLineInput
-            v-if="item.controlType == 3"
-            :msg="part.description||part.name"
-            :part="part"
-            :isLast="item.questionDetailList.length-1 == index"
-            @updata="updataData($event,item)"
-          ></MultiLineInput>
-        </template>
-      </div>
-      <PickTime v-if="item.controlType == 9" 
-              @updata="updataData"
-              :slide="!!item.slide"
-              :detail="1"
-              :item="item"/>
     </div>
   </div>
 </template>
@@ -73,11 +77,12 @@
 import Radio from '../common/Radio.vue';
 import CheckBox from '../common/CheckBox.vue';
 import Input from '../common/Input.vue';
+import BScroll from 'better-scroll';
 import ComTextArea from '../common/ComTextArea.vue';
 import RadioSelect from '../common/RadioSelect.vue';
 import MultiLineInput from '../common/MultiLineInput.vue';
 import PickTime from '../common/PickTime.vue';
-import {patt,trimDots,imageUrlPrefix} from '@utils/tools.js';
+import {patt,trimDots,imageUrlPrefix,setScroll} from '@utils/tools.js';
 // 将获取到的数据源转换成私有数据，处理选择事件。点击完成后统一存到store中，便于回读
   export default {
     name:'Detail',
@@ -91,6 +96,13 @@ import {patt,trimDots,imageUrlPrefix} from '@utils/tools.js';
     created(){
       this.checkDatas = JSON.parse(JSON.stringify(this.datas));
     },
+    mounted(){
+      this.$nextTick(()=>{
+          let scroll = setScroll(BScroll,true,'.preDetail')
+          this.scroll = scroll
+          scroll.on('scroll', this.onScroll)
+      })
+    },
     components:{
       Radio,
       CheckBox,
@@ -101,6 +113,10 @@ import {patt,trimDots,imageUrlPrefix} from '@utils/tools.js';
       PickTime
     },
     methods:{
+      onScroll(data) {
+        this.$store.commit('setScroll', data)
+        document.activeElement.scrollIntoViewIfNeeded(true);        
+      },
       close(){
         this.$emit('close')
       },
@@ -332,6 +348,14 @@ import {patt,trimDots,imageUrlPrefix} from '@utils/tools.js';
     // padding: .3rem .5rem 1.2rem .6rem;
     padding: 0 0 1.5rem;
     font-size: .3rem;
+    .preDetail {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      .content {
+        padding-bottom: 4.6rem;
+      }
+    }
     .quest{
       color:#colors[quest];
       position: relative;
@@ -391,6 +415,7 @@ import {patt,trimDots,imageUrlPrefix} from '@utils/tools.js';
       font-size: .28rem;
       color: #7C828E;
       position: relative;
+      z-index: 100;
       width: 100%;
       background-color: #fff;
       // top: 45px;

src/components/DetailBox.vue

@@ -69,9 +69,9 @@
           this.reqFinish = true;
         }
         setTimeout(() => {
-          let scroll = setScroll(BScroll,true,'.viewPrew')
-          this.scroll = scroll
-          scroll.on('scroll', this.onScroll)
+          // let scroll = setScroll(BScroll,true,'.viewPrew')
+          // this.scroll = scroll
+          // scroll.on('scroll', this.onScroll)
         }, 400);
       })
     },