123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138 |
- <template>
- <view class="container">
- <div class="bar" :style="{ height:barHeight+'px' }"></div>
- <view :style="{ height:height + 'px',top:barHeight+'px' }" class="top">
- <view
- class="recommend"
- @click="transformation(index)"
- v-for="(item, index) in top"
- :key="item.id"
- :class="{ recommendtwo: recommendindex == index }"
- >
- {{ item.name }}
- </view>
- </view>
- <!-- <view class="capacity" :is="currentView"></view> -->
- <recommendTop v-show="recommendindex == 0" ref="recommend"></recommendTop>
- <merchantTop v-show="recommendindex == 1" @bottomList="getbottomlist" ref="merchant"></merchantTop>
- </view>
- </template>
- <script>
- import recommendTop from "./recommend-top/top.vue";
- import merchantTop from "./merchant-top/top.vue";
- let app = getApp()
- export default {
- components: {
- recommendTop,
- merchantTop,
- },
- data() {
- return {
- recommendindex: 0,
- top: [
- {
- id: 1,
- name: "推荐",
- },
- {
- id: 2,
- name: "商学院",
- },
- ],
- bottomList: [],
- height: 0,
- barHeight: 0
- };
- },
- onLoad() {
- this.height = 44
- this.barHeight = app.globalData.barHeight
- },
- // onShow() {
- // if(this.recommendindex==1){
- // this.$refs.merchant.getMsg()
- // }
- // },
- //上拉加载
- onReachBottom() {
- if (this.recommendindex == 0) {
- this.$refs.recommend.loaderMore();
- } else if (this.recommendindex == 1) {
- this.$refs.merchant.loaderMore();
- }
- },
- //下拉刷新
- onPullDownRefresh() {
- this.isload();
- uni.stopPullDownRefresh();
- },
- onReady(){
- this.isload();
- },
- methods: {
- getbottomlist(e){
- this.bottomList = e
- },
- transformation(index) {
- console.log(index, 'index')
- this.recommendindex = index;
- this.isload()
- },
- isload() {
- if (this.recommendindex == 0) {
- this.$refs.recommend.isload();
- } else {
- this.$refs.merchant.isload();
- }
- },
- },
- };
- </script>
- <style>
- page{
- background-color: #F5F5F5;
- }
- </style>
- <style lang="scss" scoped>
- .container {
- .bar {
- background-color: #0B844A;
- position: fixed;
- z-index: 1;
- width: 100%;
- }
- .top {
- overflow: hidden;
- // padding-top: 30rpx;
- // line-height: 120rpx;
- z-index: 1;
- width: 100%;
- // height: 120rpx;
- position: fixed;
- background-color: #0B844A;
- display: flex;
- justify-content: center;
- align-items: center;
- color: rgba(255, 255, 255, 1);
- .recommend {
- font-size: 36rpx;
- font-weight: 500;
- box-sizing: border-box;
- margin: 0 52rpx;
- height: 44px;
- line-height: 44px;
- }
- .recommendtwo {
- border-bottom: 4rpx #ffffff solid;
- border-radius: 2rpx;
- }
- }
- }
- .recommend {
- overflow: hidden;
- }
- </style>
|