uni-app + uview系列的项目遇见的swiper不能自适应，时间轴，tabs，app开启震动反馈等。

uni-app + uview系列的项目遇见的swiper不能自适应，时间轴，tabs，app开启震动反馈等。有些是自己写的，有些则是改的其他大佬的；

接手一个uniapp的项目，由于本人没用过uniapp，遇见的坑确实不少，接下来就是总结一下经验，希望大佬们多多指教；

废话不多说

原生的Tabs不满足我的需求,不能让滑块自定义
原生的Swiper高度不能自适应
调用安卓和ios的震动反馈
uview2.0 本身想要个时间轴，结果它的步骤条自定义太少

1. 原生的Tabs不满足我的需求,不能让滑块自定义

这是html

				
					{{v}}
				
				
		

先定义tabs的组件的总宽度 我这边写死的 444rpx 除以tabs的个数拿到每个的宽度。
item_active 这个是滑块的，宽高都可以自己调整

script

data(){
	return {
		//tabs 的list
				list: ['控制', '日志', '管理'],
				//当前索引。可以和swiper结合
				currentTab: 0,
			}
},
		sectionChange(index) {
				this.currentTab = index;
			},

这个是css。我用less来写的

.subsection_content {
			width: 444rpx;
			height: 74rpx;
			background: #F8F8F8;
			border-radius: 16rpx;
			position: relative;
			display: flex;

			.item {
				height: 100%;
				display: flex;
				position: relative;
				z-index: 3;
				justify-content: center;
				align-items: center;
				color: #000000;
			}

			.item2 {
				height: 100%;
				display: flex;
				position: relative;
				z-index: 3;
				justify-content: center;
				align-items: center;
				color: #fff;
			}

			.item_active {
				background-color: #88C211;
				height: calc(100% - 12rpx);
				box-sizing: border-box;
				padding: 6rpx;
				position: absolute;
				border-radius: 16rpx;
				overflow: hidden;
				top: 6rpx;
				left: 0;
				z-index: 2;
				transition: .1s linear;
			}
		}

效果

tips: 把滑块的高度设置2px 就是线性的

2. 原生的Swiper高度不能自适应

这种分三种情况：可以下拉刷新和上拉加载，另一种是不需要的且内容超过一屏的，在一个是只有一屏；
很庆幸，上面的三个页面的需求刚好对应这三种情况； emo

1. 有上拉和下拉的页面；

   
   动态设置页面的高度

getScreenHeight() {
				var that = this;
				uni.getSystemInfo({
					success: (res) => {
						that.swiperHeight = res.screenHeight - 44 - 40。
					}
				});
			},

这个代码是获取当前屏幕的高度，由于我的navbar高度是44 所以要减去，还有40 是tabs的高度；

然后推荐一个很好用的上拉加载，下拉刷新的插件，一位大佬写的mescroll.js
又很健全的文档说明，但是我还是要说一下，如果普通页面的上拉下拉，使用mescroll-body这个组件就可以了，如果实在弹窗或者tabs这种需要mescroll-uni这个组件；
我这里使用的是mescroll-uni ；
2. 直接获取 1 种的屏幕高度即可
3. 获取内容的高度
这里我用的是这个大佬写的代码uniapp获取元素高度

效果：

可以加载

3. 调用安卓和ios的震动反馈

			//安卓和ios需要单独处理
			if (uni.getSystemInfoSync().platform == "ios") {
					let UIImpactFeedbackGenerator = plus.ios.importClass('UIImpactFeedbackGenerator');
					let impact = new UIImpactFeedbackGenerator();
					impact.prepare();
					impact.init(1);
					impact.impactOccurred();
				}
				if (uni.getSystemInfoSync().platform == "android") {
					uni.vibrateShort({
						success: () => {}
					});
				}

原文连接

4. uview2.0 本身想要个时间轴，结果它的步骤条自定义太少

		
					
					//这是内容
					

					

时间轴插件。

感谢各位大佬指出不足之处！！！
上面代码如有侵权，请联系我及时删除！！！