更新众多VIP页面模板

vipPage/components/scroll-view/basic/scroll-view.vue

@@ -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>