Use Lodash to filter whether the object value is undefind or null Author: Chuwen Time: 2023-03-31 Classification: JavaScript comment <trans data-src="## 功能实现">##Function realization</trans> <trans data-src="我们使用 Lodash 的 [omitBy](">We use Lodash's [omitBy]（</trans> <trans data-src="https://www.lodashjs.com/docs/lodash.omitBy">https://www.lodashjs.com/docs/lodash.omitBy</trans> <trans data-src=" "omitBy") 方法即可实现">"OmitBy") method</trans> <trans data-src="参数">parameter</trans> <trans data-src="1. `object` (Object): 来源对象。">1. 'object' (Object): source object.</trans> <trans data-src="2. `[predicate=_.identity]` (Function): 调用每一个属性的函数。">2. '[predict=_. identity]' (Function): Call the function of each attribute.</trans> <trans data-src="（*也就是当满足这个条件将会被过滤掉*）">(* That is, when this condition is met, it will be filtered out *)</trans> <trans data-src="```ts">```ts</trans> <trans data-src="const { omitBy } = require("lodash")">const { omitBy } = require("lodash")</trans> <trans data-src="const filterParams = {">const filterParams = {</trans> <trans data-src="day: 1,">day: 1,</trans> <trans data-src="min: undefined,">min: undefined,</trans> <trans data-src="max: null,">max: null,</trans> <trans data-src="age: """>age: ""</trans> <trans data-src="}">}</trans> <trans data-src="omitBy(filterParams, (value, key) => value === undefined || value === null)">omitBy(filterParams, (value, key) => value === undefined || value === null)</trans> <trans data-src="// 运行结果：{ day: 1, age: '' }">//Running result: {day: 1, age: ''}</trans> <trans data-src="```">```</trans>
Shopify Partner uses JS to create a store Author: Chuwen Time: 2022-12-28 Classification: JavaScript comment <trans data-src="# Shopify Partner 使用 JS 一键创建店铺">#Shopify Partner uses JS to create a store</trans> <trans data-src="免去繁琐的操作步骤">Eliminate tedious operation steps</trans> <trans data-src="### 第 1 步">###Step 1</trans> <trans data-src="打开 ">Open</trans> <trans data-src="https://partners.shopify.com/organizations">https://partners.shopify.com/organizations</trans> <trans data-src="> 如果没有登录需要先登录">>If you have not logged in, you need to log in first</trans> <trans data-src="### 第 2 步">###Step 2</trans> <trans data-src="打开浏览器**开发者工具**，以 Chrome 为例，按 F12 即可打开">Open the browser * * developer tool * *. Take Chrome for example, press F12 to open it</trans> <trans data-src="### 第 3 步">###Step 3</trans> <trans data-src="> 请注意修改代码的 `subdomain` 和 `storeName` 值">>Please pay attention to modifying the 'subdomain' and 'storeName' values of the code</trans> <trans data-src="在**开发者工具**找到 `Console` Tab，然后粘贴以下代码，按 `Enter` 键运行即可">Find the 'Console' Tab in * * Developer Tools * *, paste the following code, and press the 'Enter' key to run</trans> <trans data-src="### 第 4 步">###Step 4</trans> <trans data-src="等待大概 20s 左右，因为创建店铺需要比较长的时间，创建成功后，会自动打开你新创建的店铺">Wait about 20 seconds, because it takes a long time to create a store. After the store is successfully created, it will automatically open your newly created store</trans> <trans data-src="```js">```js</trans> <trans data-src="var organizationID = window.">var organizationID = window.</trans> <trans data-src="RailsData.user.organizationID">RailsData.user.organizationID</trans> <trans data-src="var subdomain = 'test-008'">var subdomain = 'test-008'</trans> <trans data-src="var storeName = subdomain.replaceAll("-", " ").toUpperCase()">var storeName = subdomain.replaceAll("-", " ").toUpperCase()</trans> <trans data-src="fetch(`">fetch(`</trans> <trans data-src="https://partners.shopify.com/">https://partners.shopify.com/</trans> <trans data-src="${organizationID}/api/graphql`, {">${organizationID}/api/graphql`, {</trans> <trans data-src="headers: {">headers: {</trans> <trans data-src="'content-type': 'application/json',">'content-type': 'application/json',</trans> <trans data-src="'x-csrf-token': document.querySelector(`meta[name="csrf-token"]`).content">'x-csrf-token': document.querySelector(`meta[name="csrf-token"]`).content</trans> <trans data-src="},">},</trans> <trans data-src="body: JSON.stringify({">body: JSON.stringify({</trans> <trans data-src="operationName: "ShopCreate",">operationName: "ShopCreate",</trans> <trans data-src="variables: {">variables: {</trans> <trans data-src="input: {">input: {</trans> <trans data-src="storeType: "PARTNER_TEST_STORE",">storeType: "PARTNER_TEST_STORE",</trans> <trans data-src="developerPreviewHandle: "checkout_extensibility",">developerPreviewHandle: "checkout_extensibility",</trans> <trans data-src="storeName,">storeName,</trans> <trans data-src="address: {">address: {</trans> <trans data-src="countryCode: 'US'// 国家">CountryCode:'US'//Country</trans> <trans data-src="},">},</trans> <trans data-src="subdomain,">subdomain,</trans> <trans data-src="signupSourceDetails: 'test_app_or_theme'">signupSourceDetails: 'test_app_or_theme'</trans> <trans data-src="}">}</trans> <trans data-src="},">},</trans> <trans data-src="query: "mutation ShopCreate($input: ShopCreateInput!) {\n shopCreate(input: $input) {\n redirectUrl\n userErrors {\n field\n message\n __typename\n }\n __typename\n }\n}\n"">query: "mutation ShopCreate($input: ShopCreateInput!) {\n shopCreate(input: $input) {\n redirectUrl\n userErrors {\n field\n message\n __typename\n }\n __typename\n }\n}\n"</trans> <trans data-src="}),">}),</trans> <trans data-src="method: 'POST',">method: 'POST',</trans> <trans data-src="mode: 'cors',">mode: 'cors',</trans> <trans data-src="credentials: 'include'">credentials: 'include'</trans> <trans data-src="})">})</trans> <trans data-src=".then((response) => response.json())">.then((response) => response.json())</trans> <trans data-src=".then((data) => {">.then((data) => {</trans> <trans data-src="console.log('创建店铺成功！', data);">Console. log ('Store created successfully! ', data);</trans> <trans data-src="window.open(data.shopifyCreate.redirectUrl, "_blank")">window.open(data.shopifyCreate.redirectUrl, "_blank")</trans> <trans data-src="})">})</trans> <trans data-src=".catch((error) => {">.catch((error) => {</trans> <trans data-src="console.error('创建店铺失败！', error);">Console. error ('Failed to create the store! ', error);</trans> <trans data-src="alert(`创建店铺失败！${error}`)">Alert (` Failed to create the store! ${error} `)</trans> <trans data-src="});">});</trans> <trans data-src="```">```</trans> <trans data-src="---">---</trans> <trans data-src="Gist: ">Gist: </trans> <trans data-src="https://gist.github.com/PrintNow/067f1d494a2f723e1486d9527997942ca">https://gist.github.com/PrintNow/067f1d494a2f723e1486d9527997942ca</trans>
Laravel mix+TailwindCSS Run npm run watch Infinitely recompile CSS Author: Chuwen Time: 2022-05-21 Classification: JavaScript comment <trans data-src="先说答案，参考的是：">First, the answer is:</trans> <trans data-src="https://github.com/laravel-mix/laravel-mix/issues/1942">https://github.com/laravel-mix/laravel-mix/issues/1942</trans> <trans data-src="## 序言">##Preamble</trans> <trans data-src="最近在筹划着本博客新主题设计，想运用现代化前端技术，再加之对 Laravel mix 有一定的使用经验，所以选择了 Laravel mix 作为脚手架">Recently, I am planning a new theme design for this blog. I want to use modern front-end technology and have some experience in using Laravel mix, so I chose Laravel mix as the scaffold</trans> <trans data-src="## 问题">##Question</trans> <trans data-src="`webpack.mix.js` 配置：">`Webpack. mix. js ` Configuration:</trans> <trans data-src="```js">```js</trans> <trans data-src="const mix = require('laravel-mix');">const mix = require('laravel-mix');</trans> <trans data-src="require('mix-tailwindcss');">require('mix-tailwindcss');</trans> <trans data-src="mix.disableSuccessNotifications()">mix.disableSuccessNotifications()</trans> <trans data-src=".ts('src/app.ts', 'theme/assets')">.ts('src/app.ts', 'theme/assets')</trans> <trans data-src=".setPublicPath('theme/assets')">.setPublicPath('theme/assets')</trans> <trans data-src=".sass("src/assets/sass/app.scss", "theme/assets")">.sass("src/assets/sass/app.scss", "theme/assets")</trans> <trans data-src=".tailwind('./tailwind.config.js')">.tailwind('./tailwind.config.js')</trans> <trans data-src=".webpackConfig({">.webpackConfig({</trans> <trans data-src="module: {">module: {</trans> <trans data-src="rules: [">rules: [</trans> <trans data-src="{">{</trans> <trans data-src="test: /\.tsx?$/,">test: /\.tsx?$/,</trans> <trans data-src="loader: "ts-loader",">loader: "ts-loader",</trans> <trans data-src="exclude: /node_modules/">exclude: /node_modules/</trans> <trans data-src="}">}</trans> <trans data-src="]">]</trans> <trans data-src="}">}</trans> <trans data-src="})">})</trans> <trans data-src="mix.browserSync({">mix.browserSync({</trans> <trans data-src="proxy: '127.0.0.1:3792',">proxy: '127.0.0.1:3792',</trans> <trans data-src="files: ["theme/**/*.php", "src/*.js", "src/*.css"],">files: ["theme/**/*.php", "src/*.js", "src/*.css"],</trans> <trans data-src="open: false">open: false</trans> <trans data-src="})">})</trans> <trans data-src="```">```</trans> <trans data-src="`tailwind.config.js` 配置：">`Tailwind. config. js ` Configuration:</trans> <trans data-src="```js">```js</trans> <trans data-src="module.exports = {">module.exports = {</trans> <trans data-src="content: require('fast-glob').sync([">content: require('fast-glob').sync([</trans> <trans data-src="'./">'./</trans> <trans data-src="src/**/*.">src/**/*.</trans> <trans data-src="{html,js,ts}',">{html,js,ts}',</trans> <trans data-src="'./">'./</trans> <trans data-src="node_modules/tw-elements/dist/js/**/*.js',">node_modules/tw-elements/dist/js/**/*.js',</trans> <trans data-src="'./">'./</trans> <trans data-src="theme/**/*.php'">theme/**/*.php'</trans> <trans data-src="]),">]),</trans> <trans data-src="theme: {">theme: {</trans> <trans data-src="extend: {},">extend: {},</trans> <trans data-src="},">},</trans> <trans data-src="plugins: [">plugins: [</trans> <trans data-src="require('tw-elements/dist/plugin')">require('tw-elements/dist/plugin')</trans> <trans data-src="],">],</trans> <trans data-src="}">}</trans> <trans data-src="```">```</trans> <trans data-src="使用上述的配置，然后运行 `npm run watch`，就看到终端一直闪烁着编译结果，然后电脑风扇呼呼狂啸：">Use the above configuration, and then run 'npm run watch'. The terminal flashes the compilation results all the time, and then the computer fan roars:</trans> <trans data-src="!">!</trans> <trans data-src="[](">[](</trans> <trans data-src="https://cdn.nowtime.cc/2022/05/21/912061657.png">https://cdn.nowtime.cc/2022/05/21/912061657.png</trans> <trans data-src=")">)</trans> <trans data-src="## 解决方案">##Solution</trans> <trans data-src="还好我用 Google + 英文搜索（用的蹩脚英文 ?），然后找到了这个 **issues**：">Fortunately, I searched in Google+English (in poor English?) and found this * * issues * *:</trans> <trans data-src="https://github.com/laravel-mix/laravel-mix/issues/1942">https://github.com/laravel-mix/laravel-mix/issues/1942</trans> <trans data-src="翻啊翻，发现这个人给出的解决方案是可行的：">Flip around and find that the solution given by this person is feasible:</trans> <trans data-src="https://github.com/laravel-mix/laravel-mix/issues/1942#issuecomment">https://github.com/laravel-mix/laravel-mix/issues/1942#issuecomment</trans> <trans data-src="-998148038">-998148038</trans> <trans data-src="1. 首先安装 `glob`">1. Install ` global first`</trans> <trans data-src="- npm：`npm install fast-glob -D`">- npm：`npm install fast-glob -D`</trans> <trans data-src="- yarn：`yarn add fast-glob -D`">- yarn：`yarn add fast-glob -D`</trans> <trans data-src="2. 然后将 `tailwind.config.js` 改为：">2. Then change 'tailwind. config. js' to:</trans> <trans data-src="```js">```js</trans> <trans data-src="module.exports = {">module.exports = {</trans> <trans data-src="// 看这里">//Look here</trans> <trans data-src="content: require('fast-glob').sync([">content: require('fast-glob').sync([</trans> <trans data-src="'./">'./</trans> <trans data-src="src/**/*.">src/**/*.</trans> <trans data-src="{html,js,ts}',">{html,js,ts}',</trans> <trans data-src="'./">'./</trans> <trans data-src="node_modules/tw-elements/dist/js/**/*.js',">node_modules/tw-elements/dist/js/**/*.js',</trans> <trans data-src="'./">'./</trans> <trans data-src="theme/**/*.php'">theme/**/*.php'</trans> <trans data-src="]),">]),</trans> <trans data-src="theme: {">theme: {</trans> <trans data-src="extend: {},">extend: {},</trans> <trans data-src="},">},</trans> <trans data-src="plugins: [],">plugins: [],</trans> <trans data-src="}">}</trans> <trans data-src="```">```</trans> <trans data-src="然后就完美解决了">And then it was perfectly solved</trans>
Swiper.js reports an error: Uncaught TypeError: Cannot read properties of undefined (reading 'onTouchEnd') at Swiper.onTouchEnd Author: Chuwen Time: 2021-11-30 Classification: JavaScript comment <trans data-src="Uncaught TypeError: Cannot read properties of undefined (reading 'onTouchEnd') at Swiper.onTouchEnd">Uncaught TypeError: Cannot read properties of undefined (reading 'onTouchEnd') at Swiper.onTouchEnd</trans> <trans data-src="!">!</trans> <trans data-src="[Uncaught TypeError: Cannot read properties of undefined (reading 'onTouchEnd') at Swiper.onTouchEnd](">[Uncaught TypeError: Cannot read properties of undefined (reading 'onTouchEnd') at Swiper.onTouchEnd](</trans> <trans data-src="https://cdn.nowtime.cc/2021/11/30/1438435762.png">https://cdn.nowtime.cc/2021/11/30/1438435762.png</trans> <trans data-src=")">)</trans> <trans data-src="当我百思不得其解的时候，想到自己改动了 `freeMode` 参数部分，然后导致手动滑动的时候，就报出了这个错误。">When I was puzzled and thought that I had changed the 'freeMode' parameter part, and then caused manual sliding, I reported this error.</trans> <trans data-src="原因是因为是按模块导入的，没有导入 `freeMode` 模块，只需要导入并使用即可：">The reason is that the module is imported by module, and the 'freeMode' module is not imported. You only need to import and use it:</trans> <trans data-src="```js">```js</trans> <trans data-src="import 'swiper/css';">import 'swiper/css';</trans> <trans data-src="import Swiper, {Autoplay, FreeMode} from 'swiper';">import Swiper, {Autoplay, FreeMode} from 'swiper';</trans> <trans data-src="Swiper.use([Autoplay, FreeMode]);">Swiper.use([Autoplay, FreeMode]);</trans> <trans data-src="```">```</trans>
Solve the problem that Swiper.js unlimited rolling (running lights) will interfere with the movement effect after manual sliding Author: Chuwen Time: 2021-11-30 Classification: JavaScript comment <trans data-src="### 预期效果">###Expected effect</trans> <trans data-src="向左、向右滑动后，松开鼠标/手，必须按照初始移动方向移动，并且移动速度不能有太大的变化">After sliding left and right, release the mouse/hand and move according to the initial moving direction, and the moving speed cannot change too much</trans> <trans data-src="### 解决办法就是：">###The solution is:</trans> <trans data-src="设置 `freeMode.momentumRatio` 设置的小一点，比如 `0.01`">Set the 'freeMode. momentumRatio' to a smaller value, such as' 0.01`</trans> <trans data-src="设置 `freeMode.momentumBounce` 为 `false`">Set 'freeMode. momentumBounce' to 'false`</trans> <trans data-src="在线预览：">Online preview:</trans> <trans data-src="https://codepen.io/printnow/pen/ZEXEajW">https://codepen.io/printnow/pen/ZEXEajW</trans> <trans data-src="** freeMode** 参数：">**FreeMode * * Parameters:</trans> <trans data-src="| 参数 | 类型 | 默认值 | 备注 |">|Parameter | Type | Default Value | Remarks|</trans> <trans data-src="| ------------------------------------------------------------ | --------------------------- | ------ | ------------------------------------------------------------ |">| ------------------------------------------------------------ | --------------------------- | ------ | ------------------------------------------------------------ |</trans> <trans data-src="| [enabled](">| [enabled](</trans> <trans data-src="https://swiperjs.com/swiper-api#param">https://swiperjs.com/swiper-api#param</trans> <trans data-src="-freeMode-enabled) | `boolean | FreeModeOptions` | 启用自由模式功能。">-FreeMode enabled) | ` boolean | FreeModeOptions ` | Enable the free mode function.</trans> <trans data-src="对象的自由模式参数或布尔值为 `true` 以启用默认设置。 |">The free mode parameter or boolean value of the object is' true 'to enable the default setting|</trans> <trans data-src="| [minimumVelocity](">| [minimumVelocity](</trans> <trans data-src="https://swiperjs.com/swiper-api#param">https://swiperjs.com/swiper-api#param</trans> <trans data-src="-freeMode-minimumVelocity) | `number` | 0.02 | 触发自由模式动量所需的最小接触移动速度 |">-FreeMode minimumVelocity) | ` number ` | 0.02 | The minimum contact movement speed required to trigger free mode momentum|</trans> <trans data-src="| [momentum](">| [momentum](</trans> <trans data-src="https://swiperjs.com/swiper-api#param">https://swiperjs.com/swiper-api#param</trans> <trans data-src="-freeMode-momentum) | `boolean` | true | 如果启用，则在释放滑块后，滑块将继续移动一段时间 |">-FreeMode momentum) | ` boolean '| true | If enabled, the slider will continue to move for some time after releasing it|</trans> <trans data-src="| **[momentumBounce](">| **[momentumBounce](</trans> <trans data-src="https://swiperjs.com/swiper-api#param">https://swiperjs.com/swiper-api#param</trans> <trans data-src="-freeMode-momentumBounce)** | `boolean` | true | 如果要在自由模式下禁用动量反弹，请设置为 `false` |">-FreeMode momentumBounce) * * | ` boolean '| true | If you want to disable momentum bounce in free mode, please set it to ` false'|</trans> <trans data-src="| [momentumBounceRatio](">| [momentumBounceRatio](</trans> <trans data-src="https://swiperjs.com/swiper-api#param">https://swiperjs.com/swiper-api#param</trans> <trans data-src="-freeMode-momentumBounceRatio) | `number` | 1 | 值越大，动量反弹效应越大 |">-FreeMode momentumBounceRatio) | ` number '| 1 | The higher the value, the greater the momentum rebound effect|</trans> <trans data-src="| **[momentumRatio](">| **[momentumRatio](</trans> <trans data-src="https://swiperjs.com/swiper-api#param">https://swiperjs.com/swiper-api#param</trans> <trans data-src="-freeMode-momentumRatio)** | `number` | 1 | 释放滑块后，该值越大，动量距离越大 |">-FreeMode momentumRatio) * * | ` number ` | 1 | After the slider is released, the greater the value, the greater the momentum distance|</trans> <trans data-src="| [momentumVelocityRatio](">| [momentumVelocityRatio](</trans> <trans data-src="https://swiperjs.com/swiper-api#param">https://swiperjs.com/swiper-api#param</trans> <trans data-src="-freeMode-momentumVelocityRatio) | `number` | 1 | 释放滑块后，该值越高，动量速度越大 |">-FreeMode momentumVelocityRatio) | ` number '| 1 | After the slider is released, the higher the value, the greater the momentum speed|</trans> <trans data-src="| [sticky](">| [sticky](</trans> <trans data-src="https://swiperjs.com/swiper-api#param">https://swiperjs.com/swiper-api#param</trans> <trans data-src="-freeMode-sticky) | `boolean` | false | 设置为 `true` 可在自由模式(`freeMode`)下启用捕捉幻灯片位置 |">-FreeMode sticky) | ` boolean '| false | Set to ` true' to enable capturing slide position in free mode (` freeMode ')|</trans> <trans data-src="### JS 代码：">###JS code:</trans> <trans data-src="> 如果你是按照模块导入的，一定要导入 `FreeMode` 模块！">>If you import by module, you must import the 'FreeMode' module!</trans> <trans data-src="```js">```js</trans> <trans data-src="import 'swiper/css';">import 'swiper/css';</trans> <trans data-src="import Swiper, {Autoplay, FreeMode} from 'swiper';">import Swiper, {Autoplay, FreeMode} from 'swiper';</trans> <trans data-src="Swiper.use([Autoplay, FreeMode]);">Swiper.use([Autoplay, FreeMode]);</trans> <trans data-src="let itemCount = parseInt(u('.swiper-wrapper').data('item-count'));">let itemCount = parseInt(u('.swiper-wrapper').data('item-count'));</trans> <trans data-src="const swiper = new Swiper("#reviews-list", {">const swiper = new Swiper("#reviews-list", {</trans> <trans data-src="width: window.innerWidth,">width: window.innerWidth,</trans> <trans data-src="resistanceRatio: 0,">resistanceRatio: 0,</trans> <trans data-src="speed: 10000,">speed: 10000,</trans> <trans data-src="observer: true,">observer: true,</trans> <trans data-src="observeParents: true,">observeParents: true,</trans> <trans data-src="slidesPerGroup: 1,">slidesPerGroup: 1,</trans> <trans data-src="// autoplay">// autoplay</trans> <trans data-src="autoplay: {">autoplay: {</trans> <trans data-src="delay: 0, // 每个图片移动完成后间隔">Delay: 0,//Interval after each picture is moved</trans> <trans data-src="disableOnInteraction: false // 触摸后是否停止自动移动">DisableOnInteraction: false//Whether to stop automatic movement after touching</trans> <trans data-src="},">},</trans> <trans data-src="freeMode: {">freeMode: {</trans> <trans data-src="enabled: true,">enabled: true,</trans> <trans data-src="momentumBounce: false,//主要是这2个参数">MomentumBounce: false,//mainly these two parameters</trans> <trans data-src="momentumRatio: 0.01//主要是这2个参数">MomentumRatio: 0.01//Mainly these two parameters</trans> <trans data-src="}, // 不贴合">},//Not fit</trans> <trans data-src="// loop">// loop</trans> <trans data-src="loop: true, // 循环">Loop: true,//loop</trans> <trans data-src="// grid">// grid</trans> <trans data-src="centeredSlides: true,">centeredSlides: true,</trans> <trans data-src="slidesPerView: 'auto',//5">slidesPerView: 'auto',//5</trans> <trans data-src="spaceBetween: 25,">spaceBetween: 25,</trans> <trans data-src="loopedSlides: itemCount,">loopedSlides: itemCount,</trans> <trans data-src="loopAdditionalSlides: itemCount,">loopAdditionalSlides: itemCount,</trans> <trans data-src="});">});</trans> <trans data-src="```">```</trans> <trans data-src="#### HTML 代码例子：">####HTML code example:</trans> <trans data-src="```html">```html</trans> <trans data-src="<!"><!</trans> <trans data-src="doctype html>">doctype html></trans> <trans data-src="<html lang="zh-CN">"><html lang="zh-CN"></trans> <trans data-src="<head>"><head></trans> <trans data-src="<meta charset="UTF-8">"><meta charset="UTF-8"></trans> <trans data-src="<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">"><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"></trans> <trans data-src="<meta http-equiv="X-UA-Compatible" content="ie=edge">"><meta http-equiv="X-UA-Compatible" content="ie=edge"></trans> <trans data-src="<title>Swiper.js 无限跑马灯</title>"><title>Switch.js unlimited running lamp</title></trans> <trans data-src="<link rel="stylesheet" href=""><link rel="stylesheet" href="</trans> <trans data-src="https://cdn.jsdelivr.net/npm/swiper">https://cdn.jsdelivr.net/npm/swiper</trans> <trans data-src="@7.3.1/swiper-bundle.min.css"/>">@7.3.1/swiper-bundle.min.css"/></trans> <trans data-src="<script src=""><script src="</trans> <trans data-src="https://cdn.jsdelivr.net/npm/swiper">https://cdn.jsdelivr.net/npm/swiper</trans> <trans data-src="@7.3.1/swiper-bundle.min.js"></script>">@7.3.1/swiper-bundle.min.js"></script></trans> <trans data-src="<style>"><style></trans> <trans data-src="#review-list {">#review-list {</trans> <trans data-src="width: 100%;">width: 100%;</trans> <trans data-src="height: 100%;">height: 100%;</trans> <trans data-src="}">}</trans> <trans data-src=".review-item {">.review-item {</trans> <trans data-src="width: 300px;">width: 300px;</trans> <trans data-src="height: 180px;">height: 180px;</trans> <trans data-src="background-color: #ff4081;">background-color: #ff4081;</trans> <trans data-src="color: white;">color: white;</trans> <trans data-src="display: flex;">display: flex;</trans> <trans data-src="align-items: center;">align-items: center;</trans> <trans data-src="justify-content: space-around;">justify-content: space-around;</trans> <trans data-src="}">}</trans> <trans data-src="</style>"></style></trans> <trans data-src="</head>"></head></trans> <trans data-src="<body>"><body></trans> <trans data-src="<div id="review-list">"><div id="review-list"></trans> <trans data-src="<div class="swiper-wrapper">"><div class="swiper-wrapper"></trans> <trans data-src="<div class="review-item swiper-slide">评论1</div>"><div class="review item swiper slide">Comment 1</div></trans> <trans data-src="<div class="review-item swiper-slide">评论2</div>"><div class="review item swiper slide">Comment 2</div></trans> <trans data-src="<div class="review-item swiper-slide">评论3</div>"><div class="review item swiper slide">Comment 3</div></trans> <trans data-src="<div class="review-item swiper-slide">评论4</div>"><div class="review item swiper slide">Comment 4</div></trans> <trans data-src="<div class="review-item swiper-slide">评论5</div>"><div class="review item swiper slide">Comment 5</div></trans> <trans data-src="<div class="review-item swiper-slide">评论6</div>"><div class="review item swiper slide">Comment 6</div></trans> <trans data-src="<div class="review-item swiper-slide">评论7</div>"><div class="review item swiper slide">Comment 7</div></trans> <trans data-src="<div class="review-item swiper-slide">评论8</div>"><div class="review item swiper slide">Comment 8</div></trans> <trans data-src="<div class="review-item swiper-slide">评论9</div>"><div class="review item swiper slide">Comment 9</div></trans> <trans data-src="<div class="review-item swiper-slide">评论10</div>"><div class="review item swiper slide">Comment 10</div></trans> <trans data-src="</div>"></div></trans> <trans data-src="</div>"></div></trans> <trans data-src="<script>"><script></trans> <trans data-src="const swiper = new Swiper("#review-list", {">const swiper = new Swiper("#review-list", {</trans> <trans data-src="width: window.innerWidth,">width: window.innerWidth,</trans> <trans data-src="resistanceRatio: 0,">resistanceRatio: 0,</trans> <trans data-src="speed: 10000,">speed: 10000,</trans> <trans data-src="observer: true,">observer: true,</trans> <trans data-src="observeParents: true,">observeParents: true,</trans> <trans data-src="slidesPerGroup: 1,">slidesPerGroup: 1,</trans> <trans data-src="// autoplay">// autoplay</trans> <trans data-src="autoplay: {">autoplay: {</trans> <trans data-src="delay: 0, // 每个图片移动完成后间隔">Delay: 0,//Interval after each picture is moved</trans> <trans data-src="disableOnInteraction: false // 触摸后是否停止自动移动">DisableOnInteraction: false//Whether to stop automatic movement after touching</trans> <trans data-src="},">},</trans> <trans data-src="freeMode: {">freeMode: {</trans> <trans data-src="enabled: true,">enabled: true,</trans> <trans data-src="momentumBounce: false,">momentumBounce: false,</trans> <trans data-src="momentumRatio: 0.01,">momentumRatio: 0.01,</trans> <trans data-src="momentumVelocityRatio: 0.01">momentumVelocityRatio: 0.01</trans> <trans data-src="}, // 不贴合">},//Not fit</trans> <trans data-src="// loop">// loop</trans> <trans data-src="loop: true, // 循环">Loop: true,//loop</trans> <trans data-src="// grid">// grid</trans> <trans data-src="centeredSlides: true,">centeredSlides: true,</trans> <trans data-src="slidesPerView: 'auto',//5">slidesPerView: 'auto',//5</trans> <trans data-src="spaceBetween: 25,">spaceBetween: 25,</trans> <trans data-src="});">});</trans> <trans data-src="</script>"></script></trans> <trans data-src="</body>"></body></trans> <trans data-src="</html>"></html></trans> <trans data-src="```">```</trans>