小程序 - swiper中嵌套使用scroll-view

效果如下

需要注意的地方

swiper标签有默认的高度，展示更多的话需要另外设置height值

这里的scroll-view设置占满整个屏幕，height设置100%；swiper的height设置成屏幕的高度（除去tab栏的高度）,需要微信提供的api获取设备屏幕高度数据

wx.getSystemInfo({
  success: (res) => {
    let windowHeight = res.windowHeight

    this.setData({
      windowHeight: windowHeight
    })
  }
})

wx.getSystemInfo API还可以获取以下信息，包括brand( 品牌)、model(型号)、platform(系统)等

.wxml

  
    1
    2
    3
  

  
    
      
        
          {{index + 1}}
        
      
    

    
      
        
          {{index + 1}}
        
      
    

    
      
        
          {{index + 1}}
        
      
    
  
  
  

.css

.item {
  margin-bottom: 20rpx;
  width: 100%;
  height: 100rpx;
  text-align: center;
  line-height: 100rpx;
}

.item1 {
  background: lightblue;
}

.item2 {
  background: lightgrey;
}

.item3 {
  background: lightgreen;
}

.item:last-child {
  margin-bottom: 0;
}

.tab {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 100rpx;
  line-height: 100rpx;
  box-sizing: border-box;
}

.tab-active {
  border-bottom: 2rpx solid orangered;
}

.tab > view {
  flex: 1;
  text-align: center;
}

swiper {
  position: fixed;
  top: 100rpx;
  left: 0;
  bottom: 0;
  width: 100%;
}

.backTop {
  position: fixed;
  right: 30rpx;
  bottom: 50rpx;
  width: 100rpx;
  height: 100rpx;
  background: rgba(0, 0, 0, 0.5);
  z-index: 30;
  border-radius: 50%;
}

.js

// pages/swiper2/swiper2.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    tab_index: 0
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.systemType()
  },
  
  scroll (event) {
    console.log(event)
  },

  reactBottom () {
    console.log('触底-加载更多')
  },

  // 获取设备屏幕高度
  systemType () {
    wx.getSystemInfo({
      success: (res) => {
        let windowHeight = res.windowHeight

        this.setData({
          windowHeight: windowHeight
        })

        console.log(res)
      }
    })
  },

  tabChange (event) {
    this.setData({
      tab_index: event.detail.current
    })
  },

  // tab栏选择
  selectTab (event) {
    this.setData({
      tab_index: event.currentTarget.dataset.index
    })
  },

  // 返回顶部
  backTop () {
    let tab_index = this.data.tab_index

    this.setData({
      ['scrollTop' + tab_index]: 0
    })
  },
})