关于在微信开发工具里的上下滑动和左右滑动的问题

fstao 2026-06-07 20:58:11

我在做一个测试，是用微信开发工具开发，用的是javascript，是测试手机上下左右滑动的功能，如下代码

// pages/test/test.js
Page({
  data: {},
  onLoad() {
    console.log('测试页面加载');
  }
});


{
  "navigationBarTitleText": "滚动测试",
  "usingComponents": {}
}


<!-- pages/test/test.wxml -->
<view class="container">
  <view class="title">测试滚动页面</view>
  
  <!-- 横向滚动测试（使用原生 CSS） -->
  <view class="test-area">
    <view class="label">横向滚动测试（左右滑动）</view>
    <view class="scroll-x">
      <view class="scroll-x-content">
        <view class="box red">A</view>
        <view class="box orange">B</view>
        <view class="box yellow">C</view>
        <view class="box green">D</view>
        <view class="box blue">E</view>
        <view class="box purple">F</view>
        <view class="box pink">G</view>
        <view class="box brown">H</view>
      </view>
    </view>
  </view>
  
  <!-- 纵向滚动测试（使用原生 CSS） -->
  <view class="test-area">
    <view class="label">纵向滚动测试（上下滑动）</view>
    <view class="scroll-y">
      <view class="scroll-y-content">
        <view class="row red">行1</view>
        <view class="row orange">行2</view>
        <view class="row yellow">行3</view>
        <view class="row green">行4</view>
        <view class="row blue">行5</view>
        <view class="row purple">行6</view>
        <view class="row pink">行7</view>
        <view class="row brown">行8</view>
        <view class="row red">行9</view>
        <view class="row orange">行10</view>
      </view>
    </view>
  </view>
  
  <!-- 横纵向同时滚动测试 -->
  <view class="test-area">
    <view class="label">横纵向同时滚动测试</view>
    <view class="scroll-xy">
      <view class="scroll-xy-content">
        <view class="wide-content">
          <view class="row">行1 - 很长很长很长很长很长很长很长很长的内容</view>
          <view class="row">行2 - 很长很长很长很长很长很长很长很长的内容</view>
          <view class="row">行3 - 很长很长很长很长很长很长很长很长的内容</view>
          <view class="row">行4 - 很长很长很长很长很长很长很长很长的内容</view>
          <view class="row">行5 - 很长很长很长很长很长很长很长很长的内容</view>
        </view>
      </view>
    </view>
  </view>
  
</view>

/* pages/test/test.wxss */
.container {
  padding: 30rpx;
}
.title {
  font-size: 40rpx;
  text-align: center;
  margin-bottom: 40rpx;
}
.test-area {
  margin-bottom: 50rpx;
  border: 1rpx solid #ccc;
  padding: 20rpx;
  border-radius: 16rpx;
}
.label {
  font-size: 28rpx;
  margin-bottom: 20rpx;
  color: #333;
  font-weight: bold;
}

/* ========== 横向滚动 ========== */
.scroll-x {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  background: #f5f5f5;
  border-radius: 8rpx;
}

.scroll-x-content {
  display: inline-block;
  white-space: nowrap;
}

.box {
  display: inline-block;
  width: 120rpx;
  height: 120rpx;
  line-height: 120rpx;
  text-align: center;
  margin: 10rpx;
  border-radius: 16rpx;
  color: white;
  font-weight: bold;
  font-size: 40rpx;
}

/* ========== 纵向滚动 ========== */
.scroll-y {
  width: 100%;
  height: 400rpx;
  overflow-y: auto;
  overflow-x: hidden;
  background: #f5f5f5;
  border-radius: 8rpx;
}

.row {
  height: 80rpx;
  line-height: 80rpx;
  padding: 0 20rpx;
  margin: 5rpx;
  border-radius: 8rpx;
  color: white;
  font-weight: bold;
}

/* ========== 横纵向同时滚动 ========== */
.scroll-xy {
  width: 100%;
  height: 300rpx;
  overflow: auto;
  background: #f5f5f5;
  border-radius: 8rpx;
}

.scroll-xy-content {
  width: 1500rpx;
}

.wide-content .row {
  width: 100%;
  background: #667eea;
  color: white;
}

/* 颜色 */
.red { background: #ff4444; }
.orange { background: #ff8800; }
.yellow { background: #ffcc00; color: #333; }
.green { background: #44aa44; }
.blue { background: #4444ff; }
.purple { background: #aa44aa; }
.pink { background: #ff66aa; }
.brown { background: #aa6644; }