微信小程序實現縱向滾動塊--scroll-view

1、微信小程序scroll-view 設置可滾動視圖區域css

1.因爲手機的寬度比較窄,出現橫向滾動的須要很常見html

2.scrool-y,設置區域能夠縱向滾動web

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代碼結構spa

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

顯示結果:.net

 

更多:code

微信小程序實現橫向滾動塊--scroll-viewxml

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

微信小程序圖片上傳使用整理(一)

相關文章
相關標籤/搜索