uniapp+vue3,对请求的简单封装配置以及使用

请求封装

const BASE_URL = 'http://localhost:8888';

const http = ({
	url,
	data = {},
	method = 'get',
	header = {},
}) => {
	let token = uni.getStorageSync('token') || '';
	if (!url) return;
	return new Promise((resolve, reject) => {
		uni.request({
			url: BASE_URL + url,
			method,
			data,
			header: {
				token,
				...header
			},
			success: (res) => {
				resolve(res)
			},
			fail: (err) => {
				reject(err);
			}
		});
	})
}
export default http;

main.js配置

import App from './App';
//引入封装的js文件
import http from '@/utils/http.js'

// #ifdef VUE3
import {
	createSSRApp
} from 'vue';

export function createApp() {
	const app = createSSRApp(App);
	//配置全局属性
	app.config.globalProperties.$http=http
	return {
		app
	}
}
// #endif

在xxx.vue中的应用

<script>
	import {
		onMounted,
		getCurrentInstance
	} from "vue";
	export default {
	
		setup() {
			const {
				proxy
			} = getCurrentInstance();
			onMounted(() => {
			
				proxy.$http({
					url: 'xxx',
					data: {	
					},
					method: ''
				}).then(res => {

				})
			})
		}
	}
UniAppVue3封装下拉加载功能可以通过自定义指令来实现。下面是一个简单封装示例: 1. 创建一个名为 `loadmore` 的自定义指令。 ```javascript // main.js import { createApp } from &#39;vue&#39; import App from &#39;./App.vue&#39; const app = createApp(App) app.directive(&#39;loadmore&#39;, { mounted(el, binding) { const selectWrap = el.querySelector(&#39;.uni-scroll-wrapper&#39;) selectWrap.addEventListener(&#39;scroll&#39;, function() { const scrollDistance = selectWrap.scrollHeight - selectWrap.clientHeight - selectWrap.scrollTop if (scrollDistance <= binding.value.distance) { binding.value.callback() } }) } }) app.mount(&#39;#app&#39;) ``` 2. 在需要应用下拉加载的组件中使用自定义指令。 ```html <template> <div class="container"> <ul class="list" v-loadmore="{ distance: 50, callback: loadMoreData }"> <li v-for="item in list" :key="item.id">{{ item.title }}</li> </ul> </div> </template> <script> export default { data() { return { list: [], page: 1 } }, mounted() { this.loadData() }, methods: { loadData() { // 发起请求获取数据,这里使用 setTimeout 模拟异步请求 setTimeout(() => { const newData = // 获取新的数据 this.list = this.list.concat(newData) this.page++ }, 500) }, loadMoreData() { // 下拉加载更多数据 this.loadData() } } } </script> ``` 在上述示例中,我们创建了一个自定义指令 `loadmore`,并将其应用在包含列表的 `<ul>` 元素上。指令的参数是一个对象,包含了两个属性:`distance` 表示距离底部多少距离触发加载更多的回调函数,`callback` 表示加载更多数据的回调函数。当滚动到距离底部小于等于指定距离时,会触发回调函数加载更多数据。 希望这个简单封装示例能够帮助到你!
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值