vue-iscroll-view 无法实现横向滚动？

Question

<div class="scroll-container">

                <iscroll-view class="scroll-items" id="scroll-items">
                        <li class="grade-item">
                            <h1>一等</h1>
                            <div><img class="interval-img" src="../../static/img/hui.png"></div>
                            <p>内容充实，结构鲜新颖内容充实结构</p>
                        </li>
                        <li class="grade-item">
                            <h1>一等</h1>
                            <div><img class="interval-img" src="../../static/img/hui.png"></div>
                            <p>内容充实，结构鲜新颖内容充实结构</p>
                        </li>
                        <li class="grade-item">
                            <h1>一等</h1>
                            <div><img class="interval-img" src="../../static/img/hui.png"></div>
                            <p>内容充实，结构鲜新颖内容充实结构</p>
                        </li>
                        <li class="grade-item">
                            <h1>一等</h1>
                            <div><img class="interval-img" src="../../static/img/hui.png"></div>
                            <p>内容充实，结构鲜新颖内容充实结构</p>
                        </li>
                        <li class="grade-item">
                            <h1>一等</h1>
                            <div><img class="interval-img" src="../../static/img/hui.png"></div>
                            <p>内容充实，结构鲜新颖内容充实结构</p>
                        </li>
                </iscroll-view>
            </div>
            

import IScrollView from 'vue-iscroll-view'
import IScroll from 'iscroll'

mounted() {

    new IScroll('#scroll-items', { scrollX:false, scrollY:true, mouseWheel: true  });
},

.scroll-container{

height:3rem;
width:100%;
margin:.5rem 0;
position:relative;
z-index: 1;
overflow: hidden;

}
.scroll-items {

height:3rem;
overflow: hidden;
touch-action: none;
width:15rem;

}
.grade-item{

list-style:none;
height:2.8rem;
width:2.8rem;
border-radius: .3rem;
margin-left:.2rem;
box-shadow:0px 1px 10px #eee;
text-align: center;

}

Answer 1

你指的横向滑动是像APP一样的滑动切换页面吧，横向滑动切换页面用的其实是vue 的 transition 来实现的。 实现代码也不复杂，主要就是把你要滑动的几个路由定义为一个数组，然后利用路由的beforeEach，从里面获取from和to两个属性，拿到对应的名称，获取下标来计算到底是向左侧滑还是向右侧滑。然后设置动画，给要滑动的部分动态绑定动画名称，名称和你定义好的动画样式的名字一样就好了。参考代码：https://piexlmax.github.io/20...