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/scroll-view/basic/scroll-view.vue
+89
View File
@@ -0,0 +1,89 @@
<template>
<view class="vip-component-basic-scroll-view">
<!-- 顶部自定义导航 -->
<tn-nav-bar fixed>自定义下拉刷新</tn-nav-bar>
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
<tn-scroll-view
:customNavHeight="vuex_custom_bar_height"
:refreshState="refreshState"
@refresh="handleRefresh"
>
<view class="scroll-view__content">
<block v-for="i in 10" :key="i">
<view class="list__item tn-flex tn-flex-direction-row tn-flex-row-left tn-flex-col-center">
<view class="list__image">
<image src="https://resource.tuniaokj.com/images/shop/prototype2.jpg"></image>
</view>
<view class="list__content tn-flex tn-flex-direction-column tn-flex-col-top tn-flex-row-left">
<view class="list__content__title">tuniaoUI</view>
<view class="list__content__desc tn-text-ellipsis">图鸟UI助力开发者快速开发页面，提供丰富的页面模板</view>
</view>
</view>
</block>
</view>
</tn-scroll-view>
</view>
</view>
</template>
<script>
export default {
name: 'VipComponentBasicScrollView',
data() {
return {
refreshState: false
}
},
methods: {
// 处理触发刷新事件
handleRefresh() {
this.refreshState = true
setTimeout(() => {
this.refreshState = false
}, 2000)
}
}
}
</script>
<style lang="scss" scoped>
.scroll-view {
&__content {
.list {
&__item {
height: 140rpx;
margin: 0 10rpx;
margin-top: 24rpx;
}
&__image {
width: 140rpx;
height: 140rpx;
image {
width: 100%;
height: 100%;
}
}
&__content {
padding-left: 16rpx;
height: 100%;
width: 580rpx;
&__title {
padding-bottom: 10rpx;
font-size: 40rpx;
}
&__desc {
width: 100%;
}
}
}
}
}
</style>
vipPage/components/scroll-view/custom/scroll-view.vue
+131
View File
@@ -0,0 +1,131 @@
<template>
<view class="vip-component-basic-scroll-view">
<!-- 顶部自定义导航 -->
<tn-nav-bar fixed>自定义下拉刷新</tn-nav-bar>
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
<tn-scroll-view
:customNavHeight="vuex_custom_bar_height"
:refreshState="refreshState"
@refresh="handleRefresh"
@refreshReady="handleRefreshReady"
@refreshStop="resetRefresh"
>
<template v-slot:pulldown>
<view class="refresh">
<view class="refresh__icon" :class="[`tn-icon-down-arrow`, {'refresh__icon--revolve': refreshIconRevolve}]"></view>
<view class="refresh__text">{{ refreshText }}</view>
</view>
</template>
<view class="scroll-view__content">
<block v-for="i in 10" :key="i">
<view class="list__item tn-flex tn-flex-direction-row tn-flex-row-left tn-flex-col-center">
<view class="list__image">
<image src="https://resource.tuniaokj.com/images/shop/prototype2.jpg"></image>
</view>
<view class="list__content tn-flex tn-flex-direction-column tn-flex-col-top tn-flex-row-left">
<view class="list__content__title">tuniaoUI</view>
<view class="list__content__desc tn-text-ellipsis">图鸟UI助力开发者快速开发页面，提供丰富的页面模板</view>
</view>
</view>
</block>
</view>
</tn-scroll-view>
</view>
</view>
</template>
<script>
export default {
name: 'VipComponentBasicScrollView',
data() {
return {
refreshState: false,
refreshText: '下拉刷新',
refreshIconRevolve: false
}
},
methods: {
// 处理触发刷新事件
handleRefresh() {
this.refreshState = true
this.refreshText = '正在刷新'
setTimeout(() => {
this.refreshState = false
this.resetRefresh()
}, 2000)
},
// 处理刷新准备事件
handleRefreshReady() {
this.refreshText = '松开刷新'
this.refreshIconRevolve = true
},
// 重置刷新
resetRefresh() {
this.refreshText = '下拉刷新'
this.refreshIconRevolve = false
}
}
}
</script>
<style lang="scss" scoped>
.scroll-view {
&__content {
.list {
&__item {
height: 140rpx;
margin: 0 10rpx;
margin-top: 24rpx;
}
&__image {
width: 140rpx;
height: 140rpx;
image {
width: 100%;
height: 100%;
}
}
&__content {
padding-left: 16rpx;
height: 100%;
width: 580rpx;
&__title {
padding-bottom: 10rpx;
font-size: 40rpx;
}
&__desc {
width: 100%;
}
}
}
}
}
.refresh {
display: flex;
align-items: center;
justify-content: center;
line-height: 40rpx;
text-align: center;
&__icon {
transition: transform 0.25s ease-in-out;
transform-origin: center center;
&--revolve {
transform: rotateZ(180deg);
}
}
&__text {
padding-left: 10rpx;
}
}
</style>
vipPage/components/scroll-view/index.vue
+37
View File
@@ -0,0 +1,37 @@
<template>
<view class="vip-component-scroll-view">
<!-- 顶部自定义导航 -->
<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: 'VipComponentsScrollView',
components: { multipleOptionsDemo },
data() {
return {
// 选项列表数据
optionsList: [
{ title: '普通下拉加载', desc: '使用默认的下拉样式', url: '/vipPage/components/scroll-view/basic/scroll-view' },
{ title: '自定义下拉加载', desc: '通过传递的事件自定义下拉样式', url: '/vipPage/components/scroll-view/custom/scroll-view' }
]
}
}
}
</script>
<style lang="scss" scoped>
</style>