uniapp侧滑弹出

### 实现 UniApp 侧滑弹出功能

为了实现 UniApp 中的侧滑弹出效果，通常可以通过监听设备的手势事件来触发特定的行为。对于侧滑返回的功能，可以在 `pages.json` 文件中配置手势行为，并通过 JavaScript 来控制具体的逻辑。

#### 修改页面配置
在 `pages.json` 文件中的目标页面下添加如下配置：

{
  "path": "yourPagePath",
  "style": {
    "app-plus": {
      "popGesture": "close", // 设置为 close 表示允许右滑关闭当前页[^4]
      "softinputMode": "adjustResize"
    }
  }
}

此配置使得页面支持右侧向左滑动以关闭当前页面的效果。

#### 自定义侧滑交互逻辑
如果希望更复杂的交互方式，比如先关闭弹窗再执行其他动作，则需借助于 Vue 的生命周期钩子函数以及原生 API 结合使用。下面是一个简单的例子展示如何处理这种情况：

export default {
  data() {
    return {
      isPopupVisible: false,
    };
  },
  
  onLoad() {
    plus.webview.currentWebview().setStyle({ popGesture: 'custom' }); // 将默认的侧滑改为自定义模式
    
    document.addEventListener('touchstart', (event) => {
        const startX = event.touches[0].clientX;
        
        let moveHandler = function(event){
            if ((event.changedTouches[0].clientX - startX) > 50 && !isPopupVisible){ // 判断是否满足一定距离条件并检测是否有弹窗显示
                this.closePopup();
                
                setTimeout(() => {
                    plus.webview.currentWebview().back(); // 关闭webview
                }, 300);
            }
            
            document.removeEventListener('touchmove', moveHandler); // 移除移动监听器防止重复触发
        }.bind(this);

        document.addEventListener('touchmove', moveHandler, true);
    });
    
  },

  methods: {
    openPopup(){
      this.isPopupVisible = true; 
      
      // 打开弹窗的具体实现...
    },
    
    closePopup(){
      this.isPopupVisible = false;

      // 关闭弹窗的具体实现...
    }
  }
};

上述代码片段展示了当用户尝试从屏幕边缘开始触摸并向内拖拽超过指定像素时，会优先调用 `closePopup()` 方法隐藏任何可见的模态框或抽屉组件，之后才继续执行浏览器的历史记录回退操作即模拟了“侧滑”的过程[^3]。