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
-
有上拉和下拉的页面;
动态设置页面的高度
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>
感谢各位大佬指出不足之处!!!
上面代码如有侵权,请联系我及时删除!!!