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

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

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

废话不多说

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

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

这是html

<view class='subsection_content'>
				<view :style="{ width:(444/list.length)+'rpx'}" v-for="(v,i) in list" :key='i' @click="sectionChange(i)"
					:class="[currentTab== i?'item2':'item']">
					{{v}}
				</view>
				<view class="item_active" :style="{ width:(444/list.length)+'rpx',left:(currentTab*(444/list.length))+'rpx'}">
		</view>
</view>

先定义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 本身想要个时间轴，结果它的步骤条自定义太少

		<time-line ref="timeline" style="" :dataList='items' location="left">
					<template v-slot:status='t'>
					//这是时间点的状态 也可以用 icon
						<view :class="[t.item.status==0?'dot2':'dot']">
							<!-- {{t.item}} -->
						</view>

					</template>
					//这是内容
					<template v-slot:content='v'>
						<view class="des">
							<view class="time" style="text-align:left;margin-left: 24rpx;">
								{{v.item.time}}
							</view>

							<view class="detail">
								<log-item :item='v.item'></log-item>
							</view>
						</view>

					</template>

				</time-line>	

时间轴插件。

<template>
	<scroll-view class="time-line-wrap">
		<view class="time-line">
			
			<view class="time-line-container" :class="addTypeClass">
			
				<view class="time-line-list">

					
					<view class="time-line-info" :class="[layoutClass(index)]" :id="'timeline'+index" :key="index"
						v-for="(item,index) of time_line_list">
						
						<view class="line-info-content">
							
							<slot name='status' :item='item'></slot>
							<slot name='content' :item='item'></slot>
							

						</view>
					</view>
				</view>
			</view>
		</view>
	</scroll-view>
</template>

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