vue移动端点击下拉列表的实现

问题遇到的现象和发生背景
问题相关代码，请勿粘贴截图
运行结果及报错内容
我的解答思路和尝试过的方法
我想要达到的结果

img

可以看下UI组件，比如vant
https://youzan.github.io/vant/#/zh-CN/collapse

img

可以参考一些组件库的实现，或者直接使用组件库，如vantUI的折叠面板组件
https://youzan.github.io/vant/v2/#/zh-CN/collapse
也可以参考自行实现 https://blog.csdn.net/qq_38387487/article/details/109364284
https://blog.csdn.net/weixin_42040328/article/details/109586027



<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <main>
        <p class="refreshText"></p>
        <ul id="refreshContainer">
            <li>111</li>
            <li>222</li>
            <li>333</li>
            <li>444</li>
            <li>555</li>
            ...
        </ul>
    </main>
    <script>
        var _element = document.getElementById('refreshContainer'),
            _refreshText = document.querySelector('.refreshText'),
            _startPos = 0,  // 初始的值
            _transitionHeight = 0; // 移动的距离

        _element.addEventListener('touchstart', function (e) {
            _startPos = e.touches[0].pageY; // 记录初始位置
            _element.style.position = 'relative';
            _element.style.transition = 'transform 0s';
        }, false);

        _element.addEventListener('touchmove', function (e) {
            // e.touches[0].pageY 当前位置
            _transitionHeight = e.touches[0].pageY - _startPos; // 记录差值

            if (_transitionHeight > 0 && _transitionHeight < 60) {
                _refreshText.innerText = '下拉刷新';
                _element.style.transform = 'translateY(' + _transitionHeight + 'px)';

                if (_transitionHeight > 55) {
                    _refreshText.innerText = '释放更新';
                }
            }
        }, false);

        _element.addEventListener('touchend', function (e) {
            _element.style.transition = 'transform 0.5s ease 1s';
            _element.style.transform = 'translateY(0px)';
            _refreshText.innerText = '更新中...';
            // todo...

        }, false);
    </script>
</body>

</html>

vue绑定下拉框——vscode
https://blog.csdn.net/buchishutiao/article/details/115001346

例如默认高度为42px，点击变为auto

参考网站的模板呀

如果是vue的话也可以参考element上面的代码