0
点赞
收藏
分享

微信扫一扫

微信小程序基础控件,入门(2),

Just_Esme 2023-01-11 阅读 131

微信小程序基础控件,入门(2),_html

scroll-view 纵向滚动

<view class="page-section-title" bindtap='toRefreshPage' >
<text>Vertical Scroll\n纵向滚动</text>
</view>
<view class="page-section-spacing">
<scroll-view scroll-y="true" style="height: 100rpx;" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" scroll-into-view="{{toView}}" scroll-top="{{scrollTop}}">
<view id="demo1" class="scroll-view-item demo-text-1"></view>
<view id="demo2" class="scroll-view-item demo-text-2"></view>
<view id="demo3" class="scroll-view-item demo-text-3"></view>
</scroll-view>
</view>


scroll-view 横向滚动

<view class="page-section-title">
<text>Horizontal Scroll\n横向滚动</text>
</view>
<view class="page-section-spacing">
<scroll-view class="scroll-view_H" scroll-x="true" bindscroll="scroll" style="width: 100%">
<view id="demo1" class="scroll-view-item_H demo-text-1"></view>
<view id="demo2" class="scroll-view-item_H demo-text-2"></view>
<view id="demo3" class="scroll-view-item_H demo-text-3"></view>
</scroll-view>
</view>

style 样式

.scroll-view-item{
height: 100rpx;
}
.scroll-view-item_H{
display: inline-block;
width: 100%;
height: 100rpx;
}
.flex-wrp{
display:flex;
}
.demo-text-1{
width: 350rpx;
background-color: aqua;
}


微信官网平台链接: ​​https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html​​

如需要可以下载源码:


demo地址:​​ 源代码地址github​​

举报

相关推荐

0 条评论