vant选择器组件添加鼠标滚轮(多种解决方法包括生产环境)

这篇具有很好参考价值的文章主要介绍了vant选择器组件添加鼠标滚轮(多种解决方法包括生产环境)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

背景

平常做前端开发的应该知道,在前端组件中,有两种组件

  • 一种是针对移动端的组件

  • 另一种是针对pc的组件

​ 而pc的组件主要是对鼠标,键盘等操作的支持,而移动端组件常用的事件是触摸等事件

​ 这时,狗血的就来了,业务总是能用各种奇怪的想法让你来回串着开发

​ 我们有一款web是写在企业微信内部的h5网页,他使用的是移动端组件,但是这个应用由于企业微信手机端和电脑端都有,导致了业务也会用电脑操作的需求

​ 这天,他说选项组件为什么不能使用滚轮选择?而是只能使用拖拽?这样不好用,要改成也支持滚轮

解决路径

嫌麻烦,请直接跳到最后的解决方案,前面只是解决路程

vant组件库

​ 首先咱们就去看这个组件,也就是 vant官方库,他有一个能够兼容桌面的
vant滚动条,前端,javascript
​ 这咱们一看就来劲儿了呀,正好咱们要用鼠标滚轮,肯定能够实现鼠标滚轮模拟拖拽呀,咱们继续往下看下去

vant滚动条,前端,javascript

​ 然后发现本地项目中已经安了这个插件,但是滚轮效果仍然不生效,于是乎,这种方法不可以

gihtub issues

​ 当然,如果咱们只会查文档解决问题那么咱们就不是合格的程序员了,咱们也要学会去源码项目的issues,于是咱们去看下vant项目源码

​ 看到关于滚轮的有19个已解决,咱们就开心了,看来前人已经把路子探好了,咱们直接copy就行了

vant滚动条,前端,javascript

​ 然后看到开发大大的回答就哭了,没计划支持,以后也不会支持,

vant滚动条,前端,javascript

CSDN

​ csdn回答 这种方法也时候也能解决一些问题,但是他通过改node_modules解决的,这种方法涉及到如何把源码包抽离出来,进行更改,然后所有的引入源也更改,比较麻烦,而且害怕涉及到线上问题

hammerjs

​ 再后来就想着使用hammerjs模拟手指操作可以么?滚轮滚一个,然后模拟手指滑动多少距离,这样就不用麻烦判断边界问题和选中问题,但是通过引入hammerjs问题频频。例如获取dom的麻烦等等问题,并且无法监听你是否能够监听你是否模拟成功了,所以这种也不行

换组件!!

​ 换组件的话意味着重写,开发周期起码两天以上,这种特别麻烦

​ 我尝试使用

  • Mint UI
  • Cube UI
  • Vux
  • MUI

等等,但是都没发现,突然我想看看antd-mobile,哭了,发现他有,但是他是react组件,vue和react串着写,肯定不可能呀

vant滚动条,前端,javascript

chatGPT(解决方案1)

改组件

​ 其实上面换组件,和使用hammerjs都是他给我推荐的,可能是关键词不行?后来一个解决方法不用换组件,可以在原生写

原回答如下

  1. mounted 钩子函数中,获取到 Picker 组件的 DOM 元素,并添加 wheel 事件监听函数。

  2. wheel 事件监听函数中,根据鼠标滚轮滚动的方向来修改 Picker 组件的选中值。可以通过调用 scrollToOption 方法来实现滚动选中值的效果。

<template>
  <div>
    <van-picker
      ref="picker"
      :columns="columns"
      @change="handleChange"
      :default-index="currentIndex"
    />
  </div>

</template>

<script>
 // 如果不是v2记得把 :default-index="currentIndex"属性删掉,虽然我也不知道会出现什么错误
import { Picker } from 'vant';

export default {
  components: {
    [VanPicker.name]: Picker,
  },
  data() {
    return {
      columns: ['A', 'B', 'C', 'D', 'E'],
      currentIndex: 0
    };
  },
  mounted() {
    //获取到picker的dom
    //如果咱们在pouop里面写的话,就应该写到当弹窗出来再获取dom,否则获取不出来
    const pickerEl = this.$refs.picker.$el;
    pickerEl.addEventListener('wheel', this.handleWheel);
  },
  methods: {
    handleChange(value, index) {
      this.currentIndex = index;
      console.log('Selected value(value, index)', value, index);
    },
    handleWheel(event) {
      event.preventDefault();
      //Math.sign()函数,返回+/-1,表示正数还是负数,例如deltaY发现是-100,那么Math.sign返回也是-1,但是传入0那就是0
      const delta = Math.sign(event.deltaY);
      //获取最大下标
      const maxIndex = this.columns.length - 1;
      //计算当前下标,因为滚轮和拖拽是相反的逻辑,我们可以试下,触控板和鼠标滚轮就是相反的,所以要减
      const newIndex = this.currentIndex - delta;
      //边界处理
      if (newIndex >= 0 && newIndex <= maxIndex) {
        this.currentIndex = newIndex;
        //动画可能不流畅
        //vant 4的话
        this.$refs.picker.scrollToOption(newIndex);
        //vant3  this.$refs.picker.scrollToOption(newIndex);
        //vant2 的解决方案,我是以下的解决方法解决的
          //这个是控制动画的时长
         //  this.$refs.picker.$el.getElementsByClassName('van-picker-column__wrapper')[0].style.transitionDuration='800ms'
        //这个是给哪个变化添加属性,由于省事就添加all
      //this.$refs.picker.$el.getElementsByClassName('van-picker-column__wrapper')[0].style.transitionProperty='all'
      }
    }
  },
};
</script>

