uniapp视频和图片混合轮播

由于公司领导需要做视频和图片同时轮播的效果,本来以为很简单就能实现,没想到有大坑,在app端video的层级太高,查看插件市场并没有此类组件,于是自己手撸一个,也方便大家一起使用。        

关于uniapp中video在app端层级过高的问题,导致在轮播的时候出现错位、卡顿、无法滑动等问题,可以使用视频、图片混合轮播 - DCloud 插件市场,该组件完美解决此类问题,兼容app、微信小程序、h5,使用vue2编写,如果使用vue3需要自己修改部分代码

        使用方法:

1、导入组件

2、找到此文件。没有的话重新导入

3、使用案例,在使用的地方导入即可

<template>
	<view class="swiper_view">
		<MySwiper :list="bannerList"></MySwiper>
	</view>
</template>

<script>
	import MySwiper from '@/components/fuyu-MixSwiper/fuyu-MixSwiper/.vue'
	export default {
		components: {
			MySwiper
		},
		data() {
			return {
				bannerList:[
					{
						id: 1,
						url: 'https://www.w3schools.com/html/picture_example.jpg'
					},
					{
						id: 2,
						url: 'https://www.w3schools.com/html/mov_bbb.mp4'
					},
					{
						id: 3,
						url: 'https://www.w3schools.com/html/mov_bbb.mp4'
					},
					{
						id: 4,
						url: 'https://www.w3schools.com/html/picture_example.jpg'
					},
					{
						id: 5,
						url: 'https://www.w3schools.com/html/mov_bbb.mp4'
					},
					{
						id: 6,
						url: 'https://www.w3schools.com/html/picture_example.jpg'
					},
				]
			}
		},
		methods: {
		}
	}
</script>
<style scoped>
	.swiper_view {
		height: 300rpx;
		background-color: aliceblue;
		border-radius: 20rpx;
		overflow: hidden;
		margin: 20rpx;
		background-color: black;
	}
</style>
<think>好的,我现在需要处理用户关于uniapp常见面试题的请求。首先,我要回忆一下uniapp的相关知识点,确保自己理解正确。用户可能希望了解面试中经常被问到的问题,所以我需要整理出高频问题。 首先,我应该从uniapp的基本概念开始,比如定义、特点、优势,这些通常是面试的开场问题。然后,需要涉及核心知识点,比如跨平台原理、生命周期、条件编译、路由管理等。这些都是开发中必须掌握的,面试官可能会深入提问。 接下来,组件API部分也很重要。用户可能想知道uniapp内置了哪些常用组件,比如view、scroll-view,以及如何调用设备功能,如相机、地理位置。这部分需要简明扼要地列出关键点。 然后,状态管理是一个常见话题,尤其是vuex的使用。需要说明在uniapp中如何集成vuex,以及它的作用。数据请求方面,uni.request封装也是常问点,要提到封装的方法常见问题,比如拦截器。 性能优化是另一个重点,包括减少API调用、图片压缩、分包加载等。面试中通常会考察候选人解决实际问题的能力,所以优化策略必须具体。 多端兼容性问题,如何处理不同平台的差异,比如条件编译平台特有API的适配。这部分需要举例说明,让回答更生动。 实战问题可能包括页面传参、导航跳转、下拉刷新等,这些都是开发中常见的场景,需要给出解决方案示例代码。 最后,高级问题如原理机制、原生交互、热更新等,虽然可能较少被问到,但准备充分可以展示深度。同时,注意事项如代码规范、测试流程也是加分项。 在整理过程中,要确保每个问题点准确无误,避免错误信息。同时,结构要清晰,分点列出,方便用户阅读。可能还需要检查是否有遗漏的重要知识点,比如uniapp与原生应用的交互,或者打包发布流程。 另外,需要注意用户可能对某些概念不太熟悉,所以解释时要尽量简洁明了,避免过于技术化的术语,必要时举例说明。例如,解释条件编译时,可以简单说明其作用使用场景。 最后,总结部分要强调重点,提醒用户不仅要记忆答案,还要结合项目经验理解原理,这样在面试中才能应对自如。</think>以下是一些常见的UniApp面试题及核心知识点整理,供参考: --- ### 一、基础概念 1. **UniApp是什么?** - 基于Vue.js的跨平台开发框架,可编译到iOS、Android、H5、小程序等多个平台。 - 核心优势:**"一次开发,多端发布"**,通过条件编译处理平台差异。 2. **UniApp的跨平台原理?** - 通过统一语法规范(Vue语法 + 小程序API)编写代码。 - 编译时根据不同平台转换为目标代码(如微信小程序、H5的Vue项目等)。 3. **UniApp与原生开发的区别?** - 性能:原生 > UniApp(但UniApp可通过优化接近原生体验)。 - 开发效率:UniApp跨平台特性显著提升效率。 --- ### 二、核心知识点 4. **UniApp的生命周期** - 应用生命周期:`onLaunch`, `onShow`, `onHide` - 页面生命周期:`onLoad`, `onShow`, `onReady`, `onUnload` - 组件生命周期:与Vue一致(`created`, `mounted`等) 5. **条件编译** 通过注释语法实现多端代码差异化: ```javascript // #ifdef H5 console.log('仅H5生效'); // #endif ``` 6. **路由管理** - 使用`uni.navigateTo`、`uni.redirectTo`等API跳转页面。 - 页面路径需在`pages.json`中预先配置。 --- ### 三、组件与API 7. **常用内置组件** - `view`(代替div)、`scroll-view`(滚动区域)、`swiper`(轮播图) - `uni-`前缀组件:如`uni-popup`、`uni-icons` 8. **如何调用设备功能?** - 摄像头:`uni.chooseImage` - 地理位置:`uni.getLocation` - 扫码:`uni.scanCode` --- ### 四、状态管理与数据请求 9. **Vuex在UniApp中的使用** - 通过`store`目录管理全局状态,与Vue项目用法一致。 10. **数据请求封装** ```javascript uni.request({ url: 'https://api.example.com', method: 'GET', success: (res) => { /*处理数据*/ } }); ``` - 通常封装为统一拦截器,处理Token、错误码等。 --- ### 五、性能优化 11. **常见优化手段** - 减少`setData`调用频率 - 使用图片压缩工具(如TinyPNG) - 分包加载:在`pages.json`中配置`subPackages` --- ### 六、高频实战问题 12. **页面间传参方式** - URL传参:`uni.navigateTo({url: '/page?id=1'})` - 全局变量:`getApp().globalData` - Vuex状态管理 13. **如何处理下拉刷新?** ```json // pages.json { "pages": [{ "style": { "enablePullDownRefresh": true } }] } ``` ```javascript // 页面监听下拉事件 onPullDownRefresh() { /*刷新逻辑*/ } ``` --- ### 七、高级问题 14. **UniApp的底层渲染原理** - 小程序端:Webview渲染 - App端:混合渲染(Webview +原生组件) 15. **如何与原生交互?** - 使用`uni.requireNativePlugin`调用原生插件 - 通过`uni.postMessage`与Webview通信 --- ### 八、注意事项 - **代码规范**:遵循Vue单文件组件结构 - **多端测试**:需在不同平台真机调试 - **包体积控制**:避免主包超过2MB(小程序限制) --- 掌握以上内容后,建议结合项目经验说明实际应用场景(如多端适配的具体案例),面试时更易脱颖而出!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值