增加答题卡吸顶功能

src/pages/activity/activity-type.vue

@@ -57,7 +57,7 @@
                 </ul>
               </div>
             </div>
-            <div class="questionCard" v-show="activityType === 'satisfaction'">
+            <div class="questionCard" v-show="activityType === 'satisfaction'" :class="{suck:move}">
               <div class="card">
                 <ul>
                   <div class="ques-title">题目</div>
@@ -222,274 +222,293 @@
 </template>
 
 <script>
-//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
-//例如：import 《组件名称》 from '《组件路径》';
-import Paging from "@/components/pagination";
-import { checkPhone } from "@/common/common.js";
+import Paging from '@/components/pagination'
+import { checkPhone } from '@/common/common.js'
+
+// 答题跟随屏幕滚动
+
 export default {
-  name: "survey",
-  //import引入的组件需要注入到对象中才能使用
+  name: 'survey',
+  // import引入的组件需要注入到对象中才能使用
   components: {
-    Paging,
+    Paging
   },
-  data() {
-    //这里存放数据
+  data () {
+    // 这里存放数据
     return {
-      activityType: "onLine",
+      move: false,
+      offsetTop: '',
+      activityType: 'onLine',
       dataList: [],
       paging: {
         pageSize: 10,
         pageNum: 1,
         total: 0,
         showSize: 10,
-        current: 1,
+        current: 1
       },
       params: {
         pageNum: 1,
         pageSize: 10,
-        type: "",
+        type: ''
       },
       typeChange: {
-        onLine: "online",
-        volunteer: "volunteer",
-        satisfaction: "satisfaction",
+        onLine: 'online',
+        volunteer: 'volunteer',
+        satisfaction: 'satisfaction'
       },
       questionnaireList: [
         {
           id: 0,
-          title: "问题1问题1问题1问题1问题1问题1问题1",
-          type: "single",
+          title: '问题1问题1问题1问题1问题1问题1问题1',
+          type: 'single',
           chooseList: [
-            "选项1",
-            "选项2",
-            "选项3",
-            "选项4",
-            "选项5",
-            "选项6",
-            "选项7",
-            "选项8",
-          ],
+            '选项1',
+            '选项2',
+            '选项3',
+            '选项4',
+            '选项5',
+            '选项6',
+            '选项7',
+            '选项8'
+          ]
         },
         {
           id: 1,
-          title: "问题2问题2问题2问题2问题2问题2问题2",
-          type: "single",
-          chooseList: ["选项1", "选项2", "选项3", "选项4"],
+          title: '问题2问题2问题2问题2问题2问题2问题2',
+          type: 'single',
+          chooseList: ['选项1', '选项2', '选项3', '选项4']
         },
         {
           id: 2,
-          title: "多选1多选1多选1多选1多选1多选1多选1",
-          type: "multiple",
+          title: '多选1多选1多选1多选1多选1多选1多选1',
+          type: 'multiple',
           chooseList: [
-            "选项1",
-            "选项2",
-            "选项3",
-            "选项4",
-            "选项5",
-            "选项6",
-            "选项7",
-            "选项8",
-            "选项9",
-            "选项10",
-            "选项11",
-            "选项12",
-            "选项13",
+            '选项1',
+            '选项2',
+            '选项3',
+            '选项4',
+            '选项5',
+            '选项6',
+            '选项7',
+            '选项8',
+            '选项9',
+            '选项10',
+            '选项11',
+            '选项12',
+            '选项13'
           ],
-          answer: [],
+          answer: []
         },
         {
           id: 3,
-          title: "多选2多选2多选2多选2多选2多选2多选2",
-          type: "multiple",
-          chooseList: ["选项1", "选项2", "选项3", "选项4"],
-          answer: [],
+          title: '多选2多选2多选2多选2多选2多选2多选2',
+          type: 'multiple',
+          chooseList: ['选项1', '选项2', '选项3', '选项4'],
+          answer: []
         },
         {
           id: 5,
-          title: "多选2多选2多选2多选2多选2多选2多选2",
-          type: "multiple",
-          chooseList: ["选项1", "选项2", "选项3", "选项4"],
-          answer: [],
+          title: '多选2多选2多选2多选2多选2多选2多选2',
+          type: 'multiple',
+          chooseList: ['选项1', '选项2', '选项3', '选项4'],
+          answer: []
         },
         {
           id: 6,
-          title: "多选2多选2多选2多选2多选2多选2多选2",
-          type: "multiple",
-          chooseList: ["选项1", "选项2", "选项3", "选项4"],
-          answer: [],
+          title: '多选2多选2多选2多选2多选2多选2多选2',
+          type: 'multiple',
+          chooseList: ['选项1', '选项2', '选项3', '选项4'],
+          answer: []
         },
         {
           id: 7,
-          title: "多选1多选1多选1多选1多选1多选1多选1",
-          type: "multiple",
-          chooseList: ["选项1", "选项2", "选项3", "选项4"],
-          answer: [],
+          title: '多选1多选1多选1多选1多选1多选1多选1',
+          type: 'multiple',
+          chooseList: ['选项1', '选项2', '选项3', '选项4'],
+          answer: []
         },
         {
           id: 8,
-          title: "多选1多选1多选1多选1多选1多选1多选1",
-          type: "multiple",
-          chooseList: ["选项1", "选项2", "选项3", "选项4"],
-          answer: [],
+          title: '多选1多选1多选1多选1多选1多选1多选1',
+          type: 'multiple',
+          chooseList: ['选项1', '选项2', '选项3', '选项4'],
+          answer: []
         },
         {
           id: 9,
-          title: "多选2多选2多选2多选2多选2多选2多选2",
-          type: "multiple",
-          chooseList: ["选项1", "选项2", "选项3", "选项4"],
-          answer: [],
+          title: '多选2多选2多选2多选2多选2多选2多选2',
+          type: 'multiple',
+          chooseList: ['选项1', '选项2', '选项3', '选项4'],
+          answer: []
         },
         {
           id: 10,
-          title: "多选2多选2多选2多选2多选2多选2多选2",
-          type: "multiple",
-          chooseList: ["选项1", "选项2", "选项3", "选项4"],
-          answer: [],
+          title: '多选2多选2多选2多选2多选2多选2多选2',
+          type: 'multiple',
+          chooseList: ['选项1', '选项2', '选项3', '选项4'],
+          answer: []
         },
         {
           id: 11,
-          title: "多选2多选2多选2多选2多选2多选2多选2",
-          type: "single",
-          chooseList: ["选项1", "选项2", "选项3", "选项4"],
-          answer: "",
+          title: '多选2多选2多选2多选2多选2多选2多选2',
+          type: 'single',
+          chooseList: ['选项1', '选项2', '选项3', '选项4'],
+          answer: ''
         },
         {
           id: 12,
-          title: "多选2多选2多选2多选2多选2多选2多选2",
-          type: "multiple",
-          chooseList: ["选项1", "选项2", "选项3", "选项4"],
-          answer: [],
+          title: '多选2多选2多选2多选2多选2多选2多选2',
+          type: 'multiple',
+          chooseList: ['选项1', '选项2', '选项3', '选项4'],
+          answer: []
         },
         {
           id: 13,
-          title: "多选2多选2多选2多选2多选2多选2多选2",
-          type: "multiple",
-          chooseList: ["选项1", "选项2", "选项3", "选项4"],
-          answer: [],
-        },
+          title: '多选2多选2多选2多选2多选2多选2多选2',
+          type: 'multiple',
+          chooseList: ['选项1', '选项2', '选项3', '选项4'],
+          answer: []
+        }
       ],
-      name: "",
-      phone: "",
+      name: '',
+      phone: '',
       questionComplete: false,
       entity: {},
-      question: [],
-    };
+      question: []
+    }
   },
