mpvue-dev-temp/src/pages/index/index.vue

<template>
  <div class="scroll-touch">
    <scroll-view
      :scroll-left="scrollleft"
      id="fixd"
      :class="['section-area','fix']"
      scroll-x="true"
      style="width: 100%;white-space:nowrap;background-color:#fff; border-bottom: 1px solid #ebebeb; box-sizing: border-box;"
    >
      <div class="nav">
        <div
          :id="'navitem' +index"
          @click="tabClick(index)"
          v-for="(item,index) in nav"
          :key="index"
          class="nav_item"
          :class="activeIndex == index? 'active':''"
        >{{item.name}}</div>
      </div>
    </scroll-view>
    <swiper
      :style="['height:100vh']"
      class="swiper"
      duration="200"
      :current="activeIndex"
      @change="swiperChange"
    >
      <div v-for="(swi,s) in nav" :key="s">
        <swiper-item>
          <div class="content scroll-touch" v-if="activeIndex == s">
            <!-- {{swi.name}} -->
            <div class="content-ad">
              <!-- banner广告 -->
              <ad unit-id="adunit-7496c51cbc82905d" ad-intervals="30"></ad>
            </div>
            <wsh-list-wrap :channelId="swi.channel_id" />
          </div>
        </swiper-item>
      </div>
    </swiper>
    <!-- <div class="clude-fixed" @click="cludeHandle" v-if="cludeShow">赚金币</div> -->
  </div>
</template>
<script>
import {get} from '@/utils/request'
import ListWrap from '@/components/list-wrap'
import config from '@/utils/config'
export default {
  components: {
    'wsh-list-wrap': ListWrap
  },
  data () {
    return {
      nav: [],
      top: 0, // 导航栏初始到屏幕顶部高度
      activeIndex: 0, // 选项卡及swiper位置
      scrollleft: 0, // scroll-view 横向滚动条位置
      windowWidth: 0, // 窗口宽度
      swiperHeight: 2000, // 此处为swiper高度,
      cludeShow: true,
      scrollTimer: '',
      homeAd: null
    }
  },
  created () {
    this.login()
  },
  methods: {
    async getUserInfo () {
      await wx.request({
        method: 'post',
        url: config.userUrl,
        data: {
          appid: config.appId,
          mp_token: wx.getStorageSync('mpToken'),
          user_id: wx.getStorageSync('userInfo').user_id
        },
        success: res => {
          console.log(res)
          if (res.data.code === 0) {
            wx.setStorageSync('userInfo', res.data.data.user_info)
            this.userInfo = wx.getStorageSync('userInfo')
          } else {
            wx.clearStorage()
          }
        }
      })
    },
    login () {
      let user = wx.getStorageSync('userInfo')
      if (!user) {
        var that = this
        wx.login({
          success (res) {
            if (res.code) {
              console.log({
                'res': res,
                'config': config.appId
              })
              // 这里可以把code传给后台，后台用此获取openid及session_key
              that.loginHandle(res.code)
            }
          }
        })
      } else {
        this.getUserInfo()
      }
    },
    loginHandle (code) {
      // console.log(config.loginUrl)
      wx.request({
        method: 'post',
        url: config.loginUrl,
        data: {
          code: code,
          appid: config.appId
        },
        success: res => {
          // console.log(res)
          if (res.data.code === 0) {
            wx.setStorageSync('mpToken', res.data.data.mp_token)
            wx.setStorageSync('sessionKey', res.data.data.session_key)
            wx.setStorageSync('userInfo', res.data.data.user_info)
            this.userInfo = wx.getStorageSync('userInfo')
          } else {
            wx.clearStorage()
          }
        }
      })
    },
    cludeHandle () {
      wx.navigateTo({
        url: '/pages/banner/main'
      })
    },
    async getCategoryNav () {
      const params = {
        key_name: 'channels-huanlian'
      }
      let navData = await get('/v1/common/web-config', params)
      this.nav = navData.list
    },
    tabClick (e) {
      this.activeIndex = e
    },
    swiperChange (e) {
      this.activeIndex = e.mp.detail.current
      let that = this
      const query = wx.createSelectorQuery()
      query.select('#navitem' + this.activeIndex).boundingClientRect()
      query.exec(function (res) {
        if (res[0].right > that.windowWidth) {
          that.scrollleft = res[0].right
        } else if (res[0].left < 0) {
          that.scrollleft = res[0].left
        }
      })
    }
  },
  mounted () {
    this.getCategoryNav()
  },
  onLoad () {
    let that = this
    let res = wx.getSystemInfoSync()
    that.windowWidth = res.windowWidth
    const query = wx.createSelectorQuery()
    query.select('#fixd', '.nav').boundingClientRect()
    query.exec(function (res) {
      that.top = res[0].top
    })
    if (wx.createInterstitialAd) {
      this.homeAd = wx.createInterstitialAd({
        adUnitId: 'adunit-5ecedc2dc28ef414'
      })
      this.homeAd.onLoad(() => {
        console.log('插屏 广告加载成功')
      })
      this.homeAd.onError((err) => {
        console.log('onError event emit', err)
      })
      // this.homeAd.onClose(() => {})
    }
    if (this.homeAd) {
      const self = this
      setTimeout(() => {
        self.homeAd.show().catch((err) => {
          console.error('errer', err)
        })
      }, 10000)
    }
  },
  onPageScroll (e) {
  }
}
</script>
<style lang="scss" scoped>
// .section-area ::-webkit-scrollbar {  
//     width: 0;  
//     height: 0;  
//     color: transparent;
// } 
.scroll-touch {
	-webkit-overflow-scrolling: touch;
}
.nav {
  width: 100%;
  display: flex;
  height: 50px;
  background-color: #fff;
  box-sizing: border-box;
  .nav_item {
    flex: auto;
    text-align: center;
    line-height: 50px;
    padding: 0 10px;
  }
  .active {
    color: #f34b50;
  }
}
.content {
  background-color: #fff;
  overflow: hidden;
  height: 100%;
  overflow-y: scroll;
  .content-ad {
    width: 100%;
  }
}
.fix {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10;
  // animation: move 0.1s linear;
}
.swiper {
  position: relative;
  top: 50px;
  left: 0;
}
@keyframes move {
  from {
    opacity: 0.7;
  }
  to {
    opacity: 1;
  }
}
.clude-fixed {
  position: fixed;
  z-index: 999;
  bottom: 17%;
  right: 2%;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: yellow;
  font-size: 13px;
  text-align: center;
  line-height: 50px;
}
</style>