Skip to content

Commit

Permalink
feat: 添加自定义元素宽度功能
Browse files Browse the repository at this point in the history
  • Loading branch information
叶锦湛 committed Jul 4, 2022
1 parent 46133fa commit 10c9b41
Show file tree
Hide file tree
Showing 19 changed files with 216 additions and 97 deletions.
1 change: 0 additions & 1 deletion .gitignore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@ pnpm-debug.log*
lerna-debug.log*

node_modules
dist
dist-ssr
*.local
package-lock.json
Expand Down
43 changes: 22 additions & 21 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,25 +9,25 @@
### Vu3
安装：
```shell
npm i @next-fe/vue-za-swiper
npm i @za/vue-za-swiper
```

使用：
```js
import ZaSwiper from '@next-fe/vue-za-swiper'
import '@next-fe/vue-za-swiper/dist/style.css'
import ZaSwiper from '@za/vue-za-swiper'
import '@za/vue-za-swiper/dist/style.css'
```

### Vu2
安装：
```shell
npm i @next-fe/vue-za-swiper@1
npm i @za/vue-za-swiper@1
```

使用：
```js
import ZaSwiper from '@next-fe/vue-za-swiper'
import '@next-fe/vue-za-swiper/dist/style.css'
import ZaSwiper from '@za/vue-za-swiper'
import '@za/vue-za-swiper/dist/style.css'
```