​ 在这个示例中,我们在 mounted 钩子函数中获取到了 Picker 组件的 DOM 元素,并添加了 wheel 事件监听函数。在 handleWheel 方法中,我们根据鼠标滚轮滚动的方向来修改 Picker 组件的选中值,并调用 scrollToOption 方法来实现滚动选中值的效果。最后,我们在 handleChange 方法中输出了选中的值和索引。

需要注意的是,在 handleWheel 方法中,我们调用了 event.preventDefault() 来阻止浏览器默认的滚动行为,以避免与 Picker 组件的滚动效果冲突。

如何全局生效?

使用混入,以下是全部代码,我的vant是2版本

// mixins.js 文件
//1.picker组件需要添加ref
//2.骗
export const myMixin = {
    methods: {
        //这个事件放到picker弹出的地方
        /***
         * picker滚动事件
         * @param picker picker的ref
         * @param cloum picker的数据
         * @param getCurFn 默认选中的index,是一个函数,因为需要拿到实时的
         * @param setIndex 设置index的方法
         * @returns {Promise<void>}
         */
        async getpicker(picker,cloum,getCurFn,setIndex){

            await new Promise(resolve => {setTimeout(resolve,100)})
            const pickerEl = this.$refs[picker].$el;
            pickerEl.addEventListener('wheel', (event)=>this.handleWheel(event,picker,cloum,getCurFn,setIndex));
            // console.log("pickerEl",pickerEl)
        },
        handleWheel(event,picker,cloum,getCurFn,setIndex) {
            // debugger
            event.preventDefault();
            const delta = Math.sign(event.deltaY);
            // debugger
            const maxIndex = cloum.length - 1;
            const newIndex = getCurFn() + delta;
            // debugger
            this.$refs[picker].$el.getElementsByClassName('van-picker-column__wrapper')[0].style.transitionDuration='800ms'
            this.$refs[picker].$el.getElementsByClassName('van-picker-column__wrapper')[0].style.transitionProperty='all'
            if (newIndex >= 0 && newIndex <= maxIndex) {
                // this.popupData.defaultIndex = newIndex;
                // console.log(" setIndex", setIndex,newIndex)
                setIndex(newIndex)
            }
        },
    }
};

调用(需要再全部引用的地方都调用)

 this.getpicker('picker',this.popupData.comSurList,()=>this.popupData.defaultIndex,(index)=>this.popupData.defaultIndex=index)

我们能够看到他的缺点了,需要再所有的地方都去调用一次

依赖包打补丁(最终解决,最简单)

更新vant到最新版本

​ 更新vant之后,我们可以发现vant的picker组件已经支持滚动滑轮了,但是每个滑轮滑动的过大,可能一次跳过两个选项,我们要进行修改

改源码

​ 改源码的方式有以下几种

  1. 提issues等待作者更新(莫不是在开玩笑)

  2. 将源码粘贴到component文件,然后全局改引用的位置(有一点点麻烦,项目也会变大,也有通过在webpack添加alis添加别名直接全局修改引用)

  3. 将源码仓库fork到自己的仓库,然后修改源码后,然后在自己项目中的npm修改一下包的位置后面的rep改成自己仓库的地址(但是记住千万别删这个仓库,否则以后你的项目就启不起来了)vant滚动条,前端,javascript

  4. 通过patch-package对源码包打补丁

可以先了解一下patch-package 的介绍

说白了就三步

  1. 装依赖
  2. 直接改源码
  3. 执行命令将改的源码变成diff文件
  4. packagejson添加钩子执行
安装一下patch package
npm i patch-package

yarn add patch-package postinstall-postinstall
改源码

目录 node_modules->vant->picker->PickerColumn.js

在node_modules中找到vant(注意不是@vant,那个可能是vant的一些补丁包)

可以看到他的以下结构

vant滚动条,前端,javascript

全局搜索一下wheel,找到onMouseWheel的方法,可以除以一个倍数,让其流畅

vant滚动条,前端,javascript

编译补丁
npx patch-package package-name

此时我们可以看到根目录已经添加了一个patches文件了,查看文件发现是我们修改的相关位置

vant滚动条,前端,javascript

添加钩子

默认会在packagejson中scripts添加一个钩子函数

"postinstall": "patch-package",

他的意思是安装依赖的时候立马支持patch-package打补丁

此时就可以测试一下,将node_modules删除后测试一下是否成功了

异常解决

pm WARN lifecycle xxx.xxx.com@0.1.0~postinstall: cannot run in wd xxx.xxx.com@0.1.0 patch-package (wd=/node)