-  //监听属性 类似于data概念
+  // 监听属性 类似于data概念
   computed: {},
-  //监控data中的数据变化
+  // 监控data中的数据变化
   watch: {
     paging: {
       deep: true,
-      handler: function () {},
-    },
+      handler: function () {}
+    }
   },
-  //方法集合
+  // 方法集合
   methods: {
-    async getList() {
+    async getList () {
       let result = await this.$http({
-        method: "post",
-        url: "/api/web/activity/list",
-        data: this.params,
-      });
-      this.dataList = result.data.list;
-      this.paging.total = result.data.total;
-      console.log("this.dataList", this.dataList);
+        method: 'post',
+        url: '/api/web/activity/list',
+        data: this.params
+      })
+      this.dataList = result.data.list
+      this.paging.total = result.data.total
+      console.log('this.dataList', this.dataList)
     },
-    async getQuestion() {
+    async getQuestion () {
       let result = await this.$http({
-        method: "get",
-        url: "/api/web/questionGroup/getIndex",
-      });
-      console.log("result", result);
-      this.entity = result && result["data"] && result["data"]["entity"];
-      this.question = result && result["data"] && result["data"]["question"];
+        method: 'get',
+        url: '/api/web/questionGroup/getIndex'
+      })
+      console.log('result', result)
+      this.entity = result && result['data'] && result['data']['entity']
+      this.question = result && result['data'] && result['data']['question']
       this.question = this.question.map((item) => {
         return {
           ...item,
           answer: JSON.parse(item.answer),
-          Answer: item.type === "multiple" ? [] : "",
-        };
-      });
+          Answer: item.type === 'multiple' ? [] : ''
+        }
+      })
     },
