downSlider

功能描述

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

依赖的插件

./libs/vue.js

快速使用

<style>
.title{line-height:.9rem;font-size:.32rem;color:#1b1b1b;padding:0 .24rem;position:relative;border-bottom:1px solid #efefef}
.title .icon{position:absolute;right:.24rem;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);width:.24rem;display:block;transition:.5s}
.queueItem.active .title .icon{-webkit-transform:translateY(-50%) rotateZ(-180deg);transform:translateY(-50%) rotateZ(-180deg)}
.answer{height:0;transition:height .5s;box-sizing:border-box;overflow:hidden}
.answer>div{padding:.4rem .24rem;font-size:.3rem;color:#9a9a9a;line-height:.42rem;border-bottom:1px solid #efefef;cursor:pointer}
</style>
<div id="questions">
    <div class="queueItem" v-for="(item,index) of list" :key="index" @click="titleClick(index)" :class="item.open?'active':''">
        <div class="title">
            {{item.question}}
            <img src="./image/slide_icon.png" class="icon">
        </div>
        <div class="answer" :id="item.pid" v-if="item.open != null">
            <div>{{item.answer}}</div>
        </div>
        <div class="answer" v-else>
            <div>{{item.answer}}</div>
        </div>
    </div>
</div>
<script type="text/javascript" src="./libs/vue.js"></script>
<script type="text/javascript">
    new Vue({
            el: "#questions",
            data: {
                defaultOp: -1,
                title: "",
                list: []
            },
            mounted: function() {
                this.getData();
            },
            methods: {
                getData: function() {
                    var that = this;
                    var info = {
                        "title": "常见问题",
                        "list": [{
                            "id": 1,
                            "question": "XXXX是什么？",
                            "answer": "XXXX平台致力于打造一款新形式的漫画阅读软件，以读者、作者、平台多方共赢的方式。以移动应用为主进行内容制作、漫画阅读，提供更有用、更有内涵的漫画内容给大家。",
                        }, {
                            "id": 2,
                            "question": "XXXX为什么会给你奖励？",
                            "answer": "为了引领全民阅读漫画，帮助大家认识漫画并养成良好的漫画阅读习惯，在阅读漫画的过程中，采用先进的算法根据您的阅读时长计算出对应的金币，金币可以手动转换成现金，让您在欣赏、阅读漫画的同时还能有所收益。",

                        }]
                    }

                    if(info.list) {
                        var list = info.list;
                        var arr = [];
                        for(var i = 0; i < list.length; i++) {
                            var obj = list[i];
                            obj["open"] = null;
                            obj["pid"] = "itemPId" + i;
                            arr.push(obj);
                        }
                        that.list = arr;
                    }

                },
                titleClick: function(index) {
                    var obj = this.list[index];
                    obj.open = !obj.open;
                    this.list[index] = obj;
                    setTimeout(function() {
                        var pid = "itemPId" + index;
                        var pdom = document.getElementById(pid);
                        console.log(pdom)
                        if(obj.open) {
                            pdom.style.height = pdom.scrollHeight + "px";
                        } else {
                            pdom.style.height = 0;
                        }
                    }, 1);
                }
            }
        })

        ! function(n) {
            var e = n.document,
                t = e.documentElement,
                i = 750,
                d = i / 100,
                o = "orientationchange" in n ? "orientationchange" : "resize",
                a = function() {
                    var n = t.clientWidth || 320;
                    t.style.fontSize = n / d + "px"
                };
            e.addEventListener && (n.addEventListener(o, a, !1), e.addEventListener("DOMContentLoaded", a, !1))
        }(window);
</script>
是否仍需要帮助？ 请保持联络！
最后更新于 2024/04/24