molong/tuniao-ui
1
0
Fork 0
mirror of https://gitee.com/TSpecific/tuniao-ui.git synced 2026-06-08 04:23:17 +08:00
Code Issues Packages Projects Releases Wiki Activity

更新众多VIP页面模板

Browse Source
This commit is contained in:
kert
2026-03-19 10:47:37 +08:00
parent d355989fcf
commit 6abd3faa0c
69 changed files with 27601 additions and 1307 deletions
Download Patch File Download Diff File Expand all files Collapse all files
vipPage/components/custom-swiper/horizontal/custom-swiper.vue
+110
View File
@@ -0,0 +1,110 @@
<template>
<view class="vip-component-custom-swiper--horizontal tn-safe-area-inset-bottom">
<!-- 顶部自定义导航 -->
<tn-nav-bar fixed>图鸟轮播(横向)</tn-nav-bar>
<!-- 页面内容 -->
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
<tn-custom-swiper
class="swiper"
:current="current"
:intervel="3000"
:autoplay="true"
:circular="true"
indicatorType="round"
:indicator="true"
indicatorPosition="topCenter"
indicatorActiveColor="#838383"
:customSwiperStyle="customSwiperStyle"
:prevSwiperStyle="prevSwiperStyle"
:nextSwiperStyle="nextSwiperStyle"
>
<block v-for="(item, index) in swiperList" :key="index">
<tn-custom-swiper-item class="swiper__item">
<image :src="item.image" style="width: 100%;" mode="widthFix"></image>
<view class="text">{{ item.title }}</view>
</tn-custom-swiper-item>
</block>
</tn-custom-swiper>
</view>
</view>
</template>
<script>
export default {
name: 'VipComponentCustomHorizontalSwiper',
data() {
return {
current: 0,
swiperList: [
{
title: '图鸟UI 会员促销1',
image: 'https://resource.tuniaokj.com/images/swiper/read.jpg'
},
{
title: '图鸟UI 会员促销2',
image: 'https://resource.tuniaokj.com/images/swiper/read.jpg'
},
{
title: '图鸟UI 会员促销3',
image: 'https://resource.tuniaokj.com/images/swiper/read.jpg'
},
{
title: '图鸟UI 会员促销4',
image: 'https://resource.tuniaokj.com/images/swiper/read.jpg'
},
{
title: '图鸟UI 会员促销5',
image: 'https://resource.tuniaokj.com/images/swiper/read.jpg'
}
],
// 当前swiper的自定义样式
customSwiperStyle: {
transform: 'scale(0.7)',
transformOrigin: 'center center',
transition: 'all 0.5s ease-out',
left: '0px'
},
// 前一个swiper的自定义样式
prevSwiperStyle: {
transform: 'scale(0.8) perspective(200rpx) rotateY(-10deg) translateZ(-280rpx)',
left: '280rpx'
},
// 后一个swiper的自定义样式
nextSwiperStyle: {
transform: 'scale(0.8) perspective(200rpx) rotateY(10deg) translateZ(-280rpx)',
left: '-280rpx'
}
}
}
}
</script>
<style lang="scss" scoped>
.vip-component-custom-swiper--horizontal {
background-color: $tn-bg-gray-color;
}
.swiper {
width: 100%;
height: 390rpx;
display: block;
&__item {
image {
border-radius: 10rpx;
width: 100%;
height: 100%;
}
.text {
position: absolute;
left: 10rpx;
bottom: 0;
font-size: 46rpx;
color: #FFFFFF;
}
}
}
</style>
vipPage/components/custom-swiper/index.vue
+37
View File
@@ -0,0 +1,37 @@
<template>
<view class="vip-component-custom-swiper">
<!-- 顶部自定义导航 -->
<tn-nav-bar fixed>图鸟轮播(实验)</tn-nav-bar>
<!-- 页面内容 -->
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
<multiple-options-demo
:list="optionsList"
></multiple-options-demo>
</view>
</view>
</template>
<script>
import multipleOptionsDemo from '@/libs/components/multiple-options-demo'
export default {
name: 'VipComponentsCustomSwiper',
components: { multipleOptionsDemo },
data() {
return {
// 选项列表数据
optionsList: [
{ title: '横向滑动', desc: '横向滑动轮播', url: '/vipPage/components/custom-swiper/horizontal/custom-swiper' },
{ title: '纵向滑动', desc: '纵向滑动轮播', url: '/vipPage/components/custom-swiper/vertical/custom-swiper' }
]
}
}
}
</script>
<style lang="scss" scoped>
</style>
vipPage/components/custom-swiper/vertical/custom-swiper.vue
+106
View File
@@ -0,0 +1,106 @@
<template>
<view class="vip-component-custom-swiper--horizontal tn-safe-area-inset-bottom">
<!-- 顶部自定义导航 -->
<tn-nav-bar fixed>图鸟轮播(纵向)</tn-nav-bar>
<!-- 页面内容 -->
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
<view class="container" :style="{height: containerHeight + 'px'}">
<tn-custom-swiper
class="swiper"
:current="0"
:duration="450"
:autoplay="true"
:circular="true"
:vertical="true"
:indicator="true"
indicatorType="round"
indicatorPosition="topCenter"
indicatorActiveColor="#838383"
>
<block v-for="(item, index) in swiperList" :key="index">
<tn-custom-swiper-item class="swiper__item">
<image :src="item.image" mode="heightFix"></image>
<view class="text">{{ item.title }}</view>
</tn-custom-swiper-item>
</block>
</tn-custom-swiper>
</view>
</view>
</view>
</template>
<script>
export default {
name: 'VipComponentCustomVerticalSwiper',
data() {
return {
containerHeight: 0,
swiperList: [
{
title: '图鸟UI YYDS-1',
image: 'https://resource.tuniaokj.com/images/swiper/read.jpg'
},
{
title: '图鸟UI YYDS-2',
image: 'https://resource.tuniaokj.com/images/swiper/read.jpg'
},
{
title: '图鸟UI YYDS-3',
image: 'https://resource.tuniaokj.com/images/swiper/read.jpg'
},
{
title: '图鸟UI YYDS-4',
image: 'https://resource.tuniaokj.com/images/swiper/read.jpg'
},
{
title: '图鸟UI YYDS-5',
image: 'https://resource.tuniaokj.com/images/swiper/read.jpg'
}
],
}
},
onLoad() {
this.getContainerHeight()
},
methods: {
// 获取可用区域的高度
getContainerHeight() {
const systemInfo = uni.getSystemInfoSync()
this.containerHeight = systemInfo.safeArea.height - this.vuex_custom_bar_height + systemInfo.statusBarHeight
}
}
}
</script>
<style lang="scss" scoped>
.vip-component-custom-swiper--horizontal {
background-color: $tn-bg-gray-color;
}
.swiper {
width: 100%;
height: 100%;
display: block;
&__item {
width: 100%;
height: 100%;
image {
border-radius: 10rpx;
width: 100%;
height: 100%;
}
.text {
position: absolute;
left: 10rpx;
bottom: 0;
font-size: 46rpx;
color: #FFFFFF;
}
}
}
</style>