<view class="body-view">
<scroll-view class="top-menu-view" scroll-x="true" :scroll-left="scrollLeft">
<block v-for="(menuTab,index) in menuTabs" :key="index">
<view class="menu-one-view" v-bind:id="'tabNum'+index" @click="swichMenu(index)">
<view :class="[currentTab==index ? 'menu-one-act' : 'menu-one']">
<view class="menu-one-txt">{{menuTab.name}}</view>
<view class="menu-one-bottom">
<view class="menu-one-bottom-color"></view>
</view>
</view>
</view>
</block>
</scroll-view>
<swiper :current="currentTab" class="swiper-box-list" duration="300" @change="swiperChange">
<block v-for="(swiperDate,index1) in swiperDateList" :key="index1">
<swiper-item>
<scroll-view class="swiper-one-list" scroll-y="true" @scrolltolower="loadMore(index1)">
<block v-for="(swiperDate2,index2) in swiperDate" :key="index2">
<view class="swiper-list-entity">
<view>{{swiperDate2}}</view>
</view>
</block>
</scroll-view>
</swiper-item>
</block>
</swiper>
</view>
data() {
return {
scrollLeft: 0,
isClickChange: false,
currentTab: 0,
menuTabs: [{
name: '政策咨询'
}, {
name: '就业分配'
}, {
name: '战友互助'
}, {
name: '趣味杂谈'
}, {
name: '怀旧时光'
}, {
name: '军旅生活'
}],
swiperDateList: [[],[],[],[],[],[]]
}
}
onLoad: function() {
//初始化数据
for (var i = 0; i < this.swiperDateList.length; i++) {
this.getDateList(i);
}
}
methods: {
swichMenu: async function(current) { //点击其中一个 menu
if (this.currentTab == current) {
return false;
} else {
this.currentTab = current;
this.setScrollLeft(current);
}
},
swiperChange: async function(e) {
let index = e.target.current;
this.setScrollLeft(index);
this.currentTab = index;
},
setScrollLeft: async function(tabIndex) {
let leftWidthSum = 0;
for (var i = 0; i <= tabIndex; i++) {
let nowElement = await this.getWidth('tabNum' + i);
leftWidthSum = leftWidthSum + nowElement.width;
}
let winWidth = uni.getSystemInfoSync().windowWidth;
this.scrollLeft = leftWidthSum > winWidth ? (leftWidthSum - winWidth) : 0
},
getWidth: function(id) { //得到元素的宽高
return new Promise((res, rej) => {
uni.createSelectorQuery().select("#" + id).fields({
size: true,
scrollOffset: true
}, (data) => {
res(data);
}).exec();
})
},
loadMore: function(tabIndex) {
console.log('正在加载更多数据。。。')
this.getDateList(tabIndex);
},
getDateList: function(tabIndex) {
for (var i = 0; i < 20; i++) {
var entity = this.menuTabs[tabIndex].name + (this.swiperDateList[tabIndex].length);
this.swiperDateList[tabIndex].push(entity);
}
}
}
page {
width: 100%;
height: 100%;
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: center;
background: rgba(249, 249, 249, 1);
}
.body-view {
display: flex;
flex: 1;
flex-direction: column;
overflow: hidden;
height: 100%;
width: 100%;
align-items: flex-start;
justify-content: center;
}
.top-menu-view {
display: flex;
white-space: nowrap;
width: 100%;
background-color: #FFFFFF;
height: 112upx;
/* 在这里设置导航条高度 */
}
.top-menu-view .menu-one-view {
display: inline-block;
white-space: nowrap;
height: 100%;
}
.top-menu-view .menu-one-view .menu-one {
/* 在这里写 单个按钮样式 */
margin-left: 25upx;
margin-right: 25upx;
position: relative;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.top-menu-view .menu-one-view .menu-one .menu-one-txt {
height: 40upx;
font-size: 28upx;
font-weight: 400;
color: rgba(154, 154, 154, 1);
line-height: 40upx;
}
.top-menu-view .menu-one-view .menu-one .menu-one-bottom {
position: absolute;
bottom: 0;
width: 100%;
}
.top-menu-view .menu-one-view .menu-one .menu-one-bottom .menu-one-bottom-color {
width: 60%;
height: 4upx;
}
.top-menu-view .menu-one-view .menu-one-act {
/* 在这里写 单个按钮样式 */
margin-left: 25upx;
margin-right: 25upx;
position: relative;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.top-menu-view .menu-one-view .menu-one-act .menu-one-txt {
height: 40upx;
font-size: 28upx;
font-weight: 400;
color: rgba(0, 170, 255, 1);
line-height: 40upx;
}
.top-menu-view .menu-one-view .menu-one-act .menu-one-bottom {
position: absolute;
bottom: 0;
width: 100%;
display: flex;
justify-content: center;
}
.top-menu-view .menu-one-view .menu-one-act .menu-one-bottom .menu-one-bottom-color {
width: 60%;
height: 4upx;
background: rgba(0, 170, 255, 1);
}
.swiper-box-list {
flex: 1;
width: 100%;
height: auto;
background-color: #FFFFFF;
}
.swiper-one-list {
height: 100%;
width: 100%;
}
.swiper-one-list .swiper-list-entity {
width: 100%;
height: 112upx;
text-align: center;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
