微信小程序实现上下手势滑动切换

HCJKK2024-03-16 13:55

效果图

思路

实现一个微信小程序的复合滚动页面，主要通过Swiper组件实现垂直方向的轮播功能，每个轮播项内部使用Scroll-View组件来展示可垂直滚动的长内容，如图片和文本。

代码

html 复制代码

<!-- wxml -->
<view class="swiper-container">
  <swiper class="swiper" vertical="true" bindchange="onSwiperChange">
    <swiper-item>
      <!-- 第一个模块的滚动视图 -->
      <scroll-view class="scroll-view" scroll-y="true">
        <!-- 这里是第一个模块的长内容 -->
        <view class="long-content">
		    <image class="img" src="http://img0.baidu.com/it/u=1836749971,2875128665&fm=253&app=138&f=JPEG?w=800&h=1129&#34;     mode=""/>
        </view>
      </scroll-view>
    </swiper-item>
    <swiper-item>
      <!-- 第二个模块的滚动视图 -->
      <scroll-view class="scroll-view" scroll-y="true">
        <!-- 这里是第二个模块的长内容 -->
        <view class="long-content">
          <image class="img" src="https://p9-pc-sign.douyinpic.com/tos-cn-i-0813/8506ad012d1d40ff8940482f2a69e7ca~tplv-dy-aweme-images:q75.webp?biz_tag=aweme_images&from=3213915784&s=PackSourceEnum_AWEME_DETAIL&sc=image&se=false&x-expires=1712764800&x-signature=alMSPxEM4w4svYO29%2BIIpY8Wsog%3D&#34;     mode=""/>
        </view>
      </scroll-view>
    </swiper-item>
  </swiper>
</view>

css 复制代码

/* wxss */
.swiper-container {
  width: 100vw;
	height: 100vh;
	background-color: black;
}
.swiper {
  width: 100%;
  height: 100%;
}
.scroll-view {
  width: 100%;
  height: 100%;
}
.long-content {
	height: 100vh;
}
.img {
	width: 100%;
	height: 100%;
}

javascript 复制代码

// js
Page({
  data: {
    current: 0
  },
  onSwiperChange(e) {
    // 当swiper的current改变时，处理切换逻辑
    console.log('当前swiper-item的索引:', e.detail.current);
  }
});

其他

其他方式实现：微信小程序页面上下滚动 - 灰信网（软件开发博客聚合），发现的问题：鼠标中键直接滚动会导致页面切换不彻底（相当于页面A和页面B拼接成一个页面滑动）。