Swiper.js 报错: Uncaught TypeError: Cannot read properties of undefined (reading 'onTouchEnd') at Swiper.onTouchEnd 作者: Chuwen 时间: 2021-11-30 分类: JavaScript 评论 Uncaught TypeError: Cannot read properties of undefined (reading 'onTouchEnd') at Swiper.onTouchEnd  当我百思不得其解的时候，想到自己改动了 `freeMode` 参数部分，然后导致手动滑动的时候，就报出了这个错误。 原因是因为是按模块导入的，没有导入 `freeMode` 模块，只需要导入并使用即可： ```js import 'swiper/css'; import Swiper, {Autoplay, FreeMode} from 'swiper'; Swiper.use([Autoplay, FreeMode]); ```
解决 Swiper.js 无限滚动（跑马灯）手动滑动后会干扰移动效果 作者: Chuwen 时间: 2021-11-30 分类: JavaScript 评论 ### 预期效果 向左、向右滑动后，松开鼠标/手，必须按照初始移动方向移动，并且移动速度不能有太大的变化 ### 解决办法就是： 设置 `freeMode.momentumRatio` 设置的小一点，比如 `0.01` 设置 `freeMode.momentumBounce` 为 `false` 在线预览：https://codepen.io/printnow/pen/ZEXEajW ** freeMode** 参数： | 参数 | 类型 | 默认值 | 备注 | | ------------------------------------------------------------ | --------------------------- | ------ | ------------------------------------------------------------ | | [enabled](https://swiperjs.com/swiper-api#param-freeMode-enabled) | `boolean | FreeModeOptions` | 启用自由模式功能。对象的自由模式参数或布尔值为 `true` 以启用默认设置。 | | [minimumVelocity](https://swiperjs.com/swiper-api#param-freeMode-minimumVelocity) | `number` | 0.02 | 触发自由模式动量所需的最小接触移动速度 | | [momentum](https://swiperjs.com/swiper-api#param-freeMode-momentum) | `boolean` | true | 如果启用，则在释放滑块后，滑块将继续移动一段时间 | | **[momentumBounce](https://swiperjs.com/swiper-api#param-freeMode-momentumBounce)** | `boolean` | true | 如果要在自由模式下禁用动量反弹，请设置为 `false` | | [momentumBounceRatio](https://swiperjs.com/swiper-api#param-freeMode-momentumBounceRatio) | `number` | 1 | 值越大，动量反弹效应越大 | | **[momentumRatio](https://swiperjs.com/swiper-api#param-freeMode-momentumRatio)** | `number` | 1 | 释放滑块后，该值越大，动量距离越大 | | [momentumVelocityRatio](https://swiperjs.com/swiper-api#param-freeMode-momentumVelocityRatio) | `number` | 1 | 释放滑块后，该值越高，动量速度越大 | | [sticky](https://swiperjs.com/swiper-api#param-freeMode-sticky) | `boolean` | false | 设置为 `true` 可在自由模式(`freeMode`)下启用捕捉幻灯片位置 | ### JS 代码： > 如果你是按照模块导入的，一定要导入 `FreeMode` 模块！ ```js import 'swiper/css'; import Swiper, {Autoplay, FreeMode} from 'swiper'; Swiper.use([Autoplay, FreeMode]); let itemCount = parseInt(u('.swiper-wrapper').data('item-count')); const swiper = new Swiper("#reviews-list", { width: window.innerWidth, resistanceRatio: 0, speed: 10000, observer: true, observeParents: true, slidesPerGroup: 1, // autoplay autoplay: { delay: 0, // 每个图片移动完成后间隔 disableOnInteraction: false // 触摸后是否停止自动移动 }, freeMode: { enabled: true, momentumBounce: false,//主要是这2个参数 momentumRatio: 0.01//主要是这2个参数 }, // 不贴合 // loop loop: true, // 循环 // grid centeredSlides: true, slidesPerView: 'auto',//5 spaceBetween: 25, loopedSlides: itemCount, loopAdditionalSlides: itemCount, }); ``` #### HTML 代码例子： ```html <!doctype html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Swiper.js 无限跑马灯</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@7.3.1/swiper-bundle.min.css"/> <script src="https://cdn.jsdelivr.net/npm/swiper@7.3.1/swiper-bundle.min.js"></script> <style> #review-list { width: 100%; height: 100%; } .review-item { width: 300px; height: 180px; background-color: #ff4081; color: white; display: flex; align-items: center; justify-content: space-around; } </style> </head> <body> <div id="review-list"> <div class="swiper-wrapper"> <div class="review-item swiper-slide">评论1</div> <div class="review-item swiper-slide">评论2</div> <div class="review-item swiper-slide">评论3</div> <div class="review-item swiper-slide">评论4</div> <div class="review-item swiper-slide">评论5</div> <div class="review-item swiper-slide">评论6</div> <div class="review-item swiper-slide">评论7</div> <div class="review-item swiper-slide">评论8</div> <div class="review-item swiper-slide">评论9</div> <div class="review-item swiper-slide">评论10</div> </div> </div> <script> const swiper = new Swiper("#review-list", { width: window.innerWidth, resistanceRatio: 0, speed: 10000, observer: true, observeParents: true, slidesPerGroup: 1, // autoplay autoplay: { delay: 0, // 每个图片移动完成后间隔 disableOnInteraction: false // 触摸后是否停止自动移动 }, freeMode: { enabled: true, momentumBounce: false, momentumRatio: 0.01, momentumVelocityRatio: 0.01 }, // 不贴合 // loop loop: true, // 循环 // grid centeredSlides: true, slidesPerView: 'auto',//5 spaceBetween: 25, }); </script> </body> </html> ```
Vue.js 组件 script 分离 作者: Chuwen 时间: 2021-10-14 分类: Vue.js 评论 ## 需要 通常情况下，在单 `.vue` 文件开发很方便，但是当业务逻辑起来了，那么经常需要修改 `script` 和 `template` 部分，用编辑器分屏也不是那么好操作，故有了**组件 script 分离** ## 例子 ### `TableList.vue` ```vue <template> <div> <h1>测试 {{test}}</h1> </div> </template> <script> import index from './index' export default index </script> ``` ### `index.js` > 在 `TableList.vue` 同级创建个如 `index.js` 文件 ```js export default { name: "TableList", components: { 'pagination': Pagination }, data(){ return { test: 'test' } } } ```
Vue.js 下拉框组件当点击菜单栏外的时候关闭菜单 作者: Chuwen 时间: 2021-08-23 分类: Vue.js,JavaScript 评论 ## Menu.vue > 菜单组件 >  ``` <template> <div class="menu" v-if="show"> <!--假设是菜单组件......--> </div> </template> <script> export default { data(){ return { show: true,//是否显示菜单 } }, mounted() { // 在这里加上就可以了 document.addEventListener('click', (e) => { // 如果当前组件(菜单组件)的 DOM “不包含” 当前点击的 DOM // 就关闭显示菜单 if (!this.$el.contains(e.target)) this.show = false }) } } </script> ```
Vue.js 使用 form 表单，按下 Enter 或 Submit 按钮阻止跳转页面 作者: Chuwen 时间: 2021-08-07 分类: Vue.js,JavaScript 1 条评论 #### 添加 `.prevent` 事件修饰符即可阻止跳转 [https://cn.vuejs.org/v2/guide/events.html#事件修饰符](https://cn.vuejs.org/v2/guide/events.html#事件修饰符 "https://cn.vuejs.org/v2/guide/events.html#事件修饰符") > 使用 `form` 的好处还有一点就是，在 input 按下回车(Enter)即可提交表单 ```vue <!--添加 .prevent 修饰符阻止跳转--> <!--注意 login 是自定义函数--> <form @submit.prevent="login"> <input type="text" /> <button type="submit">提交</button> </form> ```