## 代码示例
Expand Down Expand Up @@ -66,7 +66,7 @@ import '@next-fe/vue-za-swiper/dist/style.css'
</template>
<script>
import '@next-fe/vue-za-swiper/dist/style.css'
import '@za/vue-za-swiper/dist/style.css'
import ZaSwiper from 'vue-za-swiper'
import IMG1 from './assets/images/model/1.png'
import IMG2 from './assets/images/model/2.png'
Expand Down Expand Up @@ -143,20 +143,21 @@ export default {
### Props
该组件所有属性均为非响应式属性，所以开发者需要保证数组加载完成才渲染组件，不然可能会有异常。

| 参数 | 说明 | 类型 | 默认值 |
|--------------------------|--------------------------------------------|---------------------|----------|
| list | 数组，必填 | _Array\<any>_ | - |
| visible-length | 可视元素个数，必填 | _number_ | - |
| inner-height | 播放栏高度，默认单位为 `px`，必填 | _number_ / _string_ | - |
| inner-width | 播放栏宽度，默认单位为 `px`，必填 | _number_ / _string_ | - |
| span-gap | 元素间距，默认单位 `px` | _number_ / _string_ | `0` |
| side-gap | 两边间距，默认单位 `px` | _number_ / _string_ | `0` |
| auto-play | 是否自动播放 | _boolean_ | `false` |
| step | 播放速度，一帧移动距离，单位 `px` | _number_ | `-0.5` |
| play-delay | 滑动停止后再播放时间间隔，单位 `ms` | _number_ | `2000` |
| play-immediate | 组件渲染后是否立即自动播放，`auto-play` 为 `true` 时该属性才生效 | _boolean_ | `false` |
| slide-animation-duration | 点击左右按钮后滑动动画时长，单位 `ms` | _number_ | `300` |

| 参数 | 说明 | 类型 | 默认值 |
|--------------------------|-------------------------------------------------------------------------------------------------------------|---------------------|---------|
| item-width-mode | `computed`：组件内部使用 `visible-length` 计算元素宽度，`custom`： 自定义元素宽度。仅使用 `computed` 模式时才能使用按钮滑动功能 | _string_ | `computed` |
| list | 数组，必填 | _Array\<any>_ | - |
| visible-length | 可视元素个数，当 `item-width-mode` 为 `computed` 时必填 | _number_ | - |
| inner-height | 播放栏高度，默认单位为 `px`，必填 | _number_ / _string_ | - |
| inner-width | 播放栏宽度，默认单位为 `px`，必填 | _number_ / _string_ | - |
| span-gap | 元素间距，默认单位 `px` | _number_ / _string_ | `0` |
| side-gap | 两边间距，默认单位 `px` | _number_ / _string_ | `0` |
| auto-play | 是否自动播放 | _boolean_ | `false` |
| step | 播放速度，一帧移动距离，单位 `px` | _number_ | `-0.5` |
| play-delay | 滑动停止后再播放时间间隔，单位 `ms` | _number_ | `2000` |
| play-immediate | 组件渲染后是否立即自动播放，`auto-play` 为 `true` 时该属性才生效 | _boolean_ | `false` |
| slide-animation-duration | 点击左右按钮后滑动动画时长，单位 `ms` | _number_ | `300` |
| initial-offset | 初始偏移量，支持负数，默认单位为 `px` | _number_ / _string_ | `0` |

### Methods
| 名称 | 说明 | 参数 | 返回值 |
Expand Down
3 changes: 2 additions & 1 deletion dev.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,9 @@ npm run build
cd ./packages/vue2
# 修改版本号，接着 publish
npm publish --tag latest-v1
# 如果发布 beta 版就用这个命令 npm publish --tag beta

cd ../vu3
cd ../vue3
# 修改版本号，接着 publish。
# 必须先发 Vue2 再发 Vue3，因为 README.md 在 Vue3 的目录，NPM 上显示的是最新包的 README.md
npm publish
Expand Down
18 changes: 9 additions & 9 deletions docs/technical-solution/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,17 +16,17 @@

```js
initDoubleList() {
const mid = Math.floor((this.list.length / 2));
this.halfLen = mid;
const mid = Math.floor((this.list.length / 2))
this.doubleList = [ ...this.list.slice(mid), ...this.list, ...this.list.slice(0, mid) ]
this.listDiv = this.list.length - mid
}
```

接着计算出左边界的位置，将第 1 个元素，也就是索引 `4` 的元素，放到容器最左边。计算出右边界的位置，用于后面计算。

```js
initTranslateX() {
const translateX = this.getDomTranslateX() - this.itemFullWidth * this.halfLen;
const translateX = this.getDomTranslateX() - this.itemFullWidth * this.listDiv;
this.setDomTranslateX(translateX);
return Math.abs(translateX);
},
Expand Down Expand Up @@ -125,7 +125,7 @@ methods: {
.findLastIndex((item) => item.intersectionRatio >= this.intersectionRatioThreshold)

const isAllVisible = entries
.filter((item) => item.intersectionRatio >= this.intersectionRatioThreshold).length === this.halfLen
.filter((item) => item.intersectionRatio >= this.intersectionRatioThreshold).length === this.visibleLength

const targetIndex = isAllVisible ? lastVisibleIndex - 1 : lastVisibleIndex
const target = entries[targetIndex]
Expand All @@ -137,7 +137,7 @@ methods: {
const translateXAbs = Math.abs(this.translateX)
setTimeout(() => {
if (translateXAbs <= this.leftBorder) {
this.translateX = -(this.itemFullWidthValue * (targetIndex - this.halfLen + 1 + this.list.length))
this.translateX = -(this.itemFullWidthValue * (targetIndex - this.visibleLength + 1 + this.list.length))
this.setDomTranslateX(this.translateX)
}
}, this.slideAnimationDuration)
Expand All @@ -159,11 +159,11 @@ methods: {
下图是滑动结束后，进入了左边界的情况。这时 `targetIndex` 是 `6`，为了制造循环，我们的目标是要让索引为 `14` 的元素出现在 Swiper Container 最右边。但是 `translateX` 的定位是从 Swiper Container 最左边算起的，也就是说如果索引为 `11` 的棕色元素出现在最左边，那边最右边的元素肯定是索引为 `14` 的元素。由此可以推理出以下公式计算 `finalTranslateX`：

```js
if (translateXOpt <= this.leftBorder) {
if (translateXAbs <= this.leftBorder) {
// targetIndex: 6
// halfLen: 4
// 6 + 1 - 4 + 8 = 11
this.translateX = -(this.itemFullWidth * (targetIndex + 1 - this.halfLen + this.list.length));
// visibleLength: 4
// 6 - 4 + 1 + 8 = 11
this.translateX = -(this.itemFullWidth * (targetIndex - this.visibleLength + 1 + this.list.length));
this.setDomTranslateX(this.translateX);
}
```
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@next-fe/vue-za-swiper",
"version": "2.0.0-beta.0",
"version": "0.0.0",
"description": "smoothly swiper",
"workspaces": [
"packages/*"
Expand Down
13 changes: 11 additions & 2 deletions packages/common/App.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@
<template #default="{ item }">
<!-- item 父容器的宽高在 Swiper 内部已经计算好，开发者在这里的 item 样式可以使用 width: 100%、height: 100% 铺满外层 -->
<img :src="item"
@click="testClick"
class="demo-page__item"/>
</template>

Expand All @@ -32,8 +33,8 @@

<script>
// 测试用
// import ZaSwiper from '@next-fe/vue-za-swiper'
// import '@next-fe/vue-za-swiper/dist/style.css'
// import ZaSwiper from '@za/vue-za-swiper'
// import '@za/vue-za-swiper/dist/style.css'
import ZaSwiper from './za-swiper/index'
import IMG1 from './assets/images/model/1.png'
import IMG2 from './assets/images/model/2.png'
Expand Down Expand Up @@ -70,6 +71,11 @@ export default {
}, 100)
})
},
methods: {
testClick() {
console.log('testClick....')
}
}
}
</script>

Expand All @@ -83,6 +89,9 @@ export default {
min-height: 55px;
position: absolute;
top: 80px;
width: 100%;
display: flex;
justify-content: center;
}
&__item {
Expand Down
9 changes: 5 additions & 4 deletions packages/common/utils/lodash.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
import {
isNumber,
throttle,
} from 'lodash-es'
import throttle from 'lodash.throttle'

function isNumber(obj){
return typeof obj==='number' && !isNaN(obj)
}

export default {
isNumber,
Expand Down
Loading

0 comments on commit 10c9b41

Please sign in to comment.