微信小程序实现纵向滚动块--scroll-view

1、微信小程序scroll-view 设置可滚动视图区域

1.因为手机的宽度比较窄，出现横向滚动的须要很常见

2.scrool-y，设置区域能够纵向滚动

3.scrool-into-view ,设置滚动到指定的id 处，在搜索页面加载时能够定位到选中项

4.要出现纵向滚动条，须要给scroll-view 组件指定高度 

2、滚动样式指定

.out {
  background: #ddd;
}
/**设置高度就会出现纵向滚动条**/
.out scroll-view{
    height: 200px;
}

.out .item {
  height: 100px;
  border: 1px solid red;
  background: white;
  margin: 10px;
}

3、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>

显示结果：

 

更多：

微信小程序实现横向滚动块--scroll-view

微信小程序web-view使用整理

微信小程序图片上传使用整理（一）