更新记录
1.2.5(2020-04-03)
下载此版本
导航栏标题添加了边距padding,若有bug可在下方评论及时反馈。
1.2.4(2020-04-02)
下载此版本
tab适配
1.2.3(2019-11-07)
下载此版本
2019年11月7日 更新
查看更多
平台兼容性
App |
快应用 |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
app-vue |
× |
× |
× |
× |
× |
× |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
× |
× |
× |
× |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
× |
× |
× |
× |
× |
× |
× |
× |
× |
html tab组件说明
<view class="container999">
<navTab ref="navTab" :tabTitle="tabTitle" @changeTab='changeTab'></navTab>
<view>
//script
// 引入tab
import navTab from "../../components/navTab.vue"
export default {
components: {
navTab
},
data() {
return {
currentTab: 0, //sweiper所在页
tabTitle:['选择一','选择二','选择三','选择四'], //导航栏格式
}
},
methods:{
// tab事件
changeTab(index){
this.currentTab = index;
},
// swiper 滑动 如果tab关联swiper需要写下面的方法 否则不写
swiperTab: function(e) {
var index = e.detail.current //获取索引
this.$refs.navTab.longClick(index);
},
}
};
html 下拉刷新组件说明
//最外层加上touch事件
//刷新组件需搭配scroll-view使用,并在pages.json中添加 "disableScroll":true
<viewclass="container999"
@touchstart="refreshStart"
@touchmove="refreshMove"
@touchend="refreshEnd"
<refresh ref="refresh" @isRefresh='isRefresh'></refresh>
</view>
//script
// 引入下拉刷新
import refresh from '../../components/refresh.vue';
export default {
components: {refresh},
data() {
return {
};
},
methods: {
refreshStart(e) {
this.$refs.refresh.refreshStart(e);
},
refreshMove(e){
this.$refs.refresh.refreshMove(e);
},
refreshEnd(e) {
this.$refs.refresh.refreshEnd(e);
},
//刷新名需写为isRefresh,刷新组件中会回调此事件
isRefresh(){
setTimeout(() => {
uni.showToast({
icon: 'success',
title: '刷新成功'
})
this.$refs.refresh.endAfter() //刷新结束调用
}, 1000)
}
}
};
html 点击反馈组件说明
<view class="container999" @click="conClick">
<clickCircle ref="clickCircle"></clickCircle>
<view>
//script
// 引入tab
import clickCircle from "../../components/clickCircle.vue"
export default {
components: {
clickCircle
},
data() {
return {
}
},
methods:{
// 点击反馈事件
conClick(e) {
this.$refs.clickCircle.conClick(e);
}
}
};