我们部署线上的时候可能会出问题,因为有的docker安装依赖的时候工作目录可能不一致,可以尝试将钩子函数添加一个打包前执行,此时就会正常执行了

  "prebuild": "patch-package",

由于项目可能需要有不同环境的打包命令,所以可以以下

vant滚动条,前端,javascript

 	//开发环境需要
	"postinstall": "patch-package",
	//打包需要
    "prebuild": "patch-package",
    "prebuild:test": "patch-package",
    "prebuild:feature1": "patch-package",
    "prebuild:feature2": "patch-package",
    "prebuild:prod": "patch-package"

于此,这项目就可以告别一段落文章来源地址https://www.toymoban.com/news/detail-792764.html

到了这里,关于vant选择器组件添加鼠标滚轮(多种解决方法包括生产环境)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • android鼠标滚轮事件监听方法

    2024年02月08日
    浏览(38)
  • 小程序使用Vant组件时报错Failed to load font解决方法

    小程序引用Vant组件后每次重新编译都会报错 [渲染层网络层错误] Failed to load font https://at.alicdn.com/t/font_2553510_iv4v8nulyz.woff2?t=1649083952952 虽然不影响小程序运行,但看着很难受 按照网上教程所说的request合法域名添加“https://at.alicdn.com”后还是会报错,干脆不用网络请求了,直接

    2024年02月08日
    浏览(60)
  • 鼠标上下滚轮不灵敏的修复方法

    在浏览网页的时候,经常需要使用鼠标来查看网页中的内容,但是有时候也会出现意外,比如鼠标上下滚轮出现问题失灵了,这该怎么办?不用着急,下面就一起来看看解决的办法。 方法一:针对Mac电脑 打开安全性与隐私性的辅助功能,勾选Logitech Options Daemon前面的勾即可。

    2024年02月13日
    浏览(52)
  • vue 拖动、缩放容器组件,支持移动端双指缩放和PC端鼠标滚轮缩放

    本组件基于CSS的transform实现。移动端监听touch事件(单指移动,双指移动+缩放),PC端监听mouse事件(移动)和滚动事件wheel(缩放),更新transform的translateX/translateY/scale值,从而实现缩放、移动。由于transform不会产生重排,因此不节流也可以有很好的性能,用户体验就像德芙

    2024年02月03日
    浏览(55)
  • 使用Vue2开发一个图片预览组件,支持多图切换、缩放旋转、鼠标滚轮、键盘按键、拖动等等操作

    话不多说,咱们赶紧来开启本章的内容,这次小编给各位带来的依旧是实用类文章,分享如何开发一个完整的 图片预览组件 ,它支持多图切换、放大缩小、旋转、鼠标滚轮操作、键盘按键控制、拖动等等的功能,并且使用方便、易扩展,零依赖。 项目演示技术小编采用的是

    2024年02月09日
    浏览(78)
  • 鼠标滚轮失灵怎么办?电脑用户必备教程(4个方法)

    “为什么我的鼠标明明可以用,但是滚轮失灵了,上下滑动屏幕特别不方便,想问下有什么方法可以解决这个问题吗?希望大家给我点建议!” 鼠标是我们计算机使用中的关键设备之一,而鼠标滚轮则是提高工作效率和便捷性的重要组成部分。然而,有时候我们可能会遇到鼠

    2024年02月04日
    浏览(48)
  • 解决 Ubuntu 22 中使用 Alt + Tab 切换窗口后,鼠标滚轮的滚动错误Bug行为,Ubuntu 22 中鼠标滚轮异常跳动

    安装并运行  imwheel 可以解决这个问题。 必须在每次开机时启动它(或者在应用程序中添加它来开机启动)。 可以用 pgrep -lf imwheel 来看它是否在运行;可以用 pkill imwheel 停止它。 遇到无法通过ctrl+滚轮进行缩放的问题, 可以参考:  ctrl+mouse wheel does not zoom in or out · Issue #134 ·

    2024年01月16日
    浏览(58)
  • 解决Adobe Acrobat鼠标滚轮太慢的问题

    使用acrobat的时候,鼠标滚动的速度奇慢无比,并且我在首选项里也没找到调快速度的方法。 网上给出的解决方案有 单页滚动 和 调整鼠标滚动行数 ,但是单页滚动治标不治本,调整行数又会影响其余软件的使用。 这里我们使用X-Mouse,官网地址 下载完成后,首先点击 Add 来

    2024年02月12日
    浏览(49)
  • 小程序-基于vant的Picker组件实现省市区选择

    因@vant/area-data部分的市/区数据跟后台使用的高德/腾讯省市区有所出入,故须保持跟后台用同一份数据,所以考虑以下几个组件 1、Area 2、Cascader 3、Picker 因为使用的是高德地图的省市区json文件,用area的话修改结构代价太大,费时费力。接着尝试使用Cascader组件,但这个组件每

    2024年02月12日
    浏览(47)
  • vant 组件,时间选择器的应用 van-datetime-picker

    如图, 点击箭头弹出时间选择器, 选完时间后显示在页面       最后visitTime传参是字符串    \\\"2023-01-17 17:43\\\"

    2024年02月03日
    浏览(52)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包