mjz update
This commit is contained in:
mjz
+188
-4
@@ -5,10 +5,194 @@ permalink: /pages/component/swiper
|
||||
article: false
|
||||
---
|
||||
|
||||
## 操作条
|
||||
## 全屏限高轮播
|
||||
|
||||
1. 添加类名 `screen-swiper`，宽度为全屏，高度自定义
|
||||
2. 请直接参考 `swiper` [官方文档](https://uniapp.dcloud.net.cn/component/swiper.html#)，可以通过类名 `square-dot` 和 `round-dot` 定义小圆点样式
|
||||
|
||||
::: details 点此查看页面源代码
|
||||
页面位置：`/pages/component/swiper`
|
||||
```vue
|
||||
<template>
|
||||
<view>
|
||||
<swiper class="screen-swiper" :class="dotStyle?'square-dot':'round-dot'" :indicator-dots="true" :circular="true"
|
||||
:autoplay="true" interval="5000" duration="500">
|
||||
<swiper-item v-for="(item,index) in swiperList" :key="index">
|
||||
<image :src="item.url" mode="aspectFill" v-if="item.type=='image'"></image>
|
||||
<video :src="item.url" autoplay loop muted :show-play-btn="false" :controls="false" objectFit="cover" v-if="item.type=='video'"></video>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
swiperList: [{
|
||||
id: 0,
|
||||
type: 'image',
|
||||
url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big84000.jpg'
|
||||
}, {
|
||||
id: 1,
|
||||
type: 'image',
|
||||
url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big37006.jpg',
|
||||
}, {
|
||||
id: 2,
|
||||
type: 'image',
|
||||
url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big39000.jpg'
|
||||
}, {
|
||||
id: 3,
|
||||
type: 'image',
|
||||
url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg'
|
||||
}],
|
||||
dotStyle: true
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
:::
|
||||
|
||||
## 卡片式轮播
|
||||
|
||||
1. 在 `swiper` 标签上添加类名 `card-swiper`
|
||||
2. 在 `swiper-item` 标签内的子元素上添加类名 `swiper-item`，
|
||||
3. 示例中 `cardSwiper` 函数的主要作用是切换类名 `cur`，`cur` 的作用是实现轮播图片中间大，两边小的效果，就是 `transform的scale()`
|
||||
|
||||
```vue
|
||||
<swiper class="card-swiper" :class="dotStyle?'square-dot':'round-dot'" :indicator-dots="true" :circular="true"
|
||||
:autoplay="true" interval="5000" duration="500" @change="cardSwiper" indicator-color="#8799a3"
|
||||
indicator-active-color="#0081ff">
|
||||
<swiper-item v-for="(item,index) in swiperList" :key="index" :class="cardCur==index?'cur':''">
|
||||
<view class="swiper-item">
|
||||
<image :src="item.url" mode="aspectFill" v-if="item.type=='image'"></image>
|
||||
<video :src="item.url" autoplay loop muted :show-play-btn="false" :controls="false" objectFit="cover" v-if="item.type=='video'"></video>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
|
||||
<!-- js -->
|
||||
cardSwiper(e) {
|
||||
this.cardCur = e.detail.current
|
||||
},
|
||||
```
|
||||
|
||||
## 堆叠式轮播
|
||||
|
||||
1. 堆叠轮播是原生写的，注意类名 `tower-swiper`、`tower-item` 以及 `swiper-item` 的配合使用，这主要是通过层级的高低来显示图片的，使用时需要配合 `js` 和 `css`。
|
||||
|
||||
2. 注：这种轮播图初始化展示第一章会便宜一点，需要触动一下才会展示正常的效果，可以通过在 `onload()` 函数中给变量 `direction` 赋值解决
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view>
|
||||
<view class="tower-swiper" @touchmove="TowerMove" @touchstart="TowerStart" @touchend="TowerEnd">
|
||||
<view class="tower-item" :class="item.zIndex==1?'none':''" v-for="(item,index) in swiperList" :key="index" :style="[{'--index': item.zIndex,'--left':item.mLeft}]" :data-direction="direction">
|
||||
<view class="swiper-item">
|
||||
<image :src="item.url" mode="aspectFill" v-if="item.type=='image'"></image>
|
||||
<video :src="item.url" autoplay loop muted :show-play-btn="false" :controls="false" objectFit="cover" v-if="item.type=='video'"></video>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
swiperList: [{
|
||||
id: 0,
|
||||
type: 'image',
|
||||
url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big84000.jpg'
|
||||
}, {
|
||||
id: 1,
|
||||
type: 'image',
|
||||
url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big37006.jpg',
|
||||
}, {
|
||||
id: 2,
|
||||
type: 'image',
|
||||
url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big39000.jpg'
|
||||
}, {
|
||||
id: 3,
|
||||
type: 'image',
|
||||
url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg'
|
||||
}, {
|
||||
id: 4,
|
||||
type: 'image',
|
||||
url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big25011.jpg'
|
||||
}, {
|
||||
id: 5,
|
||||
type: 'image',
|
||||
url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big21016.jpg'
|
||||
}, {
|
||||
id: 6,
|
||||
type: 'image',
|
||||
url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big99008.jpg'
|
||||
}],
|
||||
towerStart: 0,
|
||||
direction: ''
|
||||
};
|
||||
},
|
||||
onLoad() {
|
||||
this.TowerSwiper('swiperList');
|
||||
this.direction = 'left';
|
||||
// 初始化towerSwiper 传已有的数组名即可
|
||||
},
|
||||
methods: {
|
||||
// 初始化towerSwiper
|
||||
TowerSwiper(name) {
|
||||
let list = this[name];
|
||||
console.log(list)
|
||||
for (let i = 0; i < list.length; i++) {
|
||||
list[i].zIndex = parseInt(list.length / 2) + 1 - Math.abs(i - parseInt(list.length / 2))
|
||||
list[i].mLeft = i - parseInt(list.length / 2)
|
||||
}
|
||||
this.swiperList = list
|
||||
},
|
||||
// towerSwiper触摸开始
|
||||
TowerStart(e) {
|
||||
console.log(e)
|
||||
this.towerStart = e.touches[0].pageX
|
||||
},
|
||||
// towerSwiper计算方向
|
||||
TowerMove(e) {
|
||||
this.direction = e.touches[0].pageX - this.towerStart > 0 ? 'right' : 'left'
|
||||
},
|
||||
// towerSwiper计算滚动
|
||||
TowerEnd(e) {
|
||||
let direction = this.direction;
|
||||
let list = this.swiperList;
|
||||
if (direction == 'right') {
|
||||
let mLeft = list[0].mLeft;
|
||||
console.log(list[0])
|
||||
let zIndex = list[0].zIndex;
|
||||
for (let i = 1; i < this.swiperList.length; i++) {
|
||||
this.swiperList[i - 1].mLeft = this.swiperList[i].mLeft
|
||||
this.swiperList[i - 1].zIndex = this.swiperList[i].zIndex
|
||||
}
|
||||
this.swiperList[list.length - 1].mLeft = mLeft;
|
||||
this.swiperList[list.length - 1].zIndex = zIndex;
|
||||
} else {
|
||||
let mLeft = list[list.length - 1].mLeft;
|
||||
let zIndex = list[list.length - 1].zIndex;
|
||||
for (let i = this.swiperList.length - 1; i > 0; i--) {
|
||||
this.swiperList[i].mLeft = this.swiperList[i - 1].mLeft
|
||||
this.swiperList[i].zIndex = this.swiperList[i - 1].zIndex
|
||||
}
|
||||
this.swiperList[0].mLeft = mLeft;
|
||||
this.swiperList[0].zIndex = zIndex;
|
||||
}
|
||||
this.direction = ""
|
||||
this.swiperList = this.swiperList
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.tower-swiper .tower-item {
|
||||
transform: scale(calc(0.5 + var(--index) / 10));
|
||||
margin-left: calc(var(--left) * 100upx - 150upx);
|
||||
z-index: var(--index);
|
||||
}
|
||||
</style>
|
||||
```
|
||||
Reference in New Issue
Block a user