探秘小程序:scroll-view组件
Posted code_文文
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了探秘小程序:scroll-view组件相关的知识,希望对你有一定的参考价值。
按照官方文档的例子已经多scroll-view进行了说明,但是案例中没有样式 到时会出现一些问题,比如说,自己写的scroll-x并不能横向滚动,今天就来说一下这个问题:
DEMO如下:
html:
<view class=‘section‘> <view class=‘section_title‘>verticle scroll</view> <scroll-view scroll-y 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="section__title">horizontal scroll</view> <scroll-view scroll-x=‘true‘ class="scroll-view_H" 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>
js:
var order = [‘red‘,‘yellow‘,‘blue‘,‘green‘,‘red‘] Page({ /** * 页面的初始数据 */ data: { toView:‘red‘, scrollTop:100 }, upper:function(e){ console.log(‘upper‘,e); }, lower:function(e){ console.log(‘lower‘,e); }, scroll:function(e){ console.log(e); }, tap:function(e){ for(var i =0;i<order.length;i++){ if(order[i] === this.data.toView){ this.setData({ toView:order[i+1] }) break; } } }, tapMove:function(e){ this.setData({ scrollTop:this.data.scrollTop + 10 }) } })
css:
/* pages/scrollView/scrollView.wxss */ .bc_green{ background-color: green; } .bc_red{ background-color: red; } .bc_yellow{ background-color: yellow; } .bc_blue{ background-color: blue; } .scroll-view-item{ width: 300px; height: 100px; } .scroll-view-item_H{ width: 50%; height: 220rpx; display: inline-block; text-align: center; margin: 0 auto; } .scroll-view_H{ width: 100%; overflow: hidden; white-space: nowrap; height: 220rpx; }
重点:
.scroll-view-item_H{
width: 50%;
height: 220rpx;
display: inline-block;
text-align: center;
margin: 0 auto;
}
.scroll-view_H{
width: 100%;
overflow: hidden;
white-space: nowrap;
height: 220rpx;
}
同时如果给横向滚动中的元素设置了display:flex或者float-left这些横向滚动都不会生效。请小伙伴们注意啦!
以上是关于探秘小程序:scroll-view组件的主要内容,如果未能解决你的问题,请参考以下文章