Init project
This commit is contained in:
lifizer
@@ -0,0 +1,40 @@
|
||||
# 轮播组件
|
||||
|
||||
# 基础式
|
||||
<ls-swiper :list="base_lsit" imgKey="imgUrl" :loop="true" :dots='true' :autoplay='true' @clickItem="clickItem()" />
|
||||
|
||||
# 链式
|
||||
<ls-swiper :list="list" imgKey="imgUrl" imgWidth="300" previousMargin="20" nextMargin='20'/>
|
||||
|
||||
# 卡片式
|
||||
<ls-swiper :list="base_lsit" imgKey="imgUrl" :crown="true" :loop="true" :shadow='true' height='130' previousMargin="120" nextMargin='120' imgRadius="5" />
|
||||
|
||||
# props
|
||||
参数名 | 说明 | 类型 | 默认值
|
||||
-----------------|-------------------------------------------------- -|-------------|------------
|
||||
list | 轮播数据 | Array | 必输
|
||||
imgKey | 轮播数据key（图片url属性） | String | 必输 (自定义模式，非必输)
|
||||
autoplay | 是否自动播放 | Boolean | false
|
||||
loop | 是否循环 | Boolean | false
|
||||
autoplay | 是否自动播放 | Boolean | false
|
||||
dots | 是否显示轮播点 | Boolean | false
|
||||
crown | 卡片特效 (中间突出，两边缩放特效) | Boolean | false
|
||||
interval | 播放时间间隔 | Number | 2000
|
||||
duration | 滑动速度 | Number | 1500
|
||||
bottom | 轮播点下边距 | Number | 10 (单位:px,设计图建议以375px为准)
|
||||
height | 高度 | Number | 200 (单位:px,设计图建议以375px为准)
|
||||
previousMargin | 图片前边距 | Number | 0 (单位:px,设计图建议以375px为准)
|
||||
nextMargin | 图片后间距 | Number | 0 (单位:px,设计图建议以375px为准)
|
||||
imgRadius | 图片圆角 | Number | 0 (单位:px,设计图建议以375px为准)
|
||||
imgWidth | 图片宽度 | String | 100%
|
||||
@clickItem | 点击事件 | Function |
|
||||
@change | 切换事件 | Function |
|
||||
|
||||
# 自定义
|
||||
<ls-swiper :list="list">
|
||||
<template v-slot="{data}">
|
||||
xxx
|
||||
</template>
|
||||
</ls-swiper>
|
||||
|
||||
如有其他需求，可在插槽内编写自定义内容, 自动覆盖原图片样式。
|
||||
@@ -0,0 +1,180 @@
|
||||
<template>
|
||||
<view class="ls-wrap">
|
||||
<swiper class="ls-swiper" :style="{height: height *2 + 'rpx'}" :autoplay="autoplay" :interval="interval" :duration="duration"
|
||||
:circular='loop' @change='change' :previous-margin='previousMargin + "rpx"' :next-margin='nextMargin + "rpx"'>
|
||||
<swiper-item v-for="(item,index) in list" :key='index' @click="$emit('clickItem',item)">
|
||||
<view v-if="list && list.length>0" class="item" :class="[!crown ? '' : current==index ? 'crown-active':'crown']">
|
||||
<image v-if="!slotsMode" class="item-img" :class="[imgShadow?'imgShadow':'']" :src="item[imgKey]" :style="{ borderRadius: imgRadius + 'px',width:imgWidth}"
|
||||
mode=""></image>
|
||||
<slot v-else :data='item'></slot>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
<view class="dots flex" :style="{bottom: bottom * 2 + 'rpx'}" v-if="dots">
|
||||
<view class="dot" :class="[current == i ? 'curr-dot' : '']" v-for="(d,i) in list" :key='i'>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
list: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
// 轮播图片key
|
||||
imgKey: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
// 高度
|
||||
height: {
|
||||
type: Number,
|
||||
default: 200
|
||||
},
|
||||
// 图片圆角
|
||||
imgRadius: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
// 图片阴影
|
||||
imgShadow: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 前边距
|
||||
previousMargin: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
// 后边距
|
||||
nextMargin: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
// 图片宽度
|
||||
imgWidth: {
|
||||
type: String,
|
||||
default: '100%'
|
||||
},
|
||||
// 是否循环
|
||||
loop: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 自动播放
|
||||
autoplay: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 播放时间间隔
|
||||
interval: {
|
||||
type: Number,
|
||||
default: 2000
|
||||
},
|
||||
// 滑动速度
|
||||
duration: {
|
||||
type: Number,
|
||||
default: 1200
|
||||
},
|
||||
// 显示指示点
|
||||
dots: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 轮播点下边距
|
||||
bottom: {
|
||||
type: Number,
|
||||
default: 10
|
||||
},
|
||||
// 卡片特效
|
||||
crown: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
slotsMode: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
current: 0,
|
||||
slots: false
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
// 判断异步数据源，是否使用插槽自定义样式
|
||||
list: {
|
||||
handler(val) {
|
||||
if (val.length > 0 && this.$slots.default) {
|
||||
this.slots = true
|
||||
}
|
||||
},
|
||||
immediate: true,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
change(event) {
|
||||
let current = event.detail.current
|
||||
this.current = current
|
||||
this.$emit('change', this.list[current])
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.ls-wrap {
|
||||
position: relative;
|
||||
|
||||
.crown {
|
||||
transform: scale(0.93, 0.85);
|
||||
}
|
||||
|
||||
.item {
|
||||
height: 100%;
|
||||
transition: 1.2s;
|
||||
}
|
||||
|
||||
.item-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.imgShadow {
|
||||
height: calc(100% - 10px);
|
||||
margin-bottom: 10px;
|
||||
box-shadow: 0 6px 6px rgba(0, 0, 0, .15);
|
||||
}
|
||||
|
||||
.crown-active {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
.dots {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
|
||||
.dot {
|
||||
width: 6rpx;
|
||||
height: 6rpx;
|
||||
border-radius: 50%;
|
||||
background-color: #D6D6D6;
|
||||
margin-right: 8rpx;
|
||||
}
|
||||
|
||||
.curr-dot {
|
||||
height: 6rpx;
|
||||
width: 22rpx;
|
||||
border-radius: 6rpx;
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user