微信小程序的视图容器——简易实现纵向滚动scroll-view

实现纵向滚动

 以下是.wxml代码

<!--pages/scroll/scroll.wxml-->
<scroll-view scroll-y>
  <view>
    东京超市1
  </view>
  <view>
    东京超市2
  </view>
  <view>
    东京超市3
  </view>
  <view>
    东京超市4
  </view>
  <view>
    东京超市5
  </view>
  <view>
    东京超市6
  </view>
  <view>
    东京超市7
  </view>
  <view>
    东京超市8
  </view>
  <view>
    东京超市9
  </view>
  <view>
    东京超市10
  </view>
  <view>
    东京超市11
  </view>
  <view>
    东京超市12
  </view>
 
</scroll-view>

以下是.wxss代码

/* pages/scroll/scroll.wxss */
scroll-view {
  width: 300rpx;
  background-color: #f3f1f1;
}
scroll-view view{
width: 100%;
height: 150rpx;
text-align: center;
line-height: 150rpx;
border-bottom: 2rpx solid #cccccc;
}
 

微信小程序滚动视图