uniAPP·微信小程序·页面左右滑动切换 swiper-item 和 scroll-view 相结合

uniAPP·微信小程序·页面左右滑动切换 swiper-item 和 scroll-view 相结合

非常简单

1【view】

<view class="Swiper-view">
			<swiper class="Swiper-main" dirval-x="0" duration="100" circular="true" :current="inFooter" @change="GetSwiper($event,index)" >
				<!-- duration 为切换速度； dirval-x 为左右切换；circular为 首尾衔接切换 -->
				<swiper-item> //必须swiper-item 里有 scroll-view
					<scroll-view class="scroll-view" scroll-y="true" >
						我是内容111111
					</scroll-view>
				</swiper-item>
				
				<swiper-item>
					<scroll-view class="scroll-view" scroll-y="true" >
						我是内容2222222
					</scroll-view>
				</swiper-item>
				
				<swiper-item>
					<scroll-view class="scroll-view" scroll-y="true" >
						我是内容3333333
					</scroll-view>
				</swiper-item>
				
				<swiper-item>
					<scroll-view class="scroll-view" scroll-y="true" >
						我是内容 组件44444444
					</scroll-view>
				</swiper-item>
				
				<swiper-item>
					<scroll-view class="scroll-view" scroll-y="true" >
						我是内容 组件555555555
					</scroll-view>
				</swiper-item>
				
			</swiper>
		</view>

2【css】必须存在，必须有高度宽度

.scroll-view{
		width: 100%;
		height: 100%;
	}.Swiper-view{
		width: 100%;
		height: 92%;
		/* background-color: #F0AD4E; */
		/* position 满屏 否则不显示内容 */
		position:absolute; 
		
	}.Swiper-main{
		width: 100%;
		height: 100%;
		/* background-color: #fff; */
		/* 内边距 */
	}swiper-item{
	    overflow-y: auto!important;
		/* 屏幕滚动 */
	}

3【效果】