fix(custom): 添加layouts布局、tabbar、刷新加载等

Author: gitboyzcf

.eslintignore

@@ -0,0 +1,4 @@
+src/assets
+node_modules
+src/uni_modules
+dist

.eslintrc.cjs

@@ -2,7 +2,7 @@ module.exports = {
   env: {
     browser: true,
     es2021: true,
-    node: true
+    node: true,
   },
   extends: [
     'eslint:recommended',
@@ -14,47 +14,36 @@ module.exports = {
     // 1. 接入 prettier 的规则
     'prettier',
     'plugin:prettier/recommended',
-    './.eslintrc-auto-import.json'
   ],
   overrides: [
     {
       env: {
-        node: true
+        node: true,
       },
-      files: ['.eslintrc.{js}'],
+      files: ['.eslintrc.{js,cjs}'],
       parserOptions: {
-        sourceType: 'script'
-      }
-    }
+        sourceType: 'script',
+      },
+    },
   ],
-  parserOptions: {
-    parser: '@babel/eslint-parser',
-    requireConfigFile: false,
-    ecmaVersion: 'latest',
-    sourceType: 'module'
-  },
+
   plugins: [
     'vue',
     // 2. 加入 prettier 的 eslint 插件
-    'prettier'
+    'prettier',
   ],
   rules: {
     // 3. 注意要加上这一句，开启 prettier 自动修复的功能
     'prettier/prettier': 'error',
     // turn on errors for missing imports
     'import/no-unresolved': 'off',
     // 对后缀的检测，否则 import 一个ts文件也会报错，需要手动添加'.ts', 增加了下面的配置后就不用了
-    'import/extensions': [
-      'error',
-      'ignorePackages',
-      { js: 'never', jsx: 'never', ts: 'never', tsx: 'never' }
-    ],
+    'import/extensions': 'off',
     // 只允许1个默认导出，关闭，否则不能随意export xxx
     'import/prefer-default-export': ['off'],
     'no-console': ['off'],
     // 'no-unused-vars': ['off'],
-    // '@typescript-eslint/no-unused-vars': ['off'],
-    // 解决vite.config.ts报错问题
+    // 解决vite.config.js报错问题
     'import/no-extraneous-dependencies': 'off',
     'no-plusplus': 'off',
     'no-shadow': 'off',
@@ -64,26 +53,17 @@ module.exports = {
     'no-undef': 'off',
     'no-unused-vars': 'off',
     'no-param-reassign': 'off',
-    'no-redeclare': 'off',
-    'import/named': 'off'
-  },
-  // eslint-import-resolver-typescript 插件，@see https://www.npmjs.com/package/eslint-import-resolver-typescript
-  settings: {
-    'import/parsers': {
-      '@babel/eslint-parser': ['.js', '.jsx']
-    },
-    'import/resolver': {
-      node: {}
-    }
   },
   globals: {
+    $t: true,
     uni: true,
     UniApp: true,
     wx: true,
     WechatMiniprogram: true,
     getCurrentPages: true,
     UniHelper: true,
     Page: true,
-    App: true
-  }
+    App: true,
+    NodeJS: true,
+  },
 }

manifest.config.js

@@ -1,4 +1,4 @@
-// manifest.config.ts
+// manifest.config.js
 import { defineManifestConfig } from '@uni-helper/vite-plugin-uni-manifest'
 import path from 'node:path'
 import { loadEnv } from 'vite'

package.json

@@ -80,6 +80,7 @@
     "@dcloudio/vite-plugin-uni": "3.0.0-3090920231225001",
     "@iconify-json/ep": "^1.1.15",
     "@uni-helper/vite-plugin-uni-components": "^0.1.0",
+    "@uni-helper/vite-plugin-uni-layouts": "^0.1.10",
     "@uni-helper/vite-plugin-uni-manifest": "^0.2.6",
     "@unocss/preset-legacy-compat": "^0.59.4",
     "@unocss/preset-uno": "^0.59.4",

pnpm-lock.yaml

@@ -15,4 +15,9 @@
 <style lang="scss">
   /*每个页面公共css */
   @import 'nutui-uniapp/styles/index.scss';
+  page,
+  html,
+  body {
+    height: 100%;
+  }
 </style>

src/App.vue

@@ -0,0 +1,4 @@
+<!-- default.vue -->
+<template>
+  <slot>main</slot>
+</template>

src/layouts/default.vue

