滚动视图容器需要满足的三个条件：
- 滚动视图大小固定，且设置overflow:hidden
- 在滚动视图内套一层滚动容器，如果需要x轴滚动，需要设置超出滚动视图的宽
- 所有需要滚动的内容，全部放在滚动容器内部
一、布局部分：
html代码
//这是滚动视图
<div class="Initials" ref="scroll">
//这是滚动容器
<div class="InitialsSon">
//以下是数据渲染，根据自己的需求而设定数据
<span >首字母</span>
<span v-for="(item,index) in initials" :key="index"
:class="{ active: item === select2.name }"
@click="change2(item)">{{item}}</span>
</div>
</div>
css代码
//以下是用scss写的，可以根据自己的目标格式进行修改
<style scoped lang="scss">
//滚动视图
.Initials {
width: 100%;
height: 25px;
overflow: hidden;
//数据
span {
margin-right: 3px;
display: inline-block
}
//滚动容器
>div{
width: 150%;
}
}
</style>
iscroll插件的下载和引入
- 在GitHub上下载iscroll插件压缩包并解压
- 取出当中的iscroll.js文件并在页面中引入
- 构建IScroll实例
二、JS部分：
//引入插件和实例
import "../iscroll"
import IScroll from "../iscroll"
mounted() {
const myScroll = new IScroll(this.$refs.scroll, {
//按照需求添加横向滚动的配置项
scrollX: true
});
//更新
myScroll.refresh();
}
};
一个完整的横向滚动视图就构建好啦！
