微信小程序开发实现scroll
- 微信应用
- 2024-10-14 08:50:02
微信小程序开发实现scroll
这篇文章微信小程序开发实现scroll-view隐藏滚动条方法介绍
这篇文章微信小程序开发实现scroll-view隐藏滚动条方法介绍
网页开发的时候往往会为了页面的美观,而选择去掉滚动区域默认的滚动条。微信小程序实现scroll-view隐藏滚动条的方法之一:
首先我们来看一下,scroll-view的一些属性组件
使用竖向滚动时,需要给一个固定高度,通过 WXSS 设置 height。再来看一些简单的代码示例:
<view class="section"> <view class="sectiontitle">vertical scroll</view> <scroll-view scroll-y="true" style="height: 200px;" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" scroll-into-view="{{toView}}" scroll-top="{{scrollTop}}"> <view id="green" class="scroll-view-item bc_green"></view> <view id="red" class="scroll-view-item bc_red"></view> <view id="yellow" class="scroll-view-item bc_yellow"></view> <view id="blue" class="scroll-view-item bc_blue"></view> </scroll-view> <view class="btn-area"> <button size="mini" bindtap="tap">click me to scroll into view </button> <button size="mini" bindtap="tapMove">click me to scroll</button> </view></view><view class="section section_gap"> <view class="sectiontitle">horizontal scroll</view> <scroll-view class="scroll-view_H" scroll-x="true" style="width: 100%"> <view id="green" class="scroll-view-item_H bc_green"></view> <view id="red" class="scroll-view-item_H bc_red"></view> <view id="yellow" class="scroll-view-item_H bc_yellow"></view> <view id="blue" class="scroll-view-item_H bc_blue"></view> </scroll-view></view>微信小程序开发实现scroll由讯客互联微信应用栏目发布,感谢您对讯客互联的认可,以及对我们原创作品以及文章的青睐,非常欢迎各位朋友分享到个人网站或者朋友圈,但转载请说明文章出处“微信小程序开发实现scroll”