yitisheng-mini-app/pages/zyb/user/myCollect.vue

<script>
import ApiConstant from "@/common/ApiConstant";
import Request from '@/common/request'

let request = new Request()
export default {
  data() {
    return {
      tabs: [
        {
          id: 1,
          name: '院校'
        }, {
          id: 2,
          name: '专业'
        }
      ],
      scrollLeft: 0,
      currentTab: 0,
      old: {
        scrollTop: 0
      },
      tabCurrent: '1',
      // Tab切换内容
      artMiniMajorList: [],
      schoolList: []
    }
  },
  onShow() {
    let collectSchoolList = uni.getStorageSync('collectSchoolList')
    if (collectSchoolList === undefined || collectSchoolList === null || collectSchoolList === '') {
      collectSchoolList = []
    }
    this.schoolList = collectSchoolList
    console.log(this.schoolList)
  },
  methods: {
    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)
      }
    },
    /*跳转页面*/
    goto(url) {
      uni.navigateTo({
        url: url
      })
    },
  }
}
</script>
<template>
  <view class="body-view">
    <!-- 使用scroll-view实现tabs滑动切换 -->
    <!--    <scroll-view v-if="false" 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="school-list">
      <view class="school-item uni-flex flex" v-for="(item,index) in schoolList" :key="index"
            @click="goto('/pages/zyb/school/detail?schoolCode='+item.schoolCode)">
        <view class="flex-item-25 t_item">
          <image :src="item.schoolIcon" style="width: 128rpx;height: 128rpx;border-radius: 50%;" mode="aspectFill"/>
        </view>
        <view class="flex-item-75 t_item">
          <view class="uni-flex flex">
            <view class="flex-item-10 t_item" style="display: flex;height: 40rpx">
              <!--              <text v-if="item.schoolCode">[{{item.schoolCode}}]</text>-->
              <text>{{ item.schoolName }}</text>
              <view class="address" style="display: flex;margin: 0 0 0 auto">
                <view class="address-item" v-if="item.province">{{ item.province }}</view>
                <view class="address-item" v-if="item.city">{{ item.city }}</view>
                <view class="address-item" v-if="item.area">{{ item.area }}</view>
              </view>
            </view>
          </view>
          <view class="uni-flex flex">
            <view class="flex-item-10 t_item" style="display: flex;height: 40rpx">
              <view class="tags">
                <text class="tag" v-for="(tag,tindex) in item.tagsList" :key="tindex">
                  {{ tag }}
                </text>
              </view>
            </view>
          </view>

        </view>
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.body-view {
  width: 100%;
  overflow: hidden;
}

/*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 {
  padding: 30rpx;
}

/*院校列表*/
.school-list {
  padding: 30rpx;

  .school-item {
    margin-bottom: 30rpx;
    padding: 30rpx;
    background-color: white;
    border-radius: 8rpx;
  }
}

/*省市区*/
.address .address-item {
  margin-right: 10rpx;
  color: #8999a3;
  font-size: 23rpx;
  line-height: 40rpx;
}

/*标签*/
.tags .tag {
  margin-right: 10rpx;
  color: #8999a3;
  font-size: 20rpx;
  line-height: 40rpx;
}
</style>