-    switchType(type) {
-      this.activityType = type;
-      this.params["type"] = this.typeChange[this.activityType];
-      this.params["pageNum"] = 1;
-      this.paging.current = 1;
-      if (type != "satisfaction") {
-        this.getList();
+    switchType (type) {
+      this.activityType = type
+      this.params['type'] = this.typeChange[this.activityType]
+      this.params['pageNum'] = 1
+      this.paging.current = 1
+      if (type !== 'satisfaction') {
+        this.getList()
       } else {
-        this.getQuestion();
+        this.getQuestion()
       }
     },
-    back() {
-      this.$router.push({ path: "/activity" });
+    back () {
+      this.$router.push({ path: '/activity' })
     },
-    pageChange(val) {
-      console.log(val);
-      this.paging.current = val;
-      this.params.pageNum = val;
-      this.getList();
+    pageChange (val) {
+      console.log(val)
+      this.paging.current = val
+      this.params.pageNum = val
+      this.getList()
     },
-    toDetail(item) {
+    toDetail (item) {
       this.$router.push({
-        path: "/activity-detail",
-        query: { ...item, navType: this.activityType },
-      });
+        path: '/activity-detail',
+        query: { ...item, navType: this.activityType }
+      })
     },
-    save() {
+    save () {
       // 点击提交
 
-      console.log(9999999999,this.question);
+      console.log(9999999999, this.question)
       this.question.forEach((item) => {
-        if (item.type === "radio" && !item.Answer) {
-          this.questionComplete = true;
+        if (item.type === 'radio' && !item.Answer) {
+          this.questionComplete = true
         }
         if (
-          (item.type === "multiple" && !item.Answer) ||
+          (item.type === 'multiple' && !item.Answer) ||
           (!!item.Answer && item.Answer.length === 0)
         ) {
-          this.questionComplete = true;
+          this.questionComplete = true
         }
-      });
-      if (this.questionComplete === true) return;
+      })
+      if (this.questionComplete === true) return
       if (!this.name) {
-        this.$message.warning("请输入姓名");
-        return;
+        this.$message.warning('请输入姓名')
+        return
       }
       if (!this.phone) {
-        this.$message.warning("请输入手机号码");
-        return;
+        this.$message.warning('请输入手机号码')
+        return
       }
       if (!checkPhone(this.phone)) {
-        this.$message.warning("请输入正确的手机号码");
-
-        return;
+        this.$message.warning('请输入正确的手机号码')
       }
     },
+    // 答题卡吸顶
+    handleScroll () {
+      let topMove = document.documentElement.scrollTop
+      if (topMove > this.offsetTop) this.move = true
+      else this.move = false
+    }
   },
-  //生命周期 - 创建完成（可以访问当前this实例）
-  created() {
+  // 生命周期 - 创建完成（可以访问当前this实例）
+  created () {
     this.activityType =
-      (this.$route.query && this.$route.query["type"]) || "onLine";
-    this.params["type"] = this.typeChange[this.activityType];
-    if (this.params["type"] === "satisfaction") {
-      this.getQuestion();
-      return;
+      (this.$route.query && this.$route.query['type']) || 'onLine'
+    this.params['type'] = this.typeChange[this.activityType]
+    if (this.params['type'] === 'satisfaction') {
+      this.getQuestion()
+      return
     }
-    this.getList();
+    this.getList()
+  },
+  // 生命周期 - 挂载完成（可以访问DOM元素）
+  mounted () {
+    // 答题卡吸顶
+    window.addEventListener('scroll', this.handleScroll)
+    // 监听dom渲染完成
+    this.$nextTick(function () {
+      let header = document.querySelector('.questionCard')
+      // 获取元素距离浏览器顶部的距离
+      this.offsetTop = header.getBoundingClientRect().top
+      // console.log(66666, this.offsetTop)
+    })
   },
-  //生命周期 - 挂载完成（可以访问DOM元素）
-  mounted() {},
-  beforeCreate() {}, //生命周期 - 创建之前
-  beforeMount() {}, //生命周期 - 挂载之前
-  beforeUpdate() {}, //生命周期 - 更新之前
-  updated() {}, //生命周期 - 更新之后
-  beforeDestroy() {}, //生命周期 - 销毁之前
-  destroyed() {}, //生命周期 - 销毁完成
-  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
-};
+  beforeCreate () {}, // 生命周期 - 创建之前
+  beforeMount () {}, // 生命周期 - 挂载之前
+  beforeUpdate () {}, // 生命周期 - 更新之前
+  updated () {}, // 生命周期 - 更新之后
+  beforeDestroy () {}, // 生命周期 - 销毁之前
+  destroyed () {
+    window.removeEventListener('scroll', this.handleScroll)
+  }, // 生命周期 - 销毁完成
+  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
+}
 </script>
 <style lang='less' scoped>
 .bg {
@@ -572,6 +591,7 @@ export default {
               }
             }
           }
+
           .questionCard {
             width: 85%;
             margin: 0 auto;
@@ -723,6 +743,13 @@ export default {
               }
             }
           }
+          .suck{
+            width: 229px;
+            position: fixed;
+            top: 0;
+            margin-left: 20px;
+          }
+
         }
         .con {
           flex: 3;