@@ -1,24 +1,54 @@
 {
   "easycom": {
-		"autoscan": true,
-		"custom": {
-			// nutui 规则如下配置 https://nutui-uniapp.pages.dev/guide/quick-start.html
+    "autoscan": true,
+    "custom": {
       "^nut-(.*)?-(.*)": "nutui-uniapp/components/$1$2/$1$2.vue",
       "^nut-(.*)": "nutui-uniapp/components/$1/$1.vue"
-		}
-	},
-	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
-		{
-			"path": "pages/index/index",
-			"style": {
-				"navigationBarTitleText": "uni-app"
-			}
-		}
-	],
-	"globalStyle": {
-		"navigationBarTextStyle": "black",
-		"navigationBarTitleText": "uni-app",
-		"navigationBarBackgroundColor": "#F8F8F8",
-		"backgroundColor": "#F8F8F8"
-	}
+    }
+  },
+  "pages": [
+    {
+      "path": "pages/index/index",
+      "type": "home",
+      "layout": "default",
+      "style": {
+        "navigationBarTitleText": "uni-app"
+      }
+    },
+    {
+      "path": "pages/interaction/interaction",
+      "type": "page",
+      "layout": "default",
+      "style": {
+        "navigationBarTitleText": "互动"
+      }
+    }
+  ],
+  "tabBar": {
+    "color": "#bfbfbf",
+    "selectedColor": "#1296db",
+    "borderStyle": "black",
+    "backgroundColor": "#ffffff",
+    "list": [
+      {
+        "pagePath": "pages/index/index",
+        "iconPath": "static/images/index_i_no.png",
+        "selectedIconPath": "static/images/index_i_yes.png",
+        "text": "首页"
+      },
+      {
+        "pagePath": "pages/interaction/interaction",
+        "iconPath": "static/images/interaction_i_no.png",
+        "selectedIconPath": "static/images/interaction_i_yes.png",
+        "text": "互动"
+      }
+    ]
+  },
+  "globalStyle": {
+    "navigationBarTextStyle": "black",
+    "navigationBarTitleText": "uni-app",
+    "navigationBarBackgroundColor": "#F8F8F8",
+    "backgroundColor": "#F8F8F8"
+  },
+  "subPackages": []
 }

src/pages.json

@@ -0,0 +1,75 @@
+<template>
+  <view class="h-full w-full">
+    <mescroll-uni
+      :down="{ auto: false }"
+      :fixed="false"
+      :safearea="true"
+      @init="mescrollInit"
+      @down="downCallback"
+      @up="upCallback"
+    >
+      <view
+        class="item my-15rpx b-b-solid b-b-1rpx b-b-color-[#cccccc]"
+        v-for="(item, index) in dataList"
+        :key="index"
+      >
+        <text class="text-28rpx font-bold">{{ item.title }}</text>
+        <view class="mt-5 text-18rpx color-[#9999]">{{ item.body }}</view>
+      </view>
+      <nut-empty
+        v-if="isError && dataList.length == 0"
+        image="error"
+        description="加载失败/错误"
+      ></nut-empty>
+    </mescroll-uni>
+  </view>
+</template>
+<script setup>
+  // https://github.com/mescroll/mescroll
+  import MescrollUni from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-uni.vue'
+
+  const { API_DEMO_GET } = useRequest()
+  const dataList = ref([])
+  const queryParams = reactive({
+    pageNo: 1,
+    pageSize: 10
+  })
+  const isError = ref(false)
+
+  const queryList = () => {
+    return new Promise((resolve, reject) => {
+      // 此处请求仅为演示，请替换为自己项目中的请求
+      API_DEMO_GET({ _start: queryParams.pageNo, _limit: queryParams.pageSize })
+        .then((res) => {
+          resolve(res)
+        })
+        .catch(reject)
+    })
+  }
+  const mescrollInit = async (mescroll) => {
+    console.log(mescroll)
+  }
+
+  const downCallback = async (mescroll) => {
+    try {
+      queryParams.pageNo = 1
+      const res = await queryList()
+      dataList.value = res
+      mescroll.endSuccess() // 隐藏加载进度
+    } catch (error) {
+      mescroll.endErr()
+      isError.value = true
+    }
+  }
+  const upCallback = async (mescroll) => {
+    try {
+      const res = await queryList()
+      dataList.value = dataList.value.concat(res)
+      mescroll.endSuccess(dataList.value.length)
+      queryParams.pageNo++
+    } catch (error) {
+      mescroll.endErr()
+      isError.value = true
+    }
+  }
+</script>

src/pages/interaction/components/mescrollBox.vue

@@ -0,0 +1,33 @@
+<template>
+  <view class="interaction h-full">
+    <nut-tabs v-model="state.tab11value" type="smile" swipeable>
+      <!-- #ifdef H5 -->
+      <nut-tab-pane class="h-full important-p-0" title="NutUi">
+        <iframe
+          class="h-full w-full"
+          src="https://nutui-uniapp.pages.dev/ui/#/"
+          frameborder="0"
+        ></iframe>
+      </nut-tab-pane>
+      <!-- #endif -->
+      <nut-tab-pane class="important-p-0 important-px-2" title="加载刷新"
+        ><MescrollBox
+      /></nut-tab-pane>
+      <nut-tab-pane title="Tab 3"> Tab 3 </nut-tab-pane>
+    </nut-tabs>
+  </view>
+</template>
+<script setup>
+  import MescrollBox from './components/mescrollBox.vue'
+  const state = reactive({
+    tab11value: '0'
+  })
+</script>
+<style lang="scss" scoped>
+  :deep(.nut-tabs) {
+    height: 100%;
+    .nut-tabs__content {
+      height: calc(100% - var(--window-bottom));
+    }
+  }
+</style>