285 lines
6.8 KiB
Vue
285 lines
6.8 KiB
Vue
<!--
|
||
左右翻形式
|
||
-->
|
||
<script>
|
||
import ApiConstant from "@/common/ApiConstant";
|
||
import Request from '@/common/request'
|
||
import ImagesConstant from "@/common/ImagesConstant";
|
||
|
||
let request = new Request()
|
||
export default {
|
||
computed: {
|
||
ImagesConstant() {
|
||
return ImagesConstant
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
majorName: '',
|
||
tabs: [
|
||
{
|
||
id: 1,
|
||
name: '本科'
|
||
}, {
|
||
id: 2,
|
||
name: '高职高专'
|
||
}
|
||
],
|
||
scrollLeft: 0,
|
||
currentTab: 0,
|
||
old: {
|
||
scrollTop: 0
|
||
},
|
||
tabCurrent: '1',
|
||
// Tab切换内容
|
||
artMiniMajorList: [],
|
||
}
|
||
},
|
||
onLoad() {
|
||
this.getMajorList()
|
||
},
|
||
methods: {
|
||
openMajorDetail: function (e,majorTypeName) {
|
||
console.log(e)
|
||
uni.navigateTo({
|
||
url: '/pages/zyb/major/detail?majorCode='+e.majorCode+"&majorTypeName="+majorTypeName
|
||
})
|
||
},
|
||
swichMenu(id) {
|
||
this.currentTab = id
|
||
console.log(id)
|
||
//this.tabCurrent = 'tabNum'+ id
|
||
// 滑动swiper后，每个选项距离其父元素最左侧的距离
|
||
this.scrollLeft = 0;
|
||
for (let i = 0; i < id; i++) {
|
||
this.scrollLeft += 60
|
||
console.log(this.scrollLeft, 60, id)
|
||
}
|
||
this.getMajorList()
|
||
},
|
||
getMajorList() {
|
||
let that = this
|
||
request.get(ApiConstant.Major.miniMajorList, {
|
||
majorName: this.majorName,
|
||
educationalLevel:this.tabs[this.currentTab].id
|
||
}).then(r => {
|
||
console.log(r)
|
||
if (r.success) {
|
||
that.artMiniMajorList = r.result
|
||
}
|
||
}).catch(err => {
|
||
}).finally(() => {
|
||
});
|
||
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<template>
|
||
<view class="body-view">
|
||
<!-- 使用scroll-view实现tabs滑动切换 -->
|
||
<scroll-view class="top-menu-view" scroll-x="true" scroll-with-animation :scroll-left="scrollLeft">
|
||
<view class="menu-topic-view" v-for="(item,index) in tabs" :id="'tabNum'+item.id" :key="index"
|
||
@click="swichMenu(index)">
|
||
<view :class="currentTab==index ? 'menu-topic-act' : 'menu-topic'">
|
||
<text class="menu-topic-text">{{ item.name }}</text>
|
||
<view class="menu-topic-bottom">
|
||
<view class="menu-topic-bottom-color"></view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
<!-- 内容 -->
|
||
<view class="bodyl">
|
||
<view v-for="(m,i) in artMiniMajorList" :key="i" :style="i>0?'margin-top:50rpx':''">
|
||
<view class="majorTypeTitle">
|
||
<text class="name">{{ m.majorTypeName }}</text>
|
||
<view class="majorNum"><text style="float: right">共{{ m.majorList.length }}个</text></view>
|
||
</view>
|
||
<scroll-view class="nav-bar" scroll-x>
|
||
<!-- 要想使用flex布局实现横向滚动，就要在scroll-view里加一层容器block包裹，并且使用子组件才会出现滚动效果 -->
|
||
<view class="nav-bar-wrap">
|
||
<block v-for="(item, index) in m.majorList" :key="index">
|
||
<view class="nav-bar-item">
|
||
<view class="majorItem" @click="openMajorDetail(item,m.majorTypeName)">
|
||
<view style="display: flex;">
|
||
<view style="width: 90%">
|
||
<view style="display: flex;">
|
||
<text class="majorName" style="font-size: 30rpx">{{ item.majorName }}</text>
|
||
</view>
|
||
<view style="display: flex;margin-top: 30rpx">
|
||
<view class="semester" style="width: 50%;font-size: 25rpx">
|
||
<text style="color:#8999a3">学制</text>
|
||
<text v-if="item.semester">{{item.semester}}</text>年
|
||
</view>
|
||
<view class="schoolNum" style="width: 40%;font-size: 25rpx;">
|
||
<view style="float: right">
|
||
<text style="color:#8999a3">开设院校</text>
|
||
<text>{{ item.schoolNum||'0'}}</text>个
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view style="width: 10%">
|
||
<image :src="ImagesConstant.keyboard.arrowRightWhite"
|
||
style="position:relative;left: 10rpx;top: 30rpx;border-radius: 30rpx;background-color: #3d7dfd;width: 40rpx;height: 40rpx"/>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</block>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<style scoped lang="scss">
|
||
.body-view {
|
||
width: 100%;
|
||
overflow: hidden;
|
||
background-color: white;
|
||
}
|
||
|
||
/*tabs 栏*/
|
||
.top-menu-view {
|
||
display: flex;
|
||
position: fixed;
|
||
z-index: 100;
|
||
//top: 84rpx;
|
||
/* #ifdef H5 */
|
||
top: 84rpx;
|
||
/* #endif */
|
||
/* #ifndef H5 */
|
||
top: 0rpx;
|
||
/* #endif */
|
||
left: 0;
|
||
white-space: nowrap;
|
||
width: 100%;
|
||
background-color: white;
|
||
height: 86rpx;
|
||
line-height: 86rpx;
|
||
border-top: 1rpx solid #d8dbe6;
|
||
|
||
.menu-topic-view {
|
||
display: inline-block;
|
||
white-space: nowrap;
|
||
height: 86rpx;
|
||
position: relative;
|
||
width: 50%;
|
||
text-align: center;
|
||
|
||
.menu-topic-text {
|
||
font-size: 30rpx;
|
||
color: #303133;
|
||
padding: 10rpx 40rpx;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.menu-topic-bottom {
|
||
position: absolute;
|
||
bottom: 0;
|
||
width: 100%;
|
||
|
||
.menu-topic-bottom-color {
|
||
width: 40rpx;
|
||
height: 4rpx;
|
||
}
|
||
}
|
||
|
||
.menu-topic-act .menu-topic-bottom {
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|
||
|
||
.menu-topic-act .menu-topic-text {
|
||
color: #4975fd;
|
||
}
|
||
|
||
|
||
.menu-topic-act .menu-topic-bottom-color {
|
||
background: #4975fd;
|
||
}
|
||
}
|
||
}
|
||
|
||
.swiper-box-list {
|
||
width: 95%;
|
||
padding: 20rpx 40rpx;
|
||
flex: 1;
|
||
background-color: #FFFFFF;
|
||
height: calc(100vh - 251rpx);
|
||
|
||
.swiper-topic-list {
|
||
width: 100%;
|
||
}
|
||
}
|
||
|
||
/* 隐藏滚动条，但依旧具备可以滚动的功能 */
|
||
:deep(.uni-scroll-view::-webkit-scrollbar) {
|
||
display: none
|
||
}
|
||
|
||
.bodyl {
|
||
margin-top: 85rpx;
|
||
padding: 30rpx;
|
||
}
|
||
|
||
page {
|
||
background-color: white !important;
|
||
}
|
||
|
||
/*横向滚动列表 start*/
|
||
scroll-view {
|
||
white-space: nowrap;
|
||
}
|
||
|
||
/* 去除滚动条 */
|
||
::-webkit-scrollbar {
|
||
display: none;
|
||
width: 0;
|
||
height: 0;
|
||
color: transparent;
|
||
}
|
||
|
||
.nav-bar-wrap { // 关键的样式
|
||
display: flex;
|
||
flex-flow: row wrap;
|
||
width: 2600rpx;
|
||
}
|
||
|
||
.nav-bar-item {
|
||
width: 500rpx;
|
||
display: flex;
|
||
height: 170rpx;
|
||
margin-top: 18rpx;
|
||
margin-right: 18rpx;
|
||
position: relative;
|
||
}
|
||
|
||
/*横向滚动列表 end*/
|
||
.majorItem {
|
||
padding: 30rpx;
|
||
border-radius: 10rpx;
|
||
width: 500rpx;
|
||
background-color: #f0f0f0;
|
||
}
|
||
|
||
.majorTypeTitle {
|
||
display: flex;
|
||
height: 50rpx;
|
||
line-height: 50rpx;
|
||
}
|
||
|
||
.majorTypeTitle .name{
|
||
font-size: 30rpx;
|
||
font-weight: 600;
|
||
width: 80%;
|
||
}
|
||
.majorTypeTitle .majorNum{
|
||
color:#3d7dfd;
|
||
width: 20%;
|
||
}
|
||
</style>
|