【Vant Weapp】van-popup 弹出层

目录

弹窗底部滚动

catchtouchmove

弹窗滚动同时底部滚动

scroll-view

页面高度100vh

弹窗中图标 

打开前关闭键盘

---

弹窗底部滚动

白色区域不滚动的话，就可以使用catchtouchmove。

catchtouchmove

 {{item}} 

内容

data:{
    catchMove: true
}

弹窗滚动同时底部滚动

期待效果

 

白色区域滚动的话，使用catchtouchmove就不对了，白色区域会被固定住。然后就可以用下面的方法。

scroll-view

   {{item}} 



   内容 

.page {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow-y: auto;
}

data:{
    isScroll: false,
    show: false
}

handOpen () { 
  this.setData({
    show: true,
    isScroll: false
  })
},

handClose () { 
  this.setData({
    show: false,
    isScroll: true
  })
},

页面高度100vh

   {{item}} 



   内容 

.page-overflow-hidden {
  height: 100vh;
  overflow: hidden;
}

data:{
    show: false
}

​
handOpen () { 
  this.setData({
    show: true,
  })
},

handClose () { 
  this.setData({
    show: false,
  })
},

​

弹窗中图标 

期待效果：

  

 白色区域有overflow-y：auto。图片定位右上角不显示。

.pop {
  position: relative;
  padding: 64rpx 75rpx;
}

.close {
  position: absolute;
  top: -58rpx;
  right: -46rpx;
  z-index: 999;
}

.img {
  height: 300rpx;
  width: 300rpx;
}

解决方法：

.dialog .van-popup {
  overflow-y: visible;
}

打开前关闭键盘

hideKeyboard() {
  wx.hideKeyboard({
    complete: res => {
      console.log('hideKeyboard', res)
    }
  })
},