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

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

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

2.scrool-x ，設置區域能夠橫向滾動

3.scrool-into-view ,設置滾動到指定的id 處，在搜索頁面加載時能夠定位到選中項

2、使用橫向滾動，樣式設置重點

/*設置包裹*/

.out {
  background: #ddd;
  padding: 20px 10px;
  width: 100%;
  white-space: nowrap;
  box-sizing: border-box;
}

/*設置行內塊*/

.out  .item {
  width: 100px;
  height: 80px;
  border: 1px solid red;
  background: white;
  display: inline-block;
  margin-right: 10px;
}

3、wxml代碼以下

<view>scrool-view 橫向滾動示例</view>

<view class='out'>
  <scroll-view scroll-x 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使用整理

微信小程序圖片上傳使用整理（二）

微信小程序圖片上傳使用整理（一）