更新记录
1.0.0(2020-03-06) 下载此版本
本插件支持页面点击切换,和滑动切换
平台兼容性
uni-app
Vue2 | Vue3 | Chrome | Safari | app-vue | app-nvue | Android | iOS | 鸿蒙 |
---|---|---|---|---|---|---|---|---|
- | - | - | - | √ | - | - | - | - |
微信小程序 | 支付宝小程序 | 抖音小程序 | 百度小程序 | 快手小程序 | 京东小程序 | 鸿蒙元服务 | QQ小程序 | 飞书小程序 | 快应用-华为 | 快应用-联盟 |
---|---|---|---|---|---|---|---|---|---|---|
- | - | - | - | - | - | - | - | - | - | - |
js 控制 export default { data() { return { //导航 menuList: [{ name: "图文" }, { name: "段子" }], tabScroll: 0,//导航选择index currentTab: 0,//导航默认位置 //文字笑话 list: [], list_xh:[//笑话列表 { title:'段子' }, { title:'段子' }, { title:'段子' }, { title:'段子' }
],
//图片笑话
list_img: [ {
title:'图文'
},
{
title:'图文'
},
{
title:'图文'
},
{
title:'图文'
}],
//加载条数
pages: 0,
pages_all: false,
}
},
onLoad() {
uni.getSystemInfo({ // 获取当前设备的宽高,文档有
success: (res) => {
this.windowHeight = res.windowHeight;
this.windowWidth = res.windowWidth;
},
});
},
methods: {
//点击tab menu
clickMenu: function(e) {
var current = e.currentTarget.dataset.current; //获取当前tab的index
// 导航tab共2个,获取一个的宽度 如果是5个请把2 改成5
var tabWidth = this.windowWidth / 2;
this.tabScroll = (current - 2) * tabWidth; //使点击的tab始终在居中位置
if (this.currentTab == current) {
return false
} else {
this.currentTab = current;
};
},
//活动menu 内容
changeContent: function(e) {
var current = e.detail.current; // 获取当前内容所在index,文档有
var tabWidth = this.windowWidth / 2; 如果是5个请把2 改成5
this.currentTab = current;
this.tabScroll = (current - 2) * tabWidth;
},
}
}