页面整页轮播切换及内部嵌套内容轮播

移动端页面，所以选择了Vant组件库，轮播部分用Swipe 轮播。

• 安装：

# 通过 npm 安装
npm i vant -S

# 通过 yarn 安装
yarn add vant

• 引入:

import Vue from 'vue';
import { Swipe, SwipeItem } from 'vant';

Vue.use(Swipe);
Vue.use(SwipeItem);

用法：

<van-swipe 
     :style="{height:screenHeight}"
      @change="onChange"
      :loop="false"
      :stop-propagation="false"
      :show-indicators="false"
      vertical
      ref="swipe"
      :touchable="isScroll"
>
  <van-swipe-item>1</van-swipe-item>
  <van-swipe-item>2</van-swipe-item>
  <van-swipe-item>
       <!-- 较长内容，可能出现滚动条 -->
       <ul class="scrollWrap" ref="scrollWrap"> 
              <li class="s-info" v-for="(e,i) in branchMeetData" :key="'s-' + i">
                <div class="top">
                  <span class="point"></span>
                  <span class="left">{{e.name}}</span>
                  <span class="right">查看 ></span>
                </div>
                <p class="bottom">{{e.title}}</p>
              </li>
            </ul>
  </van-swipe-item>
  <van-swipe-item>4</van-swipe-item>
</van-swipe>

<style>
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}
</style>

此处首先设置轮播方向为垂直方向，然后监听页面的onresize事件，动态设置每页轮播高度，最重要的嵌套轮播在change事件中实现：

export default {
   data () {
       screenHeight: '', // 页面内部的动态高度
       isScroll: true // 是否滚动
   }
   mounted () {
   // 获取大会议程数据
   ......
   // 监听浏览器窗口缩放事件
   this.screenHeight = document.body.clientHeight - 92 + 'px'
   window.onresize = () => {
     return (() => {
       this.screenHeight = document.body.clientHeight - 92 + 'px'
     })()
   }
 },
methods: {
   // 每一页轮播结束后触发
   onChange (index) {
     this.isChangeBgc = index === 0
     if (index === 2) {
       // 变量windowHeight是可视区的高度
       let windowHeight = this.$refs.scrollWrap.clientHeight
       // 变量scrollHeight是滚动条的总高度
       let scrollHeight = this.$refs.scrollWrap.scrollHeight
       if (scrollHeight > windowHeight) {
         this.isScroll = false
         this.$refs.scrollWrap.addEventListener('scroll', () => {
           // 变量scrollTop是滚动条滚动时，距离顶部的距离
           let scrollTop = this.$refs.scrollWrap.scrollTop
           // 滚动条到底部的条件
           if (
             scrollHeight - (scrollTop + windowHeight) < 1 ||
           scrollTop === 0
           ) {
             this.isScroll = true
           }
         })
       }
     } else {
       this.isScroll = true
     }
   }
}