一、微信小程序scroll-view 设置可滚动视图区域
1.由于手机的宽度比较窄,出现横向滚动的需要很常见
2.scrool-y,设置区域可以纵向滚动
3.scrool-into-view ,设置滚动到指定的id 处,在搜索页面加载时可以定位到选中项
4.要出现纵向滚动条,需要给scroll-view 组件指定高度
二、滚动样式指定
.out {
background: #ddd;
}
/**设置高度就会出现纵向滚动条**/
.out scroll-view{
height: 200px;
}
.out .item {
height: 100px;
border: 1px solid red;
background: white;
margin: 10px;
}
三、wxml代码结构
<view>scrool-view 纵向滚动示例</view>
<view class='out'>
<scroll-view scroll-y scroll-into-view='item2'>
<view id='item1' class='item'>
<view class='inner'>1</view>
</view>
<view id='item2' class='item'>
<view class='inner'>2</view>
</view>
<view class='item'>
<view class='inner'>3</view>
</view>
<view class='item'>
<view class='inner'>4</view>
</view>
</scroll-view>
</view>
显示结果:
更多: