微信小程序实现水平垂直滚动
导读:收集整理的这篇文章主要介绍了微信小程序实现水平垂直滚动,觉得挺不错的,现在分享给大家,也给大家做个参考。 @H_777_0@本文实例为大家分享了微信小程序实现水平垂直滚动的具体代码,供大...
收集整理的这篇文章主要介绍了微信小程序实现水平垂直滚动,觉得挺不错的,现在分享给大家,也给大家做个参考。 @H_777_0@本文实例为大家分享了微信小程序实现水平垂直滚动的具体代码,供大家参考,具体内容如下要点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 } ); }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
您可能感兴趣的文章:- 微信小程序 scroll-view隐藏滚动条详解
- 微信小程序scroll-view实现滚动穿透和阻止滚动的方法
- 详解微信小程序scroll-view横向滚动的实践踩坑及隐藏其滚动条的实现
- 微信小程序顶部可滚动导航效果
- 微信小程序scroll-view组件实现滚动动画
- 微信小程序-滚动消息通知的实例代码
- 微信小程序滚动Tab实现左右可滑动切换
- 微信小程序实现文字滚动
- 微信小程序实现多行文字滚动效果
- 微信小程序实现无缝滚动
声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!
若转载请注明出处: 微信小程序实现水平垂直滚动
本文地址: https://pptw.com/jishu/594884.html