微信小程序实现水平垂直滚动
程序员文章站
2022-07-09 08:24:33
本文实例为大家分享了微信小程序实现水平垂直滚动的具体代码,供大家参考,具体内容如下要点swiper内部套scroll-view注意:1.scroll竖直滚动高度不能给百分比要给px/rpx2.swip...
本文实例为大家分享了微信小程序实现水平垂直滚动的具体代码,供大家参考,具体内容如下
要点swiper内部套scroll-view
注意:
1.scroll竖直滚动高度不能给百分比要给px/rpx
2.swiper内部item posiiton定位高度100%
3.swiper高度要给定值
4.如果横向滚动也要给水平的宽度
代码
xml
<swiper class="tab-box" current="{{currenttab}}" duration="300" bindchange="switchtab"> <swiper-item class="tab-content"> <scroll-view class="scroll-height" scroll-y="true" scroll-with-animation="{{true}}"> <view class="cont"> <view class="jira-card" wx:for="{{jiraarray}}" wx:for-index="idx" wx:for-item="itemjira" wx:key="idx"> <card itemjira="{{itemjira}}" data-item="{{itemjira}}" bindtap="godetail"></card> </view> </view> </scroll-view> </swiper-item> <swiper-item class="tab-content"> <scroll-view class="scroll-height" scroll-y="true" scroll-with-animation="{{true}}"> <view class="cont"> <view class="jira-card" wx:for="{{jiraarray}}" wx:for-index="idx" wx:for-item="itemjira" wx:key="idx"> <card itemjira="{{itemjira}}" data-item="{{itemjira}}" bindtap="godetail"></card> </view> </view> </scroll-view> </swiper-item> </swiper> <swiper class="tab-box" current="{{currenttab}}" duration="300" bindchange="switchtab"> <swiper-item class="tab-content"> <scroll-view class="scroll-height" scroll-y="true" scroll-with-animation="{{true}}"> <view class="cont"> <view class="jira-card" wx:for="{{jiraarray}}" wx:for-index="idx" wx:for-item="itemjira" wx:key="idx"> <card itemjira="{{itemjira}}" data-item="{{itemjira}}" bindtap="godetail"></card> </view> </view> </scroll-view> </swiper-item> <swiper-item class="tab-content"> <scroll-view class="scroll-height" scroll-y="true" scroll-with-animation="{{true}}"> <view class="cont"> <view class="jira-card" wx:for="{{jiraarray}}" wx:for-index="idx" wx:for-item="itemjira" wx:key="idx"> <card itemjira="{{itemjira}}" data-item="{{itemjira}}" bindtap="godetail"></card> </view> </view> </scroll-view> </swiper-item> </swiper>
wxss
.tab-box{ height: 1040rpx; } .scroll-height { height: 1040rpx; }
js
myaudit(){ this.setdata({ currenttab:0, }) }, myinitiate(){ this.setdata({ currenttab:1, // jiraarray:[] }) }, switchtab(event){ var cur = event.detail.current; var singlenavwidth = this.data.windowwidth / 5; this.setdata({ currenttab: cur, navscrollleft: (cur - 2) * singlenavwidth }); }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
下一篇: 电脑重装系统后键盘无法使用的解决方法