更新众多VIP页面模板

2026-06-07 20:13:16 +08:00 · 2026-03-19 10:47:37 +08:00
parent d355989fcf
commit 6abd3faa0c
69 changed files with 27601 additions and 1307 deletions
@@ -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>