解决微信小程序自定义弹窗滚动穿透问题

在小程序页面里有自定义弹窗时候,发现弹窗外滚动的时候,底部背景页面也会跟随滚动。面对这个bug,我们可以用下面几种方法实现:

1、catchtouchmove="true"

可以实现弹框背景不滚动,但是也会导致弹框自身无法滚动。

如果你的弹窗本身是不需要滚动的,用这个方法是极佳的。

<view class="pop" catchtouchmove="true">
    <view class="content"></view>
</view>

2、底部内容区使用scroll-view

设置scroll-view垂直滚动,并将scroll-view的高度设置为屏幕高度,这样就可以实现弹窗自身内容滚动时,而底层内容不滚动。

<scroll-view class="container" scroll-y style="height:{
  
  {windowHeight}}px">
    底部内容
</scroll-view>
<view class="pop"></view>

/**
  * 生命周期函数--监听页面加载
  */
 onLoad: function (options) {
    /*获取屏幕高度*/
    this.setData({
      windowHeight: wx.getSystemInfoSync().windowHeight
   
<think>我们正在讨论微信小程序中实现弹窗获取用户信息的功能。根据微信官方的最新政策,获取用户信息的方式已经有所变化,特别是需要用户主动触发(例如点击按钮)才能获取。因此,弹窗获取用户信息通常需要结合按钮来实现。 参考引用[^1]中提到了一个解决滚动穿透的方法,但我们的重点是如何获取用户信息。我们可以这样设计: 1. 使用一个弹窗(可以是自定义组件或使用小程序的`wx.showModal`等),但注意获取用户信息必须通过`<button>`组件,并将`open-type`设置为`getUserInfo`。 2. 在弹窗中放置一个按钮,用户点击后触发获取用户信息的事件。 步骤: a. 在弹窗的wxml中,放置一个按钮,并设置`open-type="getUserInfo"`,同时绑定事件`bindgetuserinfo`。 b. 在事件处理函数中,通过回调参数获取用户信息。 注意:在微信小程序基础库版本更新后,使用`wx.getUserInfo`接口直接弹出授权窗口的方式已被废弃,必须使用按钮引导用户主动授权。 示例代码: 1. 在页面的wxml中,我们有一个按钮用于触发弹窗显示(例如“登录”按钮),点击后显示一个自定义弹窗。 2. 在自定义弹窗的内容中,我们放置一个授权按钮。 弹窗结构(wxml)示例: ```wxml <!-- 自定义弹窗 --> <view class="custom-modal" wx:if="{{showModal}}"> <view class="modal-content"> <view class="modal-body"> <text>请授权获取用户信息</text> <button open-type="getUserInfo" bindgetuserinfo="onGetUserInfo">授权</button> </view> </view> </view> ``` 在js文件中: ```javascript Page({ data: { showModal: false }, // 打开弹窗 openModal: function() { this.setData({ showModal: true }); }, // 用户点击授权按钮后 onGetUserInfo: function(e) { if (e.detail.userInfo) { // 用户同意授权 console.log(e.detail.userInfo); // 这里可以拿到用户信息,进行后续操作 // 然后关闭弹窗 this.setData({ showModal: false }); } else { // 用户拒绝授权 console.log('用户拒绝授权'); } } }) ``` 另外,为了防止滚动穿透(当弹窗出现时,底层页面滚动),我们可以使用引用[^1]中提到的方法:在弹窗的最外层view上添加`catchtouchmove="true"`,这样弹窗内的触摸事件不会传递到底层页面。 修改弹窗外层: ```wxml <view class="custom-modal" wx:if="{{showModal}}" catchtouchmove="true"> ... </view> ``` 这样,当弹窗出现时,底层页面就不会滚动了。 注意:微信小程序获取用户信息需要用户主动触发,所以不能自动弹出授权窗口,必须由用户点击按钮。因此,我们设计一个弹窗,里面包含一个授权按钮,用户点击后触发授权。 另外,我们还可以使用微信官方的登录能力结合`wx.getUserProfile`(针对基础库2.10.4以上版本,但注意最新版本中`getUserProfile`也已被调整,具体需参考最新文档)或直接使用按钮获取用户信息。 根据最新的微信官方文档(2023年),获取用户信息推荐使用以下方式: - 使用`<button open-type="getUserInfo">`获取用户信息(仍然可用,但需要用户主动点击)。 - 或者使用头像昵称填写功能(用户主动填写)。 因此,上述方法是可行的。 相关问题: 1. 如何在小程序中实现用户登录流程? 2. 微信小程序获取用户信息有哪些注意事项? 3. 如何处理用户拒绝授权的情况?</think>### 微信小程序实现弹窗获取用户信息的方法 在微信小程序中,获取用户信息需遵循微信官方规范(需用户主动触发),以下是实现步骤: #### 1. 创建带授权按钮的弹窗 ```wxml <!-- 弹窗组件 --> <view class="popup-mask" wx:if="{{showPopup}}" bindtap="closePopup"> <view class="popup-content" catchtap="stopPropagation" catchtouchmove="true"> <!-- 防止滚动穿透 --> <view class="title">获取用户信息</view> <button open-type="getUserInfo" bindgetuserinfo="handleGetUserInfo" class="auth-btn" >授权获取用户信息</button> </view> </view> ``` #### 2. JS 逻辑处理 ```javascript Page({ data: { showPopup: false }, // 打开弹窗 openUserInfoPopup() { this.setData({ showPopup: true }); }, // 关闭弹窗 closePopup() { this.setData({ showPopup: false }); }, // 阻止冒泡 stopPropagation() {}, // 获取用户信息回调 handleGetUserInfo(e) { if (e.detail.userInfo) { // 用户同意授权 const userInfo = e.detail.userInfo; console.log('获取用户信息:', userInfo); wx.setStorageSync('userInfo', userInfo); this.closePopup(); } else { // 用户拒绝授权 wx.showToast({ title: '授权已取消', icon: 'none' }); } } }) ``` #### 3. WXSS 样式 ```css /* 遮罩层 */ .popup-mask { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 999; } /* 弹窗内容 */ .popup-content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; padding: 30rpx; background: white; border-radius: 16rpx; text-align: center; } .auth-btn { margin-top: 40rpx; background: #07C160; color: white; } ``` ### 关键注意事项 1. **授权规则**:必须通过`<button>`组件触发,`open-type="getUserInfo"`是必要条件 2. **用户主动触发**:不能在页面加载时自动弹出,需用户点击操作(如"登录"按钮) 3. **滚动穿透处理**:弹窗容器添加`catchtouchmove="true"`[^1] 4. **隐私合规**:需在`app.json`中声明`"requiredPrivateInfos": ["getUserInfo"]` 5. **多端兼容**:建议同时实现微信原生弹窗自定义弹窗方案 > 最新规范:2023年9月起,微信调整用户信息获取策略,建议同时提供[头像昵称填写功能](https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/userProfile.html)作为备选方案。 ### 效果说明 1. 用户点击页面按钮触发`openUserInfoPopup`显示弹窗 2. 弹窗中显示授权按钮,用户点击后触发微信原生授权面板 3. 用户同意后返回昵称、头像、性别等基本信息(不包括敏感信息) 4. 通过`e.detail.userInfo`获取数据并存储
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

嫣嫣细语

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值