在Vue中使用iscroll实现滚动视图效果

滚动视图容器需要满足的三个条件：

• 滚动视图大小固定，且设置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();
  }
};

一个完整的横向滚动视图就构建好啦！