最近在做的项目有这样一个需求，也不太好描述，就是有两个顶部菜单栏，每个二级菜单栏的item都有自己页面，每个页面都可以通过左右滑动来切换，第一个想到的实现方法就是双层swiper嵌套，但想要达到一个联动的效果还是有一点点复杂，去网上找了一圈也没结果只好自己来搞一下了
先贴一下效果图
1.先把第一层swiper框架搭好，需要能通过滑动和点击切换页面，基本方法可百度
2.在第一层的
3.基本功能能实现，问题也来了，如何实现第二层的
4.思路上是没问题的，但是写完会发现有许许多多小bug，一不小心就会崩溃的那种，最后经过不断的调整和测试，崩溃是不会了，滑动也挺顺畅的，下面贴完整代码
wxml:
item1 item2 item3
wxss:
page {
font-size: 3.5vw;
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
}
swiper{
height: 100%;
width: 100%;
}
.contain {
display: flex;
flex-direction: column;
flex: 1;
height: 0;
}
.tabbar {
height: 5vw;
width: 100vw;
display: flex;
flex-direction: row;
justify-content: space-around;
border-bottom: 3px #dbdbdb solid;
padding-bottom: 2vw;
}
.tabbar_item {
display: flex;
flex: 1;
flex-direction: column;
align-items: center;
}
.on {
color: coral;
}
.swiper-box {
display: flex;
flex-direction: column;
flex: 1;
height: 0;
width: 100%;
overflow-x: hidden;
overflow-y: scroll;
}
.swiper1_top {
width: 100vw;
display: flex;
margin-left: 2vw;
flex-direction: row;
font-size: 4vw;
align-items: center;
background-color: white;
}
.swiper1_top_item {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
padding: 2.5vw 0;
}
.swiper1_contain {
width: 100vw;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
.swiper1_item {
margin-bottom: 3vw;
width: 94vw;
}
.dir_row {
display: flex;
flex-direction: row;
}
js:
Page({
/**
* 页面的初始数据
*/
data: {
currentTab: 0,
swipeIndex: 0,
itemCurrent1: 0,
itemIndex1: 0,
itemCurrent2: 0,
itemIndex2: 0,
itemCurrent3: 0,
itemIndex3: 0,
flag1: false,
flag2: false,
flag3: true
},
/**
* 滑动切换tab
*/
bindChange: function(e) {
console.log('debugbindcange')
var that = this;
that.setData({
swipeIndex: e.detail.current
});
},
swiperItemChange1: function(e) {
var that = this;
that.setData({
itemIndex1: e.detail.current
});
},
swiperItemChange2: function(e) {
var that = this;
that.setData({
itemIndex2: e.detail.current
});
},
swiperItemChange3: function(e) {
var that = this;
that.setData({
itemIndex3: e.detail.current
});
},
/**
* 点击tab切换
*/
swichNav: function(e) {
var that = this;
if (this.data.swipeIndex === e.currentTarget.dataset.current) {
return false;
} else {
that.setData({
currentTab: e.currentTarget.dataset.current
})
}
},
itemSwich1: function(e) {
var that = this;
if (this.data.itemIndex1 === e.currentTarget.dataset.current1) {
return false;
} else {
that.setData({
itemIndex1: e.currentTarget.dataset.current1,
itemCurrent1: e.currentTarget.dataset.current1
})
}
},
itemSwich2: function(e) {
var that = this;
console.log(e)
if (this.data.itemIndex2 === e.currentTarget.dataset.current2) {
return false;
} else {
that.setData({
itemIndex2: e.currentTarget.dataset.current2,
itemCurrent2: e.currentTarget.dataset.current2
})
}
},
itemSwich3: function(e) {
var that = this;
if (this.data.itemIndex3 === e.currentTarget.dataset.current3) {
return false;
} else {
that.setData({
itemIndex3: e.currentTarget.dataset.current3,
itemCurrent3: e.currentTarget.dataset.current3
})
}
},
/**
* 滑动item绑定事件
*/
swiperTrans: function(e) {
var that = this;
var dx = e.detail.dx
if (this.data.flag3 && (this.data.flag2) && (dx >= 50) && (dx < 100)) {
console.log('debug')
that.data.flag3 = false
this.setData({
currentTab: that.data.swipeIndex + 1,
})
}
if (this.data.flag3 && (this.data.flag1) && (dx <= -50) && (dx > -100)) {
that.data.flag3 = false
this.setData({
currentTab: that.data.swipeIndex - 1,
})
}
},
itemTouchLeftMove: function(e) {
this.data.flag1 = true;
},
itemTouchLeftEnd: function(e) {
this.data.flag1 = false;
this.data.flag3 = true;
},
itemTouchRightMove: function(e) {
this.data.flag2 = true;
},
itemTouchRightEnd: function(e) {
this.data.flag2 = false;
this.data.flag3 = true;
}
})
json没有
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。