Home Diary Blog Photo Community Open Source
解决微信小程序自定义弹窗滚动与页面滚动冲突
解决微信小程序自定义弹窗滚动与页面滚动冲突

转自:http://www.jianshu.com/p/6022f7346ed2



1.整个布局用<scroll-view>作为根节点包裹所有view,并动态绑定scroll-view的scroll-y属性<scroll-view scroll-y="{{is_scroll}}">
2.样式文件中设置Page的overflow-y属性值为hidden
3.样式文件中设置scroll-view的height属性值为100%
4.打开自定义弹窗的点击事件中,更改is_scroll的值为false,关闭弹窗的点击事件中,更改is_scroll的值为true


.wxss

Page {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow-y: hidden;
}

scroll-view {
  height: 100%;
} 


.wxml

<scroll-view scroll-y="{{is_scroll}}"> 

xxx

</scroll>

.js

Page({

  data: {
    show_cart: false,
    is_scroll: true
  },
   toggleCart() {
    var that = this;

    that.setData({
      show_carts: !that.data.show_carts,
      is_scroll: !that.data.is_scroll,
    })
  }
})