downSlider

功能描述

基于vue的下拉折叠面板，用例参见 downSlider.html

依赖的模块

  1. ./libs/vue.js

快速使用

  1. <style>
  2. .title{line-height:.9rem;font-size:.32rem;color:#1b1b1b;padding:0 .24rem;position:relative;border-bottom:1px solid #efefef}
  3. .title .icon{position:absolute;right:.24rem;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);width:.24rem;display:block;transition:.5s}
  4. .queueItem.active .title .icon{-webkit-transform:translateY(-50%) rotateZ(-180deg);transform:translateY(-50%) rotateZ(-180deg)}
  5. .answer{height:0;transition:height .5s;box-sizing:border-box;overflow:hidden}
  6. .answer>div{padding:.4rem .24rem;font-size:.3rem;color:#9a9a9a;line-height:.42rem;border-bottom:1px solid #efefef;cursor:pointer}
  7. </style>
  8. <div id="questions">
  9.     <div class="queueItem" v-for="(item,index) of list" :key="index" @click="titleClick(index)" :class="item.open?'active':''">
  10.         <div class="title">
  11.             {{item.question}}
  12.             <img src="./image/slide_icon.png" class="icon">
  13.         </div>
  14.         <div class="answer" :id="item.pid" v-if="item.open != null">
  15.             <div>{{item.answer}}</div>
  16.         </div>
  17.         <div class="answer" v-else>
  18.             <div>{{item.answer}}</div>
  19.         </div>
  20.     </div>
  21. </div>
  22. <script type="text/javascript" src="./libs/vue.js"></script>
  23. <script type="text/javascript">
  24.     new Vue({
  25.             el: "#questions",
  26.             data: {
  27.                 defaultOp: -1,
  28.                 title: "",
  29.                 list: []
  30.             },
  31.             mounted: function() {
  32.                 this.getData();
  33.             },
  34.             methods: {
  35.                 getData: function() {
  36.                     var that = this;
  37.                     var info = {
  38.                         "title": "常见问题",
  39.                         "list": [{
  40.                             "id": 1,
  41.                             "question": "XXXX是什么？",
  42.                             "answer": "XXXX平台致力于打造一款新形式的漫画阅读软件，以读者、作者、平台多方共赢的方式。以移动应用为主进行内容制作、漫画阅读，提供更有用、更有内涵的漫画内容给大家。",
  43.                         }, {
  44.                             "id": 2,
  45.                             "question": "XXXX为什么会给你奖励？",
  46.                             "answer": "为了引领全民阅读漫画，帮助大家认识漫画并养成良好的漫画阅读习惯，在阅读漫画的过程中，采用先进的算法根据您的阅读时长计算出对应的金币，金币可以手动转换成现金，让您在欣赏、阅读漫画的同时还能有所收益。",
  48.                         }]
  49.                     }
  51.                     if(info.list) {
  52.                         var list = info.list;
  53.                         var arr = [];
  54.                         for(var i = 0; i < list.length; i++) {
  55.                             var obj = list[i];
  56.                             obj["open"] = null;
  57.                             obj["pid"] = "itemPId" + i;
  58.                             arr.push(obj);
  59.                         }
  60.                         that.list = arr;
  61.                     }
  63.                 },
  64.                 titleClick: function(index) {
  65.                     var obj = this.list[index];
  66.                     obj.open = !obj.open;
  67.                     this.list[index] = obj;
  68.                     setTimeout(function() {
  69.                         var pid = "itemPId" + index;
  70.                         var pdom = document.getElementById(pid);
  71.                         console.log(pdom)
  72.                         if(obj.open) {
  73.                             pdom.style.height = pdom.scrollHeight + "px";
  74.                         } else {
  75.                             pdom.style.height = 0;
  76.                         }
  77.                     }, 1);
  78.                 }
  79.             }
  80.         })
  82.         ! function(n) {
  83.             var e = n.document,
  84.                 t = e.documentElement,
  85.                 i = 750,
  86.                 d = i / 100,
  87.                 o = "orientationchange" in n ? "orientationchange" : "resize",
  88.                 a = function() {
  89.                     var n = t.clientWidth || 320;
  90.                     t.style.fontSize = n / d + "px"
  91.                 };
  92.             e.addEventListener && (n.addEventListener(o, a, !1), e.addEventListener("DOMContentLoaded", a, !1))
  93.         }(window);
  94. </script>