thzxcx/FirstUI-vue
1
0
Fork 0
Code Pull Requests Packages Releases Activity

feat: 首次提交

Browse Source
This commit is contained in:
peerless_hero
2023-08-17 21:28:49 +08:00
parent 36f80fb971
commit ec1e5e16cd
571 changed files with 95322 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

173
pages/component/expand/swiperDot/swiperDot.vue Normal file
View File

@ -0,0 +1,173 @@
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 1 8 6 1 4 07 2 549，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
<template>
<view class="fui-wrap">
<view class="fui-page__hd">
<view class="fui-page__title fui-align__center" @tap="vip">SwiperDot <image
src="/static/images/index/light/icon_member_3x.png"></image>
</view>
<view class="fui-page__desc">SwiperDot 轮播图指示点，一般用于banner轮播图。</view>
</view>
<view class="fui-page__bd">
<view class="fui-section__title">默认使用</view>
<fui-swiper-dot :items="items" :current="current">
<swiper class="fui-banner__wrap" @change="change" circular :indicator-dots="false" autoplay
:interval="4000" :duration="150">
<swiper-item v-for="(item,index) in items" :key="index">
<view class="fui-banner__item" :style="{background:item.background}">First UI 组件库</view>
</swiper-item>
</swiper>
</fui-swiper-dot>
<view class="fui-section__title">改变圆点大小</view>
<fui-swiper-dot :styles="styles" :items="items" :current="current2">
<swiper previous-margin="60rpx" next-margin="60rpx" class="fui-banner__box" @change="change2" circular
:indicator-dots="false" autoplay :interval="5000" :duration="150">
<swiper-item v-for="(item,index) in items" :key="index">
<view class="fui-banner__cell" :class="{'fui-item__scale':current2!==index}"
:style="{background:item.background}">First UI 组件库</view>
</swiper-item>
</swiper>
</fui-swiper-dot>
<view class="fui-section__title">数字索引</view>
<fui-swiper-dot type="2" :styles="styles2" :items="items" :current="current3">
<swiper class="fui-banner__wrap" @change="change3" circular :indicator-dots="false" autoplay
:interval="5000" :duration="150">
<swiper-item v-for="(item,index) in items" :key="index">
<view class="fui-banner__item" :style="{background:item.background}">First UI 组件库</view>
</swiper-item>
</swiper>
</fui-swiper-dot>
<view class="fui-section__title">展示标题</view>
<fui-swiper-dot type="3" field="title" :styles="styles3" :items="items" :current="current4">
<swiper class="fui-banner__wrap" @change="change4" circular :indicator-dots="false" autoplay
:interval="4500" :duration="150">
<swiper-item v-for="(item,index) in items" :key="index">
<view class="fui-banner__item" :style="{background:item.background}">First UI 组件库</view>
</swiper-item>
</swiper>
</fui-swiper-dot>
<view class="fui-section__title">固定于右侧</view>
<fui-swiper-dot type="4" :styles="styles4" :items="items" :current="current5">
<swiper class="fui-banner__wrap" @change="change5" circular :indicator-dots="false" autoplay
:interval="4000" :duration="150">
<swiper-item v-for="(item,index) in items" :key="index">
<view class="fui-banner__item" :style="{background:item.background}">First UI 组件库</view>
</swiper-item>
</swiper>
</fui-swiper-dot>
</view>
</view>
</template>
<script>
export default {
data() {
return {
current: 0,
current2: 0,
current3: 0,
current4: 0,
current5: 0,
items: [{
background: '#09BE4F',
title: 'First UI组件库，是基于uni-app开发的一款轻量、全面可靠的跨平台移动端组件库。'
}, {
background: '#FFB703',
title: 'UI 样式可配置，拓展灵活，轻松适应不同的设计风格。'
}, {
background: '#B2B2B2',
title: '支持App-vue（Android、IOS）、App-Nvue（Android、IOS）。'
}],
styles: {
width: 12,
height: 12,
activeWidth: 24
},
styles2: {
width: 40,
height: 40,
background: 'rgba(255, 43, 43, .1)',
activeBackground: '#FF2B2B'
},
styles3: {
height: 80,
bottom: 0
},
styles4: {
width: 68,
height: 40
}
}
},
methods: {
vip() {
this.fui.href("/pages/my/qa/qa?index=2&title=VIP专属内容")
},
change(e) {
this.current = e.detail.current;
},
change2(e) {
this.current2 = e.detail.current;
},
change3(e) {
this.current3 = e.detail.current;
},
change4(e) {
this.current4 = e.detail.current;
},
change5(e) {
this.current5 = e.detail.current;
}
}
}
</script>
<style>
page {
font-weight: normal;
}
.fui-wrap {
padding-bottom: 64rpx;
}
.fui-section__title {
margin-left: 32rpx;
}
.fui-banner__item {
width: 100%;
height: 360rpx;
color: #FFFFFF;
display: flex;
align-items: center;
justify-content: center;
font-size: 34rpx;
font-weight: 600;
}
.fui-banner__wrap {
height: 360rpx;
}
.fui-banner__box {
height: 280rpx;
}
.fui-banner__cell {
width: 100%;
height: 280rpx;
color: #FFFFFF;
display: flex;
align-items: center;
justify-content: center;
font-size: 34rpx;
font-weight: 600;
border-radius: 24rpx;
transition: transform .1s linear;
}
.fui-item__scale {
transform: scale3d(.9, .9, 1);
}
</style>