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【效果】
620 Views