vue项目pc端实现横向拖动

泥鸽鸽

已于 2022-10-17 15:38:46 修改

阅读量1.4k

点赞数

文章标签： javascript vue.js 前端

于 2022-10-17 00:52:23 首次发布

本文链接：https://blog.csdn.net/weixin_41568816/article/details/127355828

版权

vue项目pc端实现横向拖动

问题背景：手机端的横向拖动是默认存在的电脑端本生也是可以进行横向拖动但是必须依赖于滚动条如果人为将滚动条去除又会导致无法拖动所以我使用iscroll插件以及vue指令解决了该问题
先看效果图

pc端横向拖动效果

步骤 1、安装iscroll npm install iscroll --save 我安装的是iscroll@5.2.0

2、在项目目录底下新建一个vIscroll.js 直接复制以下内容

const IScroll = require('iscroll')
const VIScroll = {
   
 install: function (Vue, options) {
   
 Vue.directive('iscroll', {
   
 inserted: function (el, binding, vnode) {
   
 let callBack
 let iscrollOptions = options
// vue组件中绑定的两个参数 option、instanc
 const option = binding.value && binding.value.option
 const func = binding.value && binding.value.instance
 // 判断输入参数
 const optionType &#