Browse Source

feat: delete a useless file

Burt 2 năm trước cách đây
mục cha
commit
0943ddcbe0
1 tập tin đã thay đổi với 0 bổ sung151 xóa
  1. 0 151
      src/pages/demo/page/throughout/index.vue

+ 0 - 151
src/pages/demo/page/throughout/index.vue

@@ -1,151 +0,0 @@
-<route lang="json5">
-{
-  style: {
-    navigationBarTitleText: '通屏+下拉刷新+自定义导航栏',
-    enablePullDownRefresh: true,
-    backgroundColor: '#23c09c', // 这个背景色要与页面的.top-section的背景图差不多,这样下拉刷新看起来才比较协调
-    'app-plus': {
-      titleNView: {
-        type: 'transparent',
-      },
-    },
-    'mp-weixin': {
-      navigationStyle: 'custom',
-    },
-  },
-}
-</route>
-
-<template>
-  <!-- #ifdef MP-WEIXIN -->
-  <view class="fly-navbar" :style="{ paddingTop: safeAreaInsets?.top + 'px' }">
-    <!-- 1/3,多于1个页面,用返回图标 -->
-    <navigator v-if="pages.length > 1" open-type="navigateBack" class="left-icon">
-      <view class="i-carbon-chevron-left text-current"></view>
-    </navigator>
-    <!-- 2/3,只有1个页面,如果不是tabbar,需要首页图标 -->
-    <!-- 这种情况一般出现在用户直接打开分享出去的详情页面,或者使用redirectTo等API -->
-    <navigator
-      v-else-if="!isTabbar"
-      open-type="switchTab"
-      url="/pages/index/index"
-      class="left-icon"
-    >
-      <view class="i-carbon-home text-current"></view>
-    </navigator>
-    <!-- 3/3,如果当前页就是tabbar页,不用去首页,也就是什么图标都不需要 -->
-    <view class="title">{{ '我是标题' }}</view>
-  </view>
-  <!-- #endif -->
-  <scroll-view
-    enable-back-to-top
-    scroll-y
-    class="scroll-view-bg flex-1 h-full"
-    id="scroller"
-    refresher-enabled
-    @scrolltolower="onScrollToLower"
-    @refresherrefresh="onRefresherRefresh"
-    :refresher-triggered="isTriggered"
-  >
-    <view class="top-section" :style="{ paddingTop: safeAreaInsets?.top + 'px' }">
-      <view class="pt-1">顶部区域</view>
-      <view>可以是标题,也可以是个人中心头像等</view>
-      <view>建议本区域高度不低于200rpx</view>
-    </view>
-    <view class="p-2 leading-6 bg-white">
-      注意,上面的导航栏渐变效果仅微信端支持,且上面的导航栏无法抽为组件引入使用,否则滚动效果没有了。如果不只是微信小程序使用,可以
-      onPageScroll 实现全端效果一样,另外如果是app端,还可以配置 titleNView。参考
-      https://uniapp.dcloud.net.cn/tutorial/page.html#onpagescroll 。
-    </view>
-    <navigator
-      url="/pages/index/demo/throughout"
-      open-type="navigate"
-      hover-class="navigator-hover"
-    >
-      <button>去二级详情页</button>
-    </navigator>
-    <view class="bg-white">
-      <fly-content :line="30" />
-    </view>
-  </scroll-view>
-</template>
-
-<script lang="ts" setup>
-import useNavbarWeixin from '@/hooks/useNavbarWeixin'
-import { onPullDownRefresh } from '@dcloudio/uni-app'
-
-const { pages, isTabbar, onScrollToLower, safeAreaInsets } = useNavbarWeixin()
-
-// 发现原生下拉刷新效果并不好,在微信里面只有顶部导航栏下拉才生效,页面区域下拉不生效,体验不好,结合自定义下拉刷新效果很好
-onPullDownRefresh(() => {
-  setTimeout(function fn() {
-    console.log('refresh - onPullDownRefresh')
-    // 关闭动画
-    uni.stopPullDownRefresh()
-  }, 1000)
-})
-
-// 当前下拉刷新状态
-const isTriggered = ref(false)
-// 自定义下拉刷新被触发
-const onRefresherRefresh = async () => {
-  // 开始动画
-  isTriggered.value = true
-  setTimeout(function fn() {
-    console.log('refresh - onRefresherRefresh')
-    // 关闭动画
-    isTriggered.value = false
-  }, 1000)
-}
-</script>
-
-<style lang="scss">
-.scroll-view-bg {
-  // 这个背景色要与.top-section的背景图差不多,这样下拉刷新看起来才比较协调
-  background-color: #23c09c;
-}
-
-// 这个区域最好要大于200rpx,效果会更好
-.top-section {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  min-height: 200rpx;
-  padding: 40rpx 0;
-  line-height: 2;
-  color: #fff;
-  background-image: url('https://cip-shopping-page-0eysug01066a9e-1302818703.tcloudbaseapp.com/fly/top-bg.png');
-  background-size: cover;
-}
-
-.fly-navbar {
-  position: fixed;
-  top: 0;
-  left: 0;
-  z-index: 9;
-  width: 750rpx;
-  color: #000;
-  background-color: transparent;
-
-  .left-icon {
-    position: absolute;
-    left: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 44px;
-    height: 44px;
-    font-size: 44rpx;
-    color: #000;
-  }
-
-  .title {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: 44px;
-    font-size: 32rpx;
-    color: transparent;
-  }
-}
-</style>