微信小程序中实现左右横拉长页面，可以通过以下步骤：

1. 在小程序的wxml文件中，添加一个容器元素，例如`<view class="container">`，并在其中添加两个子元素，分别表示左侧和右侧的内容。例如：

<view class="container">
  <view class="left"></view>
  <view class="right"></view>
</view>

2. 在对应的wxss文件中，设置容器的样式，使其占据整个屏幕宽度，并设置左右子元素的宽度为50%。例如：

.container {
  display: flex;
  width: 100%;
  height: 100vh;
}

.left {
  width: 50%;
  background-color: lightblue;
}

.right {
  width: 50%;
  background-color: lightgreen;
}

3. 在对应的js文件中，监听容器的滚动事件，并根据滚动位置动态调整左右子元素的宽度。例如：

Page({
  data: {
    scrollLeft: 0
  },

  onLoad: function () {
    const container = this.selectComponent('.container');
    container.addEventListener('scroll', this.handleScroll);
  },

  handleScroll: function (e) {
    const container = e.currentTarget;
    const scrollLeft = container.scrollLeft;
    this.setData({
      scrollLeft: scrollLeft
    });
  }
});

4. 在对应的wxss文件中，根据`scrollLeft`的值动态调整左右子元素的宽度。例如：

.container {
  display: flex;
  width: 100%;
  height: 100vh;
}

.left {
  width: calc(50% + var(--scrollLeft));
  background-color: lightblue;
}

.right {
  width: calc(50% - var(--scrollLeft));
  background-color: lightgreen;
}

这样，当用户在小程序中左右滑动时，左右子元素的宽度将根据滑动位置动态调整，从而实现左右横拉长页面的效果。

试试这个？

https://developers.weixin.qq.com/miniprogram/dev/component/movable-area.html