瀏覽代碼

update 更新

wangxy 2 月之前
父節點
當前提交
166f448cc8
共有 3 個文件被更改,包括 244 次插入0 次删除
  1. 135 0
      components/MtaScrollView/MtaScrollView.vue
  2. 104 0
      components/btnMenu.vue
  3. 5 0
      package-lock.json

+ 135 - 0
components/MtaScrollView/MtaScrollView.vue

@@ -0,0 +1,135 @@
+<template>
+	<!-- 无限滚动区域 -->
+	<scroll-view class="scroll-container" :scroll-y="true" :refresher-enabled="true" :refresher-triggered="triggered"
+		:refresher-threshold="100" refresher-background="#F3F3F4" @refresherrefresh="onRefresh"
+		@scrolltolower="onReachBottom" @refresherrestore="onRestore">
+		<slot :list="list"></slot>
+		<uni-load-more :status="status" :contentText="contentText"></uni-load-more>
+	</scroll-view>
+</template>
+
+<script setup>
+	import {
+		ref,
+		onMounted,
+		computed,
+		reactive,
+	} from "vue";
+
+	import {
+		onLoad
+	} from "@dcloudio/uni-app"
+
+	const props = defineProps({
+		refreshFn: {
+			type: Function,
+			required: true
+		},
+		size: {
+			type: Number,
+			default: 5
+		},
+	})
+
+	const page = ref(1);
+	const list = ref([]); // 项目列表
+	const triggered = ref(false); // 是否触发下拉刷新
+	const freshing = ref(false); // 是否加载中
+	const total = ref(0); // 项目总数
+	const status = ref('more');
+	const contentText = {
+		contentdown: '查看更多',
+		contentrefresh: '加载中',
+		contentnomore: '没有更多'
+	}
+
+	/**
+	 * 是否已完全加载
+	 */
+	const isComplete = computed(() => {
+		if (total.value === 0) {
+			return false;
+		}
+
+		return total.value === list.value.length
+	})
+
+	// 重置
+	function reset() {
+		list.value = [];
+		page.value = 1;
+		triggered.value = false;
+		freshing.value = false;
+		total.value = 0;
+		status.value = 'more';
+	}
+
+	onLoad(() => {
+		freshing.value = false;
+		setTimeout(() => {
+			triggered.value = true
+		}, 50)
+	})
+
+	// 获取数据
+	function getData(action) {
+		const options = Object.assign({}, {
+			page: page.value,
+			size: props.size,
+		});
+
+		// 补充参数 
+		if (props.otherOption) {
+			options = Object.assign({}, options, props.otherOption);
+		}
+
+		props.refreshFn(options).then(res => {
+			total.value = res.data.total;
+			action === "do-search" && (list.value = res.data.data); // 查询更新
+			action === "pull-down-refresh" && (list.value = res.data.data); // 下拉更新数据
+			action === "reach-buttom" && (list.value = [...list.value, ...res.data.data]); // 无限滚动更新数据
+		}).finally(() => {
+			triggered.value = false;
+			freshing.value = false;
+			if (total.value !== list.value.length) {
+				status.value = 'more';
+			} else {
+				status.value = 'noMore';
+			}
+		})
+	}
+
+
+	// 下拉刷新触发
+	function onRefresh() {
+		if (freshing.value) return;
+		status.value = 'loading';
+		freshing.value = true;
+		triggered.value = true;
+		page.value = 1;
+		getData('pull-down-refresh');
+	}
+
+	// 下拉刷新复位
+	function onRestore() {
+		triggered.value = 'restore'; // 需要重置
+	}
+
+	// 无限滚动
+	function onReachBottom() {
+		if (freshing.value) return;
+		if (isComplete.value) return;
+		freshing.value = true;
+		page.value++;
+		getData('reach-buttom')
+	}
+
+
+	defineExpose({
+		onRefresh
+	})
+</script>
+
+<style>
+
+</style>

+ 104 - 0
components/btnMenu.vue

@@ -0,0 +1,104 @@
+<template>
+	<view>
+		<uni-icons type="list" size="30" @click="showDrawer"></uni-icons>
+
+		<uni-drawer ref="showLeft" mode="left" :width="320">
+			<uni-collapse ref="collapse" accordion v-model="data.activeMenu">
+				<uni-collapse-item :title="item.title" v-for="item in data.list" :key="item.title">
+					<view v-for="cIt in item.children" :key="item.title" @click="handleClick(cIt)">
+						<view class="content">
+							<text class="text" :class="{active: data.activePath}">{{cIt.title}}</text>
+						</view>
+					</view>
+				</uni-collapse-item>
+			</uni-collapse>
+
+			<view class="close">
+				<button @click="closeDrawer('showLeft')"><text class="word-btn-white">关闭Drawer</text></button>
+			</view>
+		</uni-drawer>
+	</view>
+</template>
+
+<script setup>
+	import {
+		ref,
+		reactive
+	} from "vue"
+	const showLeft = ref(null)
+	import { onLoad } from "@dcloudio/uni-app"
+	
+	const data = reactive({
+		list: [{
+				title: '1',
+				url: '',
+				children: [{
+					title: '1-1',
+					url: '/pages/dqgzDangjiangongzuo/dqgzDangjiangongzuo'
+				}, {
+					title: '1-2',
+					url: 'http://www.baidu.com',
+					type: 'link'
+				}, {
+					title: '1-3',
+					url: ''
+				}, {
+					title: '1-4',
+					url: ''
+				}, ]
+			},
+			{
+				title: '2',
+				url: '',
+				children: [{
+					title: '2-1',
+					url: ''
+				}, {
+					title: '2-2',
+					url: ''
+				}, {
+					title: '2-3',
+					url: ''
+				}, {
+					title: '2-4',
+					url: ''
+				}]
+			}
+		],
+		activeMenu: null,
+		activePath: '',
+	})
+	
+	onLoad(() => {
+		data.activePath = getCurrentPages().route;
+		data.activeMenu = data.list.find(item => item.children.some(cit => cit.url == data.activePath));
+		console.log( 'ccc:', data.activeMenu, data.activePath )
+	})
+
+	
+
+	function showDrawer() {
+		showLeft.value.open();
+	}
+
+	function closeDrawer() {
+		showLeft.value.close();
+	}
+
+	function handleClick(data) {
+		console.log(`菜单:${data.title};路径:${data.url}`);
+		if (data.type == 'link') {
+			window.location.href = data.url;
+			return;
+		}
+		if (data.url) {
+			uni.navigateTo({
+				url: data.url
+			})
+		}
+	}
+</script>
+
+<style>
+
+</style>

+ 5 - 0
package-lock.json

@@ -186,6 +186,11 @@
         "mime-db": "1.52.0"
       }
     },
+    "mp-html": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmmirror.com/mp-html/-/mp-html-2.5.1.tgz",
+      "integrity": "sha512-7BEH8dnQ89kOIyjdoYni8zcc0QAg+lgEWg0n9or9q2D4l26JNG+KPzHfttDyisC/5S7aPBblpXrFTYQv475w/Q=="
+    },
     "pinia": {
       "version": "2.3.1",
       "resolved": "https://registry.npmmirror.com/pinia/-/pinia-2.3.1.tgz",