【Vant Weapp】van-popup 弹出层

目录

弹窗底部滚动

catchtouchmove

弹窗滚动同时底部滚动

scroll-view

页面高度100vh

弹窗中图标 

打开前关闭键盘

---

弹窗底部滚动

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

catchtouchmove

<view wx:for="{{100}}" wx:key="item"> {{item}} </view>

<van-popup show="{{ true }}" custom-style="height: 20%;width: 80%" catchtouchmove="{{ catchMove }}">内容</van-popup>

data:{
    catchMove: true
}

弹窗滚动同时底部滚动

期待效果

 

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

scroll-view

<scroll-view class="page" scroll-y>
  <view wx:for="{{100}}" wx:key="item" bindtap="handOpen"> {{item}} </view>
</scroll-view>

<van-popup show="{{ show }}" custom-style="height: 20%;width: 80%" >
  <view wx:for="{{100}}" wx:key="item" bindtap="handClose"> 内容 </view>
</van-popup>

.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

<view class="{{show ? 'page-overflow-hidden' : ''}}">
  <view wx:for="{{100}}" wx:key="item" bindtap="handOpen"> {{item}} </view>
</view>

<van-popup show="{{ show }}" custom-style="height: 20%;width: 80%" >
  <view wx:for="{{100}}" wx:key="item" bindtap="handClose"> 内容 </view>
</van-popup>

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

data:{
    show: false
}

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

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

​

弹窗中图标 

期待效果：

  

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

<van-popup class="dialog" show="{{ show }}" >
  <view  class="pop">
    <van-icon class="close" name="close" bindtap="close"/>
    <image class="img" src="xxxx.png" lazy-load="true"></image>
  </view>
</van-popup>

.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;
}

打开前关闭键盘

<van-popup 
    class="dialog" 
    show="{{ show }}" 
    bind:before-enter="hideKeyboard"
>
</van-popup>

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