支付寶小程序組件 視圖容器·view

視圖容器。相當(dāng)于 web 的 div 或者 react-native 的 view。如果需要使用滾動視圖，請使用 scroll-view。不支持 view 組件覆蓋 map 組件，可通過同層渲染實現(xiàn) cover-view 覆蓋 map 組件。

掃碼體驗

示例代碼

<!-- API-DEMO page/component/view.axml -->
<view class="page">
  <view>
    <button a:if="{{returnIndex}}" onTap="returnIndex">回到首頁</button>
  </view>
  <view class="page-description">視圖容器，相當(dāng)于 web 的 div 或者 react-native 的 View。</view>
  <view class="page-section">
    <view class="page-section-demo">
      <view class="stream">
        <view class="post">
          <view class="postUser">
            <view class="postUser__name">Chris</view>
          </view>
          <view class="postBody">
            <view class="postBody__content">
              歡迎使用支付寶小程序?。?！
            </view>
            <view class="postBody__date">
              May 20
            </view>
          </view>
        </view>


        <view class="post">
          <view class="postUser">
            <view class="postUser__name">Jack</view>
          </view>
          <view class="postBody">
            <view class="postBody__content">
              @Chris 我該如何上手？
            </view>
            <view class="postBody__date">
              May 21
            </view>
          </view>
        </view>


        <view class="post">
          <view class="postUser">
            <view class="postUser__name">Chris</view>
          </view>
          <view class="postBody">
            <view class="postBody__content">
              你可以查看 Demo，對小程序有一個簡單的了解；然后下載我們的 IDE 進(jìn)行開發(fā)。
            </view>
            <view class="postBody__date">
              May 22
            </view>
          </view>
        </view>


        <view class="post">
          <view class="postUser">
            <view class="postUser__name">Jessie</view>
          </view>
          <!-- hover red -->
          <view class="postBody" hover-class="red">
            <view class="postBody__content">
              贊!
            </view>
            <view class="postBody__date" hidden>
              June 1
            </view>
          </view>
        </view>


        <view class="post" hidden>
          <view class="postUser">
            <view class="postUser__name">Jessie</view>
          </view>
          <view class="postBody">
            <view class="postBody__content">
              贊! +1
            </view>
            <view class="postBody__date">
              June 1
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</view>
// API-DEMO page/component/view.js
Page({
  data: {
    pageName: 'component/view',
  },
  onLoad() {
    this.setData({
      returnIndex: getCurrentPages().length === 1,
    })
  },
  returnIndex() {
    my.switchTab({ url: '/page/component/index' });
  },
});
/* API-DEMO page/component/view.acss */
.post + .post {
  margin-top: 10rpx;
}
.post {
  display: flex;
}
.postUser {
  flex: 0 1 auto;
  padding-bottom: 20rpx;
}
.postUser__name {
  width: 180rpx;
  color: #57727C;
  font-size: 24rpx;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  margin-top: 60rpx;
}
.postBody {
  flex: 1 1 0%;
  position: relative;
  padding: 30rpx;
  border: 2rpx solid #CAD0D2;
  border-radius: 8rpx;
}
.postBody:after,
.postBody:before {
  right: 100%;
  top: 70rpx;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}
.postBody:after {
  border-color: transparent;
  border-right-color: #ffffff;
  border-width: 16rpx;
  margin-top: -16rpx;
}
.postBody:before {
  border-color: transparent;
  border-right-color: #CAD0D2;
  border-width: 18rpx;
  margin-top: -18rpx;
}
.postBody__content {
  color: #57727C;
  font-size: 24rpx;
}
.postBody__date {
  margin-top: 10rpx;
  color: #86969C;
  font-size: 20rpx;
  text-transform: uppercase;
  letter-spacing: 2rpx;
}

屬性

常見問題

如何改變 view 的展示順序？

將這兩個模塊嵌入到一個循環(huán)里面，每一個循環(huán)的小模塊加一個類型值進(jìn)行標(biāo)識。

頁面滾動時在不同屏幕滾動到的位置不同，如何解決？

1. 按照屏幕的比例計算，換算跳轉(zhuǎn)位置 。
2. 固定一個滑動位置，在該位置寫入一個 view，通過計算這個 view 到頂部距離，進(jìn)行跳轉(zhuǎn)。