首頁組件
This commit is contained in:
魏啾
20
uni_modules/liu-super-slide/changelog.md
Normal file
20
uni_modules/liu-super-slide/changelog.md
Normal file
@@ -0,0 +1,20 @@
|
||||
## 1.0.9（2023-06-08）
|
||||
增加预览二维码
|
||||
## 1.0.8（2023-05-31）
|
||||
增加license
|
||||
## 1.0.7（2023-05-15）
|
||||
增加点击事件
|
||||
## 1.0.6（2023-05-14）
|
||||
优化赋值
|
||||
## 1.0.5（2023-05-13）
|
||||
优化代码
|
||||
## 1.0.4（2023-05-13）
|
||||
优化手动点击逻辑
|
||||
## 1.0.3（2023-05-13）
|
||||
优化手动点击逻辑
|
||||
## 1.0.2（2023-05-12）
|
||||
增加属性
|
||||
## 1.0.1（2023-05-12）
|
||||
增加示例
|
||||
## 1.0.0（2023-05-12）
|
||||
初始发布
|
||||
@@ -0,0 +1,207 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="card-list" v-if="showListArr.length>0">
|
||||
<image v-if="bgUrl" class="swiper-img" :src='bgUrl'></image>
|
||||
<p class="card-info" :class="item.class<5?'card' + item.class:item.class%2==0?'card3':'card2'"
|
||||
v-for="(item, index) in showListArr" :key="index" @click.stop="click(item.class,item,true)">
|
||||
<image class="item-img" :src="item.picUrl"></image>
|
||||
<!-- <view class="item-name">{{item.title}}</view> -->
|
||||
</p>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
//轮播数据源
|
||||
swiperList: {
|
||||
type: Array,
|
||||
default: [],
|
||||
},
|
||||
//背景图片
|
||||
bgUrl: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
//是否自动轮播
|
||||
autoplay: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
//轮播自动切换时间间隔
|
||||
interval: {
|
||||
type: Number,
|
||||
default: 5000
|
||||
},
|
||||
//点击轮播是否有触感振动(自动轮播不生效)
|
||||
vibrate: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
timer: null,
|
||||
showListArr: []
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
swiperList: {
|
||||
deep: true,
|
||||
immediate: true,
|
||||
handler(newArr) {
|
||||
let newList = JSON.parse(JSON.stringify(newArr))
|
||||
if (newList.length == 0) return
|
||||
this.$nextTick(() => {
|
||||
newList.forEach((res, index) => {
|
||||
res.class = index
|
||||
})
|
||||
this.showListArr = JSON.parse(JSON.stringify(newList))
|
||||
if (this.autoplay) this.autoPlayFun()
|
||||
})
|
||||
},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
autoPlayFun() {
|
||||
this.timer = setInterval(() => {
|
||||
this.getMenu()
|
||||
}, this.interval)
|
||||
},
|
||||
getMenu() {
|
||||
let list = this.showListArr.filter(res => res.class == 1)
|
||||
this.click(1, list[0], false)
|
||||
},
|
||||
click(index, mess, clickState) {
|
||||
if(clickState) this.$emit('click', mess)
|
||||
if (this.autoplay && clickState) return
|
||||
if (clickState && this.vibrate && !this.autoplay) uni.vibrateShort()
|
||||
if (clickState) {
|
||||
this.getMenu()
|
||||
return
|
||||
}
|
||||
for (let i = 0; i < this.showListArr.length; i++) {
|
||||
const item = this.showListArr[i]
|
||||
if (item.class > index) {
|
||||
item.class--
|
||||
} else if (item.class === index) {
|
||||
item.class = 0
|
||||
} else if (item.class === 0) {
|
||||
item.class = this.showListArr.length - 1
|
||||
}
|
||||
}
|
||||
this.$emit('change', mess)
|
||||
},
|
||||
},
|
||||
destroyed() {
|
||||
clearInterval(this.timer)
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.card-list {
|
||||
width: 100%;
|
||||
height: 360rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.swiper-img {
|
||||
position: absolute;
|
||||
width: 94%;
|
||||
height: 250rpx;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: auto;
|
||||
border-radius: 16rpx;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.card-list p {
|
||||
border-radius: 8rpx;
|
||||
position: absolute;
|
||||
z-index: 99;
|
||||
transition: all 1s cubic-bezier(0.36, 0, 0.64, 1);
|
||||
}
|
||||
|
||||
.card-info {
|
||||
width: 240rpx;
|
||||
height: 180rpx;
|
||||
overflow: hidden;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
|
||||
.item-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.item-name {
|
||||
position: absolute;
|
||||
font-size: 30rpx;
|
||||
line-height: 30rpx;
|
||||
color: #FFFFFF;
|
||||
text-shadow: 0px 4rpx 8rpx #000000;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.card0 {
|
||||
transform: scale(1.5, 1.5);
|
||||
left: 255rpx;
|
||||
z-index: 9999 !important;
|
||||
}
|
||||
|
||||
.card0 .item-name {
|
||||
width: 100%;
|
||||
top: 75rpx;
|
||||
}
|
||||
|
||||
.card1 {
|
||||
left: 50rpx;
|
||||
}
|
||||
|
||||
.card1 .item-name {
|
||||
width: 40rpx;
|
||||
height: 100%;
|
||||
top: 0rpx;
|
||||
left: 10rpx;
|
||||
}
|
||||
|
||||
.card2 {
|
||||
left: 120rpx;
|
||||
z-index: 999 !important;
|
||||
}
|
||||
|
||||
.card2 .item-name {
|
||||
width: 40rpx;
|
||||
height: 100%;
|
||||
top: 0rpx;
|
||||
left: 10rpx;
|
||||
}
|
||||
|
||||
.card3 {
|
||||
left: 390rpx;
|
||||
z-index: 999 !important;
|
||||
}
|
||||
|
||||
.card3 .item-name {
|
||||
width: 40rpx;
|
||||
height: 100%;
|
||||
top: 0rpx;
|
||||
right: 10rpx;
|
||||
}
|
||||
|
||||
.card4 {
|
||||
left: 460rpx;
|
||||
}
|
||||
|
||||
.card4 .item-name {
|
||||
width: 40rpx;
|
||||
height: 100%;
|
||||
top: 0rpx;
|
||||
right: 10rpx;
|
||||
}
|
||||
</style>
|
||||
6
uni_modules/liu-super-slide/license.md
Normal file
6
uni_modules/liu-super-slide/license.md
Normal file
@@ -0,0 +1,6 @@
|
||||
### 1、本插件可免费下载使用；
|
||||
### 2、未经许可，严禁复制本插件派生同类插件上传插件市场；
|
||||
### 3、未经许可，严禁在插件市场恶意复制抄袭本插件进行违规获利;
|
||||
### 4、对本软件的任何使用都必须遵守这些条款，违反这些条款的个人或组织将面临法律追究。
|
||||
|
||||
|
||||
85
uni_modules/liu-super-slide/package.json
Normal file
85
uni_modules/liu-super-slide/package.json
Normal file
@@ -0,0 +1,85 @@
|
||||
{
|
||||
"id": "liu-super-slide",
|
||||
"displayName": "轮播图、3D轮播、堆叠轮播(很好看)",
|
||||
"version": "1.0.9",
|
||||
"description": "很好看、很好用的3D轮播、堆叠轮播，支持任何图片数量、点击、自动轮播、手动轮播(走过路过千万不要错过)",
|
||||
"keywords": [
|
||||
"3D轮播",
|
||||
"轮播",
|
||||
"堆叠轮播",
|
||||
"轮播图",
|
||||
"图片轮播"
|
||||
],
|
||||
"repository": "",
|
||||
"engines": {
|
||||
"HBuilderX": "^3.1.0"
|
||||
},
|
||||
"dcloudext": {
|
||||
"type": "component-vue",
|
||||
"sale": {
|
||||
"regular": {
|
||||
"price": "0.00"
|
||||
},
|
||||
"sourcecode": {
|
||||
"price": "0.00"
|
||||
}
|
||||
},
|
||||
"contact": {
|
||||
"qq": ""
|
||||
},
|
||||
"declaration": {
|
||||
"ads": "无",
|
||||
"data": "无",
|
||||
"permissions": "无"
|
||||
},
|
||||
"npmurl": ""
|
||||
},
|
||||
"uni_modules": {
|
||||
"dependencies": [],
|
||||
"encrypt": [],
|
||||
"platforms": {
|
||||
"cloud": {
|
||||
"tcb": "y",
|
||||
"aliyun": "y"
|
||||
},
|
||||
"client": {
|
||||
"Vue": {
|
||||
"vue2": "y",
|
||||
"vue3": "u"
|
||||
},
|
||||
"App": {
|
||||
"app-vue": "u",
|
||||
"app-nvue": "u"
|
||||
},
|
||||
"H5-mobile": {
|
||||
"Safari": "y",
|
||||
"Android Browser": "y",
|
||||
"微信浏览器(Android)": "y",
|
||||
"QQ浏览器(Android)": "y"
|
||||
},
|
||||
"H5-pc": {
|
||||
"Chrome": "u",
|
||||
"IE": "u",
|
||||
"Edge": "u",
|
||||
"Firefox": "u",
|
||||
"Safari": "u"
|
||||
},
|
||||
"小程序": {
|
||||
"微信": "y",
|
||||
"阿里": "u",
|
||||
"百度": "u",
|
||||
"字节跳动": "u",
|
||||
"QQ": "u",
|
||||
"钉钉": "u",
|
||||
"快手": "u",
|
||||
"飞书": "u",
|
||||
"京东": "u"
|
||||
},
|
||||
"快应用": {
|
||||
"华为": "u",
|
||||
"联盟": "u"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
78
uni_modules/liu-super-slide/readme.md
Normal file
78
uni_modules/liu-super-slide/readme.md
Normal file
@@ -0,0 +1,78 @@
|
||||
### liu-super-slide适用于uni-app项目的3D轮播、堆叠轮播、轮播图(很好看)组件
|
||||
### 本组件目前兼容微信小程序、H5
|
||||
### 本组件是很好看、好用的3D轮播、堆叠轮播，支持任何图片数量、点击、自动轮播、手动轮播(走过路过千万不要错过)
|
||||
# --- 扫码预览、关注我们 ---
|
||||
|
||||
## 扫码关注公众号，查看更多插件信息，预览插件效果！
|
||||
|
||||
|
||||
|
||||
### 使用方式
|
||||
```
|
||||
<template>
|
||||
<view class="page-main">
|
||||
<liu-super-slide :swiperList="swiperList" :bgUrl="bgUrl" :autoplay="autoplay" :interval="interval"
|
||||
@change="change" @click="click"></liu-super-slide>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
autoplay: true,
|
||||
interval: 3000,
|
||||
bgUrl: "https://cdn.pixabay.com/photo/2020/09/05/19/38/landscape-5547401_1280.png",
|
||||
swiperList: [{
|
||||
picUrl: 'https://cdn.pixabay.com/photo/2020/05/19/13/32/cartoon-5190837_1280.jpg',
|
||||
title: '思考'
|
||||
}, {
|
||||
picUrl: 'https://cdn.pixabay.com/photo/2020/05/19/13/35/cartoon-5190860_1280.jpg',
|
||||
title: '雨天'
|
||||
}, {
|
||||
picUrl: 'https://cdn.pixabay.com/photo/2021/07/22/11/25/rabbit-6485072_1280.jpg',
|
||||
title: '兔子'
|
||||
}, {
|
||||
picUrl: 'https://cdn.pixabay.com/photo/2022/03/31/14/53/camp-7103189_1280.png',
|
||||
title: '日落'
|
||||
}, {
|
||||
picUrl: 'https://cdn.pixabay.com/photo/2022/11/29/19/05/boho-7625140_1280.jpg',
|
||||
title: '植物'
|
||||
}, {
|
||||
picUrl: 'https://cdn.pixabay.com/photo/2022/08/25/23/06/woman-7411414_1280.png',
|
||||
title: '时尚'
|
||||
}, {
|
||||
picUrl: 'https://cdn.pixabay.com/photo/2023/03/07/12/45/child-7835677_1280.jpg',
|
||||
title: '生活'
|
||||
}]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
change(e) {
|
||||
console.log('当前轮播信息：', e)
|
||||
},
|
||||
//点击轮播
|
||||
click(e) {
|
||||
console.log('点击轮播', e)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### 属性说明
|
||||
| 名称 | 类型 | 默认值 | 描述 |
|
||||
| ----------------------------|---------------- | ---------------------- | ---------------|
|
||||
| swiperList | Array | [] | 轮播数据源
|
||||
| bgUrl | String | | 背景图片(非必传)
|
||||
| autoplay | Boolean | true | 是否自动轮播
|
||||
| interval | Number | 5000 | 轮播自动切换时间间隔(autoplay为true时生效)
|
||||
| vibrate | Boolean | true | 点击轮播是否有触感振动(自动轮播不生效)
|
||||
| @change | Function | | 轮播回调
|
||||
| @click | Function | | 点击轮